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

Minitron
draft

Mintiron is a feature component with carousel functionality. Shares many of the same features as Jumbotron, just in a miniature presentation.

Open in new window
Viewport: 
<section class="nbhd-minitron nbhd-carousel-component nbhd-carousel-navigation--ghost nbhd-carousel-pagination--line nbhd-minitron--compact nbhd-minitron--align-start nbhd-background-theme-secondary-light " id="cmp-minitron-01">
  <div class="nbhd-container nbhd-minitron__container">
    <swiper-container class="nbhd-carousel nbhd-minitron__carousel " auto-height="true" loop="true" speed="700" effect="fade" 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-carousel__slide nbhd-minitron-item   nbhd-background-theme-primary-dark">
        <div class="nbhd-split nbhd-minitron-item__flex ">
        <div class="nbhd-split__detail nbhd-carousel__detail nbhd-minitron-item__detail">
        <div class="nbhd-badge nbhd-minitron-item__badge">New</div>
          <div class="nbhd-eyebrow nbhd-minitron-item__eyebrow">
            Nullam</div>
            <h2 class="nbhd-title nbhd-minitron-item__title">Vulputate Cras Elit Lorem - slide 1</h2>
            <h3 class="nbhd-subtitle nbhd-minitron-item__subtitle">Ornare Mattis</h3>
            <div class="nbhd-content nbhd-minitron-item__content">
              Vestibulum id ligula porta felis euismod semper.</div>
              <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-minitron-item__cta" href="#slide-1-link" target="_blank" aria-label="Additional context for this link">Slide 1 CTA</a>
            </div>
            <div class="nbhd-split__visual nbhd-minitron-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=745&amp;retina=true&amp;h=400&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=745&amp;retina=true&amp;h=400&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=698&amp;retina=true&amp;h=375&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=698&amp;retina=true&amp;h=375&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=350&amp;retina=true&amp;h=188&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=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c">
                <img class="nbhd-image nbhd-fluid nbhd-minitron-item__image" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c" alt="Alternative Text for Image" loading="lazy" >
              </picture>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="nbhd-carousel__slide nbhd-minitron-item   nbhd-background-theme-primary-dark">
        <div class="nbhd-split nbhd-minitron-item__flex ">
          <div class="nbhd-split__detail nbhd-carousel__detail nbhd-minitron-item__detail">
            <div class="nbhd-eyebrow nbhd-minitron-item__eyebrow">
              Purus</div>
              <h2 class="nbhd-title nbhd-minitron-item__title">Condimentum Aenean Nibh - slide 2</h2>
              <h3 class="nbhd-subtitle nbhd-minitron-item__subtitle">Amet Ullamcorper</h3>
              <div class="nbhd-content nbhd-minitron-item__content">
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              </div>
              <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-minitron-item__cta" href="#slide-2-link" target="_blank" aria-label="Additional context for this link">Slide 2 CTA</a>
            </div>
            <div class="nbhd-split__visual nbhd-minitron-item__visual">
              <video class="nbhd-video nbhd-fluid nbhd-minitron-item__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/a7np3cuxrq/ex75c_host_sizzle_extended.jpg" aria-label="Alternative Text for Image">
                <source src="https://moen.widen.net/stream/hd/moen/a7np3cuxrq/ex75c_host_sizzle_extended.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="nbhd-carousel__slide nbhd-minitron-item nbhd-minitron-item--media-only   nbhd-background-theme-primary-dark">
        <div class="nbhd-split nbhd-minitron-item__flex ">
          <div class="nbhd-split__detail nbhd-carousel__detail nbhd-minitron-item__detail">
            <div class="nbhd-eyebrow nbhd-minitron-item__eyebrow">
              Justo</div>
              <h2 class="nbhd-title nbhd-minitron-item__title">Lorem Mollis Euismod - slide 3</h2>
              <h3 class="nbhd-subtitle nbhd-minitron-item__subtitle">Risus Commodo</h3>
              <div class="nbhd-content nbhd-minitron-item__content">
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              </div>
              <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-minitron-item__cta" href="#slide-3-link" target="_blank" aria-label="Additional context for this link">Slide 3 CTA</a>
            </div>
            <div class="nbhd-split__visual nbhd-minitron-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=745&amp;retina=true&amp;h=400&amp;crop=true&amp;k=c">
                <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=745&amp;retina=true&amp;h=400&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=698&amp;retina=true&amp;h=375&amp;crop=true&amp;k=c">
                <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=698&amp;retina=true&amp;h=375&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c">
                <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c">
                <img class="nbhd-image nbhd-fluid nbhd-minitron-item__image" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c" alt="Alternative Text for Image" loading="lazy" >
              </picture>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="nbhd-carousel__slide nbhd-minitron-item nbhd-minitron-item--media-only   nbhd-background-theme-primary-dark">
        <div class="nbhd-split nbhd-minitron-item__flex ">
          <div class="nbhd-split__detail nbhd-carousel__detail nbhd-minitron-item__detail">
            <div class="nbhd-eyebrow nbhd-minitron-item__eyebrow">
              Magna</div>
              <h2 class="nbhd-title nbhd-minitron-item__title">Vehicula Cursus Sit - slide 4</h2>
              <h3 class="nbhd-subtitle nbhd-minitron-item__subtitle">Tristique Etiam</h3>
              <div class="nbhd-content nbhd-minitron-item__content">
                <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
              </div>
              <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-minitron-item__cta" href="#slide-4-link" target="_blank" aria-label="Additional context for this link">Slide 4 CTA</a>
            </div>
            <div class="nbhd-split__visual nbhd-minitron-item__visual">
              <video class="nbhd-video nbhd-fluid nbhd-minitron-item__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/g0qximw21k/web/Moen-SWN-2023_1080p.jpg" aria-label="Alternative Text for Image">
                <source src="https://moen.widen.net/stream/hd/moen/g0qximw21k/Moen-SWN-2023_1080p.mp4" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div slot="container-end">
      </div>
    </swiper-container>
    <div class="nbhd-carousel-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>
</section>

Variants

v2

Open in new window
Viewport: 
<section class="nbhd-minitron nbhd-minitron--compact nbhd-minitron--no-shadow nbhd-minitron--align-start nbhd-background-theme-secondary-light " id="cmp-minitron-02">
  <div class="nbhd-container nbhd-minitron__container">
  <div class="nbhd-carousel__slide nbhd-minitron-item  nbhd-minitron-item--no-carousel  nbhd-background-theme-primary-dark">
  <div class="nbhd-split nbhd-minitron-item__flex ">
  <div class="nbhd-split__detail nbhd-carousel__detail nbhd-minitron-item__detail">
    <div class="nbhd-badge nbhd-minitron-item__badge">New</div>
      <div class="nbhd-eyebrow nbhd-minitron-item__eyebrow">
        Nullam</div>
        <h2 class="nbhd-title nbhd-minitron-item__title">Vulputate Cras Elit Lorem - slide 1</h2>
        <h3 class="nbhd-subtitle nbhd-minitron-item__subtitle">Ornare Mattis</h3>
        <div class="nbhd-content nbhd-minitron-item__content">
          Vestibulum id ligula porta felis euismod semper.</div>
          <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-minitron-item__cta" href="#slide-1-link" target="_blank" aria-label="Additional context for this link">Slide 1 CTA</a>
        </div>
        <div class="nbhd-split__visual nbhd-minitron-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=745&amp;retina=true&amp;h=400&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=745&amp;retina=true&amp;h=400&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=698&amp;retina=true&amp;h=375&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=698&amp;retina=true&amp;h=375&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=350&amp;retina=true&amp;h=188&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=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c">
            <img class="nbhd-image nbhd-fluid nbhd-minitron-item__image" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=350&amp;retina=true&amp;h=188&amp;crop=true&amp;k=c" alt="Alternative Text for Image" loading="lazy" >
          </picture>
        </div>
      </div>
    </div>
  </div>
</section>

Media Dimensions

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

Description Dimension
Default 745px x 400px
Media Only 1300px x 400px

Component Properties

Name Type Default Description
componentID string ID attribute value for component.
cssClass string Additional CSS class(es) to add to component.
componentCompact boolean false Enable compact styling.
componentLayoutReversed boolean false Content alignment is reversed.
componentZoomTurnedOff boolean false Turn off the hover zoom for media.
componentRemoveShadow boolean false Remove the shadow from the component.
componentMediaOnly boolean false Only display media as the slide.
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.
slideAlignment 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.

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.

Elements

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

Integration Status

CSS Sap Commerce React
ready
ready
unavailable