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

Jumbotron
ready

Main featurette component with attention grabbing features. Can be presented as a single item or in a carousel.

Open in new window
Viewport: 
<section class="nbhd-jumbotron nbhd-jumbotron--text-left nbhd-jumbotron--vertical-middle  nbhd-background-theme-secondary-light nbhd-component-margin-end-medium " id="cmp-jumbotron-01">
  <div class="nbhd-jumbotron__slide nbhd-jumbotron-item ">
  <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-light">
  <div class="nbhd-split nbhd-jumbotron-item__flex nbhd-split--reversed ">
    <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
      <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
        Nullam</div>
        <h2 class="nbhd-title nbhd-jumbotron-item__title">Amet Bibendum</h2>
        <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
        <div class="nbhd-content nbhd-jumbotron-item__content">
          Vestibulum id ligula porta felis euismod semper.</div>
          <div class="">
            <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-1-button" target="_blank" aria-label="Additional context for this link">Slide 1 BTN</a>
            <a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-link" href="#slide-1-link" target="_blank" aria-label="Additional context for this link">Slide 1 Link</a>
          </div>
        </div>
        <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
          <picture class="nbhd-picture nbhd-fluid ">
            <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=e">
            <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=e">
            <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=e">
            <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=e">
            <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e">
            <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e">
            <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__image" src="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e" alt="Alternative Text for Image" loading="lazy" >
          </picture>
        </div>
      </div>
    </div>
  </div>
</section>

Variants

Jumbotron has some features that can enable it to become even more eye catching than the default layout.

Open in new window
Viewport: 
<section class="nbhd-jumbotron nbhd-carousel-component nbhd-jumbotron--text-left nbhd-jumbotron--vertical-middle  nbhd-background-theme-secondary-light nbhd-component-margin-end-medium " id="cmp-jumbotron-02">
  <swiper-container class="nbhd-carousel nbhd-jumbotron__carousel" auto-height="true" loop="true" speed="700" effect="slide" pagination="true" pagination-clickable="true" pagination-type="bullets" pagination-bullet-active-class="nbhd-carousel-pagination__item--active" pagination-bullet-class="nbhd-carousel-pagination__item" pagination-bullet-element="button">
    <swiper-slide>
      <div class="nbhd-jumbotron__slide nbhd-jumbotron-item ">
      <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark">
      <div class="nbhd-split nbhd-jumbotron-item__flex nbhd-split--reversed ">
        <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
          <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-jumbotron-item__title">Amet Bibendum</h2>
            <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-jumbotron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <div class="">
                <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-1-button" target="_blank" aria-label="Additional context for this link">Slide 1 BTN</a>
              </div>
            </div>
            <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
              <picture class="nbhd-picture nbhd-fluid ">
                <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=c">
                <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c">
                <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__image" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c" alt="Alternative Text for Image" loading="lazy" >
              </picture>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="nbhd-jumbotron__slide nbhd-jumbotron-item ">
      <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark">
      <div class="nbhd-split nbhd-jumbotron-item__flex nbhd-split--reversed ">
        <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
          <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-jumbotron-item__title">Amet Bibendum</h2>
            <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-jumbotron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <div class="">
                <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-1-button" target="_blank" aria-label="Additional context for this link">Slide 1 BTN</a>
              </div>
            </div>
            <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
              <picture class="nbhd-picture nbhd-fluid ">
                <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=e">
                <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=e">
                <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=e">
                <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=e">
                <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e">
                <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e">
                <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__image" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=e" alt="Alternative Text for Image" loading="lazy" >
              </picture>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <div slot="container-end">
      <div class="nbhd-carousel-navigation nbhd-jumbotron-navigation ">
        <button type="button" class="nbhd-carousel-navigation__arrow nbhd-carousel-navigation__previous nbhd-carousel-navigation-previous" aria-label="Previous Slide">
          <svg class="nbhd-svg-icon nbhd-carousel-navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 14.6" style="enable-background:new 0 0 25 14.6;" xml:space="preserve">
            <title>Previous Slide</title>
            <g>
              <path d="M12.5,14.6c-0.2,0-0.4-0.1-0.6-0.3L0.3,2.7C0.1,2.5,0,2.3,0,2.1s0.1-0.4,0.3-0.6l1.2-1.2C1.7,0.1,1.9,0,2.1,0 c0.2,0,0.4,0.1,0.6,0.3l9.8,9.8l9.8-9.8C22.5,0.1,22.7,0,22.9,0c0.2,0,0.4,0.1,0.6,0.3l1.2,1.2C24.9,1.7,25,1.9,25,2.1s-0.1,0.4-0.3,0.6L13.1,14.3C12.9,14.5,12.7,14.6,12.5,14.6z" />
            </g>
          </svg>
        </button>
        <button type="button" class="nbhd-carousel-navigation__arrow nbhd-carousel-navigation__next nbhd-carousel-navigation-next" aria-label="Next Slide">
          <svg class="nbhd-svg-icon nbhd-carousel-navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 14.6" style="enable-background:new 0 0 25 14.6;" xml:space="preserve">
            <title>Next Slide</title>
            <g>
              <path d="M12.5,14.6c-0.2,0-0.4-0.1-0.6-0.3L0.3,2.7C0.1,2.5,0,2.3,0,2.1s0.1-0.4,0.3-0.6l1.2-1.2C1.7,0.1,1.9,0,2.1,0 c0.2,0,0.4,0.1,0.6,0.3l9.8,9.8l9.8-9.8C22.5,0.1,22.7,0,22.9,0c0.2,0,0.4,0.1,0.6,0.3l1.2,1.2C24.9,1.7,25,1.9,25,2.1s-0.1,0.4-0.3,0.6L13.1,14.3C12.9,14.5,12.7,14.6,12.5,14.6z" />
            </g>
          </svg>
        </button>
      </div>
    </div>
  </swiper-container>
</section>

Humongotron

Open in new window
Viewport: 
<section class="nbhd-jumbotron nbhd-jumbotron--text-left nbhd-jumbotron--vertical-middle nbhd-jumbotron--humongotron nbhd-jumbotron--humongotron-left nbhd-jumbotron--humongotron-scrollto  nbhd-background-theme-secondary-light nbhd-component-margin-end-medium " id="cmp-jumbotron-03">
  <div class="nbhd-jumbotron__slide nbhd-jumbotron-item nbhd-jumbotron-item--humongotron-overlay-75 ">
  <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark nbhd-jumbotron-item--humongotron ">
  <div class="nbhd-split nbhd-jumbotron-item__flex ">
    <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
      <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
        Nullam</div>
        <h2 class="nbhd-title nbhd-jumbotron-item__title">Amet Bibendum</h2>
        <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
        <div class="nbhd-content nbhd-jumbotron-item__content">
          Vestibulum id ligula porta felis euismod semper.</div>
          <div class="">
            <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-1-button" target="_blank" aria-label="Additional context for this link">Slide 1 BTN</a>
            <a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-link" href="#slide-1-link" target="_blank" aria-label="Additional context for this link">Slide 1 Link</a>
          </div>
        </div>
        <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
          <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__image" src="/assets/images/jumbotron-placeholder.webp" alt="Alternative Text for Image" width="375" loading="lazy">
        </div>
      </div>
      <a class="nbhd-jumbotron__scroll nbhd-scrollto" href="#some-element" aria-label="">
        <span class="nbhd-ui-control nbhd-ui-control--pulse nbhd-scrollto__ui-control">
          <span class="nbhd-ui-control__icon">
            <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 14.6" style="enable-background:new 0 0 25 14.6;" xml:space="preserve">
              <title>Scroll to Section</title>
              <g>
                <path d="M12.5,14.6c-0.2,0-0.4-0.1-0.6-0.3L0.3,2.7C0.1,2.5,0,2.3,0,2.1s0.1-0.4,0.3-0.6l1.2-1.2C1.7,0.1,1.9,0,2.1,0 c0.2,0,0.4,0.1,0.6,0.3l9.8,9.8l9.8-9.8C22.5,0.1,22.7,0,22.9,0c0.2,0,0.4,0.1,0.6,0.3l1.2,1.2C24.9,1.7,25,1.9,25,2.1s-0.1,0.4-0.3,0.6L13.1,14.3C12.9,14.5,12.7,14.6,12.5,14.6z" />
              </g>
            </svg>
          </span>
        </span>
        <span class="nbhd-scrollto__label">
        Scroll</span>
      </a>
    </div>
  </div>
</section>
Open in new window
Viewport: 
<section class="nbhd-jumbotron nbhd-carousel-component nbhd-jumbotron--text-center nbhd-jumbotron--vertical-middle nbhd-jumbotron--humongotron nbhd-jumbotron--humongotron-center nbhd-carousel-navigation--ghost nbhd-carousel-pagination--line  nbhd-background-theme-primary-light nbhd-component-margin-end-medium " id="cmp-jumbotron-03">
  <swiper-container class="nbhd-carousel nbhd-jumbotron__carousel" auto-height="true" autoplay="true" autoplay-delay="5000" autoplay-pause-on-mouse-enter="true" autoplay-disable-on-interaction="false" loop="true" speed="700" effect="slide" pagination="true" pagination-clickable="true" pagination-type="bullets" pagination-bullet-active-class="nbhd-carousel-pagination__item--active" pagination-bullet-class="nbhd-carousel-pagination__item" pagination-bullet-element="button">
    <swiper-slide>
      <div class="nbhd-jumbotron__slide nbhd-jumbotron-item nbhd-jumbotron-item--humongotron-overlay-default ">
      <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark nbhd-jumbotron-item--humongotron ">
      <div class="nbhd-split nbhd-jumbotron-item__flex ">
        <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
          <picture class="nbhd-picture nbhd-fluid nbhd-jumbotron-item__logo-picture">
            <source type="image/webp" srcset="https://moen.widen.net/content/kqpsckmtnw/webp/logo_SWN_rgb_white-gradient.webp?=90&amp;w=250&amp;retina=true">
            <source type="image/jpeg" srcset="https://moen.widen.net/content/kqpsckmtnw/jpeg/logo_SWN_rgb_white-gradient.jpeg?=90&amp;w=250&amp;retina=true">
            <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__logo" src="https://moen.widen.net/content/kqpsckmtnw/jpeg/logo_SWN_rgb_white-gradient.jpeg?=90&amp;w=250&amp;retina=true" alt="" width="250" height="auto" loading="lazy" >
          </picture>
          <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-jumbotron-item__title">Amet Bibendum</h2>
            <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-jumbotron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <div class="">
                <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-1-link" target="_blank" aria-label="Additional context for this link">Slide 1 CTA</a>
              </div>
            </div>
            <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
              <picture class="nbhd-picture nbhd-fluid ">
                <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=c">
                <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=750&amp;retina=true&amp;h=800&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=768&amp;retina=true&amp;h=438&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c">
                <img class="nbhd-image nbhd-fluid nbhd-jumbotron-item__image" src="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=214&amp;crop=true&amp;k=c" alt="Alternative Text for Image" loading="lazy" >
              </picture>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="nbhd-jumbotron__slide nbhd-jumbotron-item nbhd-jumbotron-item--humongotron-overlay-75 ">
      <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark nbhd-jumbotron-item--humongotron ">
      <div class="nbhd-split nbhd-jumbotron-item__flex ">
        <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
          <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-jumbotron-item__title">Sem Bibendum Amet</h2>
            <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-jumbotron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <div class="">
                <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-2-link" target="_blank" aria-label="Additional context for this link">Slide 2 CTA</a>
              </div>
            </div>
            <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
              <video class="nbhd-video nbhd-fluid nbhd-jumbotron-item__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/a7np3cuxrq/ex75c_host_sizzle_extended.jpg" aria-label="">
                <source src="https://moen.widen.net/stream/hd/moen/a7np3cuxrq/ex75c_host_sizzle_extended.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="nbhd-jumbotron__slide nbhd-jumbotron-item nbhd-jumbotron-item--humongotron-overlay-75 ">
      <div class="nbhd-container nbhd-jumbotron-item__container nbhd-background-theme-secondary-dark nbhd-jumbotron-item--humongotron ">
      <div class="nbhd-split nbhd-jumbotron-item__flex ">
        <div class="nbhd-split__detail nbhd-jumbotron-item__detail">
          <div class="nbhd-eyebrow nbhd-jumbotron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-jumbotron-item__title">Sem Bibendum Amet</h2>
            <h3 class="nbhd-subtitle nbhd-jumbotron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-jumbotron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <div class="">
                <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-jumbotron-item__cta nbhd-jumbotron-item__cta-button" href="#slide-2-link" target="_blank" aria-label="Additional context for this link">Slide 2 CTA</a>
              </div>
            </div>
            <div class="nbhd-split__visual nbhd-jumbotron-item__visual">
              <video class="nbhd-video nbhd-fluid nbhd-jumbotron-item__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/a7np3cuxrq/ex75c_host_sizzle_extended.jpg" aria-label="">
                <source src="https://moen.widen.net/stream/hd/moen/a7np3cuxrq/ex75c_host_sizzle_extended.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </div>
    </swiper-slide>
    <div slot="container-end">
      <progress class="nbhd-carousel-progress nbhd-jumbotron-progress" max="100" value="0">
      </progress>
      <div class="nbhd-carousel-navigation nbhd-jumbotron-navigation nbhd-carousel-navigation--ghost ">
        <button type="button" class="nbhd-carousel-navigation__arrow nbhd-carousel-navigation__previous nbhd-carousel-navigation-previous" aria-label="Previous Slide">
          <svg class="nbhd-svg-icon nbhd-carousel-navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 14.6" style="enable-background:new 0 0 25 14.6;" xml:space="preserve">
            <title>Previous Slide</title>
            <g>
              <path d="M12.5,14.6c-0.2,0-0.4-0.1-0.6-0.3L0.3,2.7C0.1,2.5,0,2.3,0,2.1s0.1-0.4,0.3-0.6l1.2-1.2C1.7,0.1,1.9,0,2.1,0 c0.2,0,0.4,0.1,0.6,0.3l9.8,9.8l9.8-9.8C22.5,0.1,22.7,0,22.9,0c0.2,0,0.4,0.1,0.6,0.3l1.2,1.2C24.9,1.7,25,1.9,25,2.1s-0.1,0.4-0.3,0.6L13.1,14.3C12.9,14.5,12.7,14.6,12.5,14.6z" />
            </g>
          </svg>
        </button>
        <button type="button" class="nbhd-carousel-navigation__arrow nbhd-carousel-navigation__next nbhd-carousel-navigation-next" aria-label="Next Slide">
          <svg class="nbhd-svg-icon nbhd-carousel-navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 14.6" style="enable-background:new 0 0 25 14.6;" xml:space="preserve">
            <title>Next Slide</title>
            <g>
              <path d="M12.5,14.6c-0.2,0-0.4-0.1-0.6-0.3L0.3,2.7C0.1,2.5,0,2.3,0,2.1s0.1-0.4,0.3-0.6l1.2-1.2C1.7,0.1,1.9,0,2.1,0 c0.2,0,0.4,0.1,0.6,0.3l9.8,9.8l9.8-9.8C22.5,0.1,22.7,0,22.9,0c0.2,0,0.4,0.1,0.6,0.3l1.2,1.2C24.9,1.7,25,1.9,25,2.1s-0.1,0.4-0.3,0.6L13.1,14.3C12.9,14.5,12.7,14.6,12.5,14.6z" />
            </g>
          </svg>
        </button>
      </div>
    </div>
  </swiper-container>
</section>

Image Dimensions

If not providing a resized image be sure to enable cropping feature for the component properties.

Description Dimension
Default 750px x 800px
Humongotron 2000px x 800px
(Assets should be designed at 4000px x 1600px)
Content Logo 244px x 87px

Component Properties

Name Type Default Description
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 for slide(s).
componentCompact boolean false Enable compact styling.
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.
slideVerticalAlignment top | middle | bottom middle Content vertical alignment for content.
slideTextAlignment left | center | right left Content alignment for content.
slideBackground primary-light | primary-dark | secondary-light | secondary-dark primary-light Background theme color for slide(s).

Slide Properties

Carousel functionality will be enabled when there are more than one slide added to the Jumbotron component.

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.
ctaButton string Call to action button link used on component to link to another page or section.
ctaLink 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.
logo object Image from Widen used as logo or supplemental image above content.
logoAltText string Alternative Text for logo.
humongotronOverlayOpacity 25% | 35% | 50% | 75% 35% Set the overlay opacity when humongotron is enabled.

Carousel functionality will be enabled when there are more than one slide added to the component.

Name Type Default Description
carouselLoop boolean false Enable continuous looping between slide content on the carousel.
carouselSpeed slow | medium | fast medium Set the speed for the carousel slide transition.
carouselTransitionFade boolean false Enable fade effect slide transition.
carouselDisableNavigation boolean false Disable and hide the carousel navigation arrows.
carouselNavigationStyle solid | outlined | ghost solid Set the styling for how the navigation arrows should look.
carouselDisablePagination boolean false Disable and hide the carousel pagination.
carouselPaginationStyleLine boolean false Enable the carousel pagination to have a line styling.
carouselAutoplay boolean false Enable the carousel to autoplay through slides.
carouselAutoplaySpeed 2 | 3 | 4 | 5 | 6 3 Set the speed in seconds for the carousel to autoplay through slides. Only when carouselAutoplay is enabled.

Humongotron Properties

Humongotron is the

Name Type Default Description
humongotron boolean false When enabled the media will fill the entire background and the content will be
humongotronMediaMax boolean false When enabled the component will max at 2000px
humongotronContentAlignment left | center | right left Content positioning on the component.
humongotronScrollToSection string ID of the element that would scroll to. Do not include the #

Elements

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

Integration Status

CSS Sap Commerce React
ready
ready
unavailable