This is documentation for Neighborhood v1 and may be outdated. Please visit the latest Neighborhood Design System documentation for latest features.

Hero Split
ready

Component that contains either a video or image as a visual complement to the content.

Open in new window
Viewport: 
<section class="nbhd-hero-split    hero-split-magic nbhd-background-theme-primary-dark " id="hero-split-01">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex  ">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

Variants

Hero Split can be presented in various variants. The eyebrow, subtitle content and call to action button do not need to be provided. There is also options for compact layout, remove the shadow from the visual media element, add a border frame, and reverse the layout of the component.

With Frame

With componentBorderFrame enabled, a border surrounds the content container. Shown with Primary Dark component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split nbhd-hero-split--has-frame   hero-split-magic nbhd-background-theme-primary-dark ">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-hero-split__frame">
    <div class="nbhd-split nbhd-hero-split__flex nbhd-split--reversed ">
      <div class="nbhd-split__detail nbhd-hero-split__detail">
        <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
          Eyebrow</div>
          <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
          <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
          <div class="nbhd-content nbhd-hero-split__content">
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </div>
          <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
        </div>
        <div class="nbhd-split__visual nbhd-hero-split__visual">
          <picture class="nbhd-picture nbhd-fluid ">
            <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=584&amp;retina=true">
            <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=584&amp;retina=true">
            <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=628&amp;retina=true">
            <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=628&amp;retina=true">
            <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=274&amp;retina=true">
            <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true">
            <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
          </picture>
        </div>
      </div>
    </div>
  </div>
</section>

No Shadow

With componentRemoveShadow enabled, the shadow on the media element is removed. Shown with Secondary Light component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split   nbhd-hero-split--no-shadow hero-split-magic nbhd-background-theme-secondary-light ">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex nbhd-split--reversed ">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

With Note

Note content is provided and shown in Secondary Dark component background

Open in new window
Viewport: 
<section class="nbhd-hero-split    hero-split-magic nbhd-background-theme-secondary-dark ">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex  ">
  <div class="nbhd-split__detail nbhd-hero-split__detail">
    <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
      Eyebrow</div>
      <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
      <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
      <div class="nbhd-content nbhd-hero-split__content">
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      <div class="nbhd-note nbhd-hero-split__note">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</div>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

Animated GIF

An animated GIF is provided in the mediaSource and mediaFeature of animated is selected. Show in Primary Light component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split    hero-split-magic nbhd-background-theme-primary-light ">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex nbhd-split--reversed ">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/x0mbhrrq5q/webp/Water_Damage.gif?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/x0mbhrrq5q/jpeg/Water_Damage.gif?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/x0mbhrrq5q/webp/Water_Damage.gif?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/x0mbhrrq5q/jpeg/Water_Damage.gif?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/x0mbhrrq5q/webp/Water_Damage.gif?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/x0mbhrrq5q/jpeg/Water_Damage.gif?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/x0mbhrrq5q/jpeg/Water_Damage.gif?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

Transparent PNG

A transparent PNG is provided in the mediaSource and mediaFeature of transparent is selected, along with componentRemoveShadow enabled. Show in Primary Dark component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split   nbhd-hero-split--no-shadow hero-split-magic nbhd-background-theme-primary-dark ">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex  ">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/pg5zvbrbtf/webp/flo-shop-banner-content-split.webp?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/pg5zvbrbtf/jpeg/flo-shop-banner-content-split.jpeg?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/pg5zvbrbtf/webp/flo-shop-banner-content-split.webp?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/pg5zvbrbtf/jpeg/flo-shop-banner-content-split.jpeg?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/pg5zvbrbtf/webp/flo-shop-banner-content-split.webp?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/pg5zvbrbtf/jpeg/flo-shop-banner-content-split.jpeg?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/pg5zvbrbtf/jpeg/flo-shop-banner-content-split.jpeg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

Taller Image

When either content or media is longer, enabling componentTopAligned will align items to the top instead of centered. Shown with Secondary Light component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split    hero-split-magic nbhd-background-theme-secondary-light " id="hero-split-01">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex  nbhd-split--align-start">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.</p><p>Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p><p>Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&amp;w=584&amp;retina=true">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&amp;w=628&amp;retina=true">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&amp;w=628&amp;retina=true">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&amp;w=274&amp;retina=true">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&amp;w=274&amp;retina=true">
          <img class="nbhd-image nbhd-fluid nbhd-hero-split__image" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&amp;w=274&amp;retina=true" alt="Alternative Text for Image" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
</section>

Video

Providing a video for the mediaSource. Shown with Primary Light component background.

Open in new window
Viewport: 
<section class="nbhd-hero-split    hero-split-magic nbhd-background-theme-primary-light " id="hero-split-01">
  <div class="nbhd-container nbhd-hero-split__container">
  <div class="nbhd-split nbhd-hero-split__flex  ">
    <div class="nbhd-split__detail nbhd-hero-split__detail">
      <div class="nbhd-eyebrow nbhd-hero-split__eyebrow">
        Eyebrow</div>
        <h2 class="nbhd-title nbhd-hero-split__title">Vulputate Cras Elit Lorem</h2>
        <h3 class="nbhd-subtitle nbhd-hero-split__subtitle">Subtitle</h3>
        <div class="nbhd-content nbhd-hero-split__content">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-hero-split__cta" href="#go-here" aria-label="Additional context for this link">Call to Action</a>
      </div>
      <div class="nbhd-split__visual nbhd-hero-split__visual">
        <video class="nbhd-video nbhd-fluid nbhd-hero-split__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/xevbnr2frf/web/CES-SneakPeek2023-JumbotronV3.jpg" aria-label="">
          <source src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</section>

Component Properties

Name Type Default Description
eyebrow string Short introductory content above the title.
title string Main content for headline title of component.
subtitle string Content for secondary title that is under title.
content string General content block below titles and above call to action.
note string Secondary content block.
ctaButton string Call to action link used on component to link to another page or section.
mediaSource object Video or Image from Widen.
mediaAltText string Alternative Text for media.
mediaCSSClass string Additional CSS class(es) to add to media element.
componentID string ID attribute value for component.
cssClass string Additional CSS class(es) to add to component.
componentTitleH1 boolean false Set the heading level for title to h1
componentCompact boolean false Enable compact styling.
componentBorderFrame boolean false Display a border surrounding the component.
componentRemoveShadow boolean false Remove the shadow from the visual element of component.
componentLayoutReversed boolean false Content alignment is reversed.
componentMarginTop none | small | medium | large none Add additional margin above the component. Small = 24px, Medium = 48px, Large = 96px.
componentMarginBottom none | small | medium | large none Add additional margin below the component. Small = 24px, Medium = 48px, Large = 96px.
componentPaddingTop default | none | small | medium | large default Set the padding for the top of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the top padding styling for the component and use the default setting.
componentPaddingBottom default | none | small | medium | large default Set the padding for the bottom of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the bottom padding styling for the component and use the default setting.
componentBackground primary-light | primary-dark | secondary-light | secondary-dark primary-light Background theme color for component.
componentRenovation string The ability to alter and renovate the provided component CSS properties of the component.

CSS Properties

The following CSS Properties are available to update styling when provided with componentRenovation. It is ideal to use the default component styling and only leverage the componentRenovation feature in extreme cases. Refer to the Component Renovation guidelines on how to use. Remember...with great power, comes great responsibility!

Property Description
--nbhd-hero-split-background Controls the background styling.
--nbhd-hero-split--container--padding-block Controls the block padding for the container.
--nbhd-hero-split--container--padding-inline Controls the inline padding for the container.
--nbhd-hero-split--flex--align-items Controls the alignment for items of the flexbox
--nbhd-hero-split--flex--justify-content Controls the justification of the flexbox.
--nbhd-hero-split--frame--border Controls the frame border styling.
--nbhd-hero-split--frame--border-color Controls the border color of the frame.
--nbhd-hero-split--frame--border-radius Controls the border radius of the frame.
--nbhd-hero-split--frame--padding-block Controls the block padding for frame.
--nbhd-hero-split--frame--padding-inline Controls the inline padding for frame.
--nbhd-hero-split--visual--shadow Controls the box-shadow styling.

Elements

This component contains the following elements and their associated CSS Properties.

Integration Status

CSS Sap Commerce React
ready
ready
unavailable