Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

Slider Hero preset

v0.0.0

This page shows examples of displaying Hero Strips in a slider, using the Hero preset.

The footer is very specific to this preset mode. It contains pagination and navigation controls. The footer is wrapped by a Container with modifier --column.

This is a preset mode. All other slider options are unavailable when using this preset. Only options described on this page will work. Please regard this as an element on its own.

Enable preset #

To enter the preset mode:

  • set data-attribute data-slider-hero to true
  • use footer markup from examples.
alt text

Master drinking authentic mixtape tattooed

Pitchfork swag typewriter wolf. Schlitz pickled mumblecore.

Keytar meh
alt text

Gastropub vice pug shoreditch brunch

Swag cronut phlogiston pbr&b fanny pack twee fingerstache. Fixie shabby chic yr keytar tofu truffaut aesthetic. Green juice chambray lomo bespoke mustache roof.

Neutra drinking
alt text

90's yuccie schlitz authentic leggings

8-bit dreamcatcher pop-up swag distillery banjo actually. Sartorial green juice polaroid tumblr twee drinking gluten-free.

Pickled keytar
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Master drinking authentic mixtape tattooed</h3>
                    <p>Pitchfork swag typewriter wolf. Schlitz pickled mumblecore.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Keytar meh</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Gastropub vice pug shoreditch brunch</h3>
                    <p>Swag cronut phlogiston pbr&amp;b fanny pack twee fingerstache. Fixie shabby chic yr keytar tofu truffaut aesthetic. Green juice chambray lomo bespoke mustache roof.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Neutra drinking</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">90's yuccie schlitz authentic leggings</h3>
                    <p>8-bit dreamcatcher pop-up swag distillery banjo actually. Sartorial green juice polaroid tumblr twee drinking gluten-free.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Pickled keytar</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Extra space for naughty editors #

When textual content of Hero Strips exceed the height of the strip, it should not break easily.

alt text

Church-key pug authentic tousled cardigan locavore

Fashion axe deep v street polaroid taxidermy heirloom squid.

Mixtape portland
alt text

Cred umami crucifix kinfolk stumptown kinfolk

Hoodie asymmetrical ethical meh pour-over blue bottle. Banjo meditation tumblr sriracha hashtag vinegar etsy. Lumbersexual readymade hammock put a bird on it bicycle rights artisan skateboard. Deep v blog truffaut tousled seitan chambray. Cleanse tilde humblebrag mlkshk. Bitters pop-up yr chillwave. Distillery heirloom occupy deep v post-ironic stumptown meggings.

Mlkshk fingerstache
alt text

Venmo ennui mixtape vhs pabst chicharrones

Actually mumblecore roof brooklyn. Occupy wes anderson pop-up helvetica jean shorts.

Mlkshk loko
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Church-key pug authentic tousled cardigan locavore</h3>
                    <p>Fashion axe deep v street polaroid taxidermy heirloom squid.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Mixtape portland</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Cred umami crucifix kinfolk stumptown kinfolk</h3>
                    <p>Hoodie asymmetrical ethical meh pour-over blue bottle. Banjo meditation tumblr sriracha hashtag vinegar etsy. Lumbersexual readymade hammock put a bird on it bicycle rights artisan skateboard. Deep v blog truffaut tousled seitan chambray. Cleanse tilde humblebrag mlkshk. Bitters pop-up yr chillwave. Distillery heirloom occupy deep v post-ironic stumptown meggings.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Mlkshk fingerstache</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Venmo ennui mixtape vhs pabst chicharrones</h3>
                    <p>Actually mumblecore roof brooklyn. Occupy wes anderson pop-up helvetica jean shorts.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Mlkshk loko</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Video #

Hero Strip with video can be used.

alt text

Williamsburg +1 pickled stumptown church-key

Pabst kombucha you probably haven't heard of them viral photo booth artisan skateboard humblebrag. Echo occupy jean shorts selfies pinterest heirloom.

Play video

Meditation slow-carb twee thundercats pug

Kickstarter gluten-free godard freegan. Selfies authentic retro tacos pickled chicharrones schlitz yolo.

Play video
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-95196d">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                        <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                        <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                      </picture></div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Williamsburg +1 pickled stumptown church-key</h3>
                    <p>Pabst kombucha you probably haven't heard of them viral photo booth artisan skateboard humblebrag. Echo occupy jean shorts selfies pinterest heirloom.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-95196d" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-813e46">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit">
                      <div class="vi-video__poster"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Meditation slow-carb twee thundercats pug</h3>
                    <p>Kickstarter gluten-free godard freegan. Selfies authentic retro tacos pickled chicharrones schlitz yolo.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-813e46" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mixed content for naughty editors #

Using mixed images and video in strips will work, but is advised against.

Don not use images and video like this.

alt text

Tofu chillwave yolo meh goth intelligentsia

Mustache swag distillery everyday schlitz dreamcatcher brooklyn tilde. Fashion axe migas austin. Bitters neutra lomo tattooed flannel banh mi next level normcore. Slow-carb flexitarian normcore williamsburg viral master roof thundercats. Humblebrag swag semiotics pork belly forage keffiyeh pabst tilde. Twee cred bitters stumptown pickled raw denim loko bespoke. Trust fund synth wolf chicharrones roof.

Yolo vhs
alt text

Cornhole synth keytar tumblr xoxo fingerstache

Blog polaroid gentrify meggings direct trade paleo keytar artisan. Jean shorts offal banh mi cronut kickstarter.

Gastropub viral
alt text

Phlogiston shoreditch irony vice normcore

Cleanse organic +1 kale chips craft beer. Shoreditch marfa chartreuse flexitarian.

Play video

Hammock tacos yolo wolf diy

Flexitarian dreamcatcher park. Butcher kale chips vice sustainable cleanse selfies. Cold-pressed wayfarers marfa.

Play video
Previous
Next 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Tofu chillwave yolo meh goth intelligentsia</h3>
                    <p>Mustache swag distillery everyday schlitz dreamcatcher brooklyn tilde. Fashion axe migas austin. Bitters neutra lomo tattooed flannel banh mi next level normcore. Slow-carb flexitarian normcore williamsburg viral master roof thundercats. Humblebrag swag semiotics pork belly forage keffiyeh pabst tilde. Twee cred bitters stumptown pickled raw denim loko bespoke. Trust fund synth wolf chicharrones roof.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Yolo vhs</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Cornhole synth keytar tumblr xoxo fingerstache</h3>
                    <p>Blog polaroid gentrify meggings direct trade paleo keytar artisan. Jean shorts offal banh mi cronut kickstarter.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Gastropub viral</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-588e50">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                        <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                        <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                        <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                      </picture></div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Phlogiston shoreditch irony vice normcore</h3>
                    <p>Cleanse organic +1 kale chips craft beer. Shoreditch marfa chartreuse flexitarian.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-588e50" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Video  -->
                  <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-lazy="true" data-video-provider="youtube" id="sg-237bce">
                    <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                    <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit">
                      <div class="vi-video__poster"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Hammock tacos yolo wolf diy</h3>
                    <p>Flexitarian dreamcatcher park. Butcher kale chips vice sustainable cleanse selfies. Cold-pressed wayfarers marfa.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-237bce" role="button">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
                      <!-- Icon video-play (mods: --button-left) -->
                      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
                      Play video</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></a>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With Pause/Play button #

To use the pause button:

  1. Enable autoplay
  2. Add pause/play controls to the footer.
alt text

Chicharrones semiotics migas neutra wolf vhs

Keffiyeh yuccie pug portland iphone literally.

Gastropub sriracha
alt text

Godard ennui pabst bitters kitsch

Bushwick mumblecore gastropub humblebrag bicycle rights food truck austin.

Knausgaard microdosing
alt text

Echo park helvetica pour-over loko

Knausgaard selvage put a bird on it farm-to-table. Goth ramps art party bespoke pug disrupt five dollar toast brooklyn. Meh raw denim leggings beard.

Goth farm-to-table
 
<!-- Container  -->
<div class="vi-container">
  <!-- Wrapped in container for this example -->
  <!-- Slider  -->
  <div class="vi-slider" data-slider-autoplay="5000" data-slider-hero="true">
    <div class="vi-slider__slides">
      <div class="vi-slider__wrapper">
        <!-- Add slides here. -->
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Chicharrones semiotics migas neutra wolf vhs</h3>
                    <p>Keffiyeh yuccie pug portland iphone literally.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Gastropub sriracha</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Godard ennui pabst bitters kitsch</h3>
                    <p>Bushwick mumblecore gastropub humblebrag bicycle rights food truck austin.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Knausgaard microdosing</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="vi-slider__slide">
          <!-- Strip type: hero -->
          <div class="vi-strip-hero vi-strip">
            <div class="vi-strip-hero__body vi-strip__body">
              <div class="vi-strip-hero__head vi-strip__head">
                <div class="vi-strip-hero__visual vi-strip__visual">
                  <!-- Rectangular Image (mods: --strip-hero, --lg-fit) -->
                  <div class="vi-rectangular-image vi-rectangular-image--strip-hero vi-rectangular-image--lg-fit"><picture>
                      <source media="(max-width:767px)" srcset="/assets/images/static/test-360x360.jpg, /assets/images/static/test-720x720.jpg 2x">
                      <source media="(max-width:959px)" srcset="/assets/images/static/test-768x470.jpg, /assets/images/static/test-1536x940.jpg 2x">
                      <img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-910x530.jpg" srcset="/assets/images/static/test-910x530.jpg, /assets/images/static/test-1820x1060.jpg 2x">
                    </picture></div>
                </div>
              </div>
              <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-hero__main vi-strip__main">
                <div class="vi-strip-hero__main-container vi-strip__main-container">
                  <div class="vi-strip-hero__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                    <!-- Use h1-h6 depending page hierarchy -->
                    <h3 class="vi-strip-hero__title vi-strip__title">Echo park helvetica pour-over loko</h3>
                    <p>Knausgaard selvage put a bird on it farm-to-table. Goth ramps art party bespoke pug disrupt five dollar toast brooklyn. Meh raw denim leggings beard.</p>
                  </div>
                  <a class="vi-strip-hero__trigger vi-strip__trigger" href="#sample">
                    <!-- Button type: solid  -->
                    <div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Goth farm-to-table</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vi-slider__footer-wrap vi-slider__footer-wrap--hero">
      <!-- Container (mods: --column) -->
      <div class="vi-container vi-container--column">
        <div class="vi-slider__footer vi-slider__footer--hero">
          <div class="vi-slider__pagination vi-slider__pagination--hero">
            <!-- paginatinon will be rendered here -->
          </div>
          <div class="vi-slider__controls vi-slider__controls--hero">
            <div class="vi-slider__control vi-slider__control--hidden vi-slider__control--pause">
              <!-- Button type: slider  -->
              <button type="button" class="vi-btn-slider vi-btn-slider--pause vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--pause vi-btn-slider__label--white vi-btn__label">Pause</span></button>
            </div>
            <div class="vi-slider__control vi-slider__control--hidden vi-slider__control--play">
              <!-- Button type: slider  -->
              <button type="button" class="vi-btn-slider vi-btn-slider--play vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--play vi-btn-slider__label--white vi-btn__label">Play</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--prev">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></button>
            </div>
            <div class="vi-slider__navigation vi-slider__navigation--next">
              <!-- Button type: pagination  -->
              <button type="button" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 26 Mar 2025 - feat(slider): add data-slider-loop to card preset.
  • 26 Mar 2025 - fix(slider): correctly disable navigation when centered by container and 3 or less cards.
  • 18 Feb 2025 - fix(slider): fix accessibility messages
  • 05 Feb 2025 - fix(slider): improve centered slides calculation to work on all zoomlevels
  • 16 Jan 2025 - fix(slider): set aria-current attributes for pagination controls to improve accessibility
  • 16 Jan 2025 - fix(slider): ensure navigation controls are enabled when loop and centeredSlides are enabled
  • 11 Nov 2024 - fix(slider): incorrect margin hero footer
  • 16 Nov 2023 - Autoplay on hover stop fix
  • 15 Sep 2023 - Hide pagination when cards total size is less than container.
  • 01 Mar 2023 - Glitch in crossfade when controlled via pagination.
  • hero footer position.
  • Workaround browser pixel rounding issues.
  • Prevent text selection next text-node after rapidly clicking the disabled next button.
  • Create room for box shadow component overlap
  • A11y outline issue button-element not receiving focus outline
  • A11y: Navigation aria attributes set to the correct element.
  • Pause/Play buttons not reflecting pause state. (js only)
  • Positioning Controls Slider with video buttons.
  • A11y slide containing element with keyboard focus scrolled into view.
  • Hero preset documentation.

Changed

  • Small change to allow usages outside .vi-container on Full Width Page Layout
  • Disabled forced load of images.
  • A11y: Optimised tab-behaviour card preset.
  • A11y: Navigation buttons are buttons now.
  • Ability to detect video mode. (js only)
  • Add ‘next slide’ as argument to slide ‘change’ event.
  • Pause autoplay when playing video in slider.
  • Accessibility: Apply ‘the’ focus outline on pagination (css)
  • Use Rectangular Image –custom in basic slider examples to prevent incorrect use.
  • Added .vi-slider__slides element as root of slider. Not using this element will be frowned upon.
  • Deprecated .vi-slider__navigation-card, .vi-slider__navigation-card--prev and .vi-slider__navigation-card--next. Use .vi-slider__navigation, .vi-slider__navigation--prev and .vi-slider__navigation--next instead.

Added