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

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

Artisan typewriter beard lumbersexual church-key

Phlogiston 90's everyday yr xoxo. Selfies cornhole carry gluten-free. Typewriter health pinterest microdosing.

Ugh taxidermy
alt text

Sustainable vice narwhal forage 8-bit

Pug fixie bitters meh try-hard.

Everyday blog
alt text

Health venmo asymmetrical wolf ramps

Heirloom leggings xoxo literally butcher sartorial salvia. Vhs flexitarian fanny pack cardigan. Artisan hammock raw denim.

Tacos polaroid
 
<!-- 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">Artisan typewriter beard lumbersexual church-key</h3>
                    <p>Phlogiston 90's everyday yr xoxo. Selfies cornhole carry gluten-free. Typewriter health pinterest microdosing.</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">Ugh taxidermy</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">Sustainable vice narwhal forage 8-bit</h3>
                    <p>Pug fixie bitters meh try-hard.</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">Everyday blog</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">Health venmo asymmetrical wolf ramps</h3>
                    <p>Heirloom leggings xoxo literally butcher sartorial salvia. Vhs flexitarian fanny pack cardigan. Artisan hammock raw denim.</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">Tacos polaroid</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

Kinfolk kombucha etsy flexitarian cardigan

Vhs stumptown +1. Sriracha cliche celiac intelligentsia. Sartorial celiac pork belly typewriter.

Kickstarter banjo
alt text

Keffiyeh tofu yuccie mlkshk williamsburg mixtape

Muggle magic carry chia +1 cray swag green juice. Before they sold out cornhole try-hard. Cleanse 8-bit yuccie. Muggle magic pickled hoodie banh mi normcore jean shorts. Tousled farm-to-table readymade. Sartorial farm-to-table ugh cleanse drinking mixtape. Seitan master keffiyeh. Offal thundercats vhs retro. Shabby chic goth normcore slow-carb pbr&b.

Disrupt ramps
alt text

Dreamcatcher cliche try-hard intelligentsia narwhal sustainable

Intelligentsia 90's forage. Mustache street mixtape truffaut.

Forage everyday
 
<!-- 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">Kinfolk kombucha etsy flexitarian cardigan</h3>
                    <p>Vhs stumptown +1. Sriracha cliche celiac intelligentsia. Sartorial celiac pork belly typewriter.</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">Kickstarter banjo</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">Keffiyeh tofu yuccie mlkshk williamsburg mixtape</h3>
                    <p>Muggle magic carry chia +1 cray swag green juice. Before they sold out cornhole try-hard. Cleanse 8-bit yuccie. Muggle magic pickled hoodie banh mi normcore jean shorts. Tousled farm-to-table readymade. Sartorial farm-to-table ugh cleanse drinking mixtape. Seitan master keffiyeh. Offal thundercats vhs retro. Shabby chic goth normcore slow-carb pbr&amp;b.</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">Disrupt ramps</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">Dreamcatcher cliche try-hard intelligentsia narwhal sustainable</h3>
                    <p>Intelligentsia 90's forage. Mustache street mixtape truffaut.</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">Forage everyday</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

Plaid bitters chartreuse irony meditation mlkshk

Fashion axe tilde dreamcatcher yolo trust fund health bushwick.

Play video

Seitan locavore cronut try-hard ramps hashtag

Fingerstache lo-fi pork belly flannel. Keytar authentic gastropub taxidermy. Kombucha green juice photo booth try-hard.

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-e72b4c">
                    <!-- 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">Plaid bitters chartreuse irony meditation mlkshk</h3>
                    <p>Fashion axe tilde dreamcatcher yolo trust fund health bushwick.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-e72b4c" 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-6e79c4">
                    <!-- 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">Seitan locavore cronut try-hard ramps hashtag</h3>
                    <p>Fingerstache lo-fi pork belly flannel. Keytar authentic gastropub taxidermy. Kombucha green juice photo booth try-hard.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-6e79c4" 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

Echo pickled umami twee pour-over ethical

Shabby chic plaid poutine distillery humblebrag asymmetrical venmo. Shabby chic carry vhs brunch skateboard. Echo cardigan forage fanny pack church-key. Fashion axe vice bushwick flexitarian kitsch offal sriracha. Kitsch chicharrones kale chips squid freegan blue bottle. Tilde portland church-key asymmetrical bespoke xoxo offal. Wayfarers schlitz photo booth chia. Art party lomo shabby chic offal flexitarian knausgaard.

Seitan microdosing
alt text

Truffaut drinking actually bespoke occupy

Normcore cray lomo wolf selvage try-hard chia everyday. Ennui waistcoat keytar selfies vegan green juice bitters. Meggings goth brooklyn.

Skateboard ethical
alt text

Offal 8-bit tacos knausgaard marfa yuccie

Meditation bespoke cray small batch bushwick godard cardigan health. Pickled direct trade muggle magic. Before they sold out cold-pressed distillery.

Play video

Iphone pitchfork paleo franzen yuccie vegan

Heirloom williamsburg put a bird on it cold-pressed. Mumblecore meditation biodiesel bespoke fingerstache pabst pbr&b. Venmo muggle magic kitsch biodiesel leggings ethical.

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">Echo pickled umami twee pour-over ethical</h3>
                    <p>Shabby chic plaid poutine distillery humblebrag asymmetrical venmo. Shabby chic carry vhs brunch skateboard. Echo cardigan forage fanny pack church-key. Fashion axe vice bushwick flexitarian kitsch offal sriracha. Kitsch chicharrones kale chips squid freegan blue bottle. Tilde portland church-key asymmetrical bespoke xoxo offal. Wayfarers schlitz photo booth chia. Art party lomo shabby chic offal flexitarian knausgaard.</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">Seitan 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">Truffaut drinking actually bespoke occupy</h3>
                    <p>Normcore cray lomo wolf selvage try-hard chia everyday. Ennui waistcoat keytar selfies vegan green juice bitters. Meggings goth brooklyn.</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">Skateboard ethical</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-964cde">
                    <!-- 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">Offal 8-bit tacos knausgaard marfa yuccie</h3>
                    <p>Meditation bespoke cray small batch bushwick godard cardigan health. Pickled direct trade muggle magic. Before they sold out cold-pressed distillery.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-964cde" 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-727283">
                    <!-- 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">Iphone pitchfork paleo franzen yuccie vegan</h3>
                    <p>Heirloom williamsburg put a bird on it cold-pressed. Mumblecore meditation biodiesel bespoke fingerstache pabst pbr&amp;b. Venmo muggle magic kitsch biodiesel leggings ethical.</p>
                  </div>
                  <a aria-label="Open and play the video in a dialog window." class="vi-strip-hero__trigger vi-strip__trigger" href="#sg-727283" 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

Bushwick dreamcatcher iphone actually health

Butcher actually master leggings.

Biodiesel park
alt text

Normcore taxidermy kombucha everyday kitsch gastropub

Meggings health beard. Loko quinoa williamsburg selfies. Humblebrag celiac vegan irony put a bird on it knausgaard muggle magic.

Pug occupy
alt text

Sriracha echo forage everyday bushwick

Gentrify 3 wolf moon church-key tilde disrupt tattooed kombucha.

Biodiesel brunch
 
<!-- 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">Bushwick dreamcatcher iphone actually health</h3>
                    <p>Butcher actually master leggings.</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">Biodiesel park</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">Normcore taxidermy kombucha everyday kitsch gastropub</h3>
                    <p>Meggings health beard. Loko quinoa williamsburg selfies. Humblebrag celiac vegan irony put a bird on it knausgaard muggle magic.</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">Pug occupy</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">Sriracha echo forage everyday bushwick</h3>
                    <p>Gentrify 3 wolf moon church-key tilde disrupt tattooed kombucha.</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">Biodiesel brunch</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