Hero Slider

Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references.

<div aria-label="Featured layouts" aria-roledescription="carousel" data-autoplay="true" data-versa-slider="" data-interval="4000" data-transition="fade" role="region" tabindex="0"><div class="versa-slides"><div class="versa-slide">
<div class="lab-hero">
<div>
<span class="eyebrow">
            01 / 03
           </span>
<h3>
            Think bigger.
           </h3>
<p>
            A split hero with space for a clear message.
           </p>
<a class="btn btn-primary" href="/modules/hero/standard/">
            Explore this layout
           </a>
</div>
<div aria-label="Illustrative website layout: Think bigger." class="lab-art art-0" role="img">
<div class="art-window">
<div class="art-dots">
             ● ● ●
            </div>
<div class="art-layout">
<div>
<small>
               MAKE SOMETHING GREAT
              </small>
<strong>
               Think bigger.
              </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</div><div class="versa-slide versa-slide-feature" hidden="">
<div class="lab-hero">
<div>
<span class="eyebrow">
            02 / 03
           </span>
<h3>
            Create freely.
           </h3>
<p>
            Each slide can contain its own content and call to action.
           </p>
<a class="btn btn-primary" href="/modules/hero/standard/">
            Explore this layout
           </a>
</div>
<div aria-label="Illustrative website layout: Create freely." class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
             ● ● ●
            </div>
<div class="art-layout">
<div>
<small>
               MAKE SOMETHING GREAT
              </small>
<strong>
               Create freely.
              </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</div><div class="versa-slide" hidden="">
<div class="lab-hero">
<div>
<span class="eyebrow">
            03 / 03
           </span>
<h3>
            Make it yours.
           </h3>
<p>
            Reusable styling keeps your pages consistent.
           </p>
<a class="btn btn-primary" href="/modules/hero/standard/">
            Explore this layout
           </a>
</div>
<div class="versa-site-form-shell"><h4>Start a conversation</h4><form data-versa-site-form="contact"><label class="form-label" for="hero-slider-email">Email address</label><input autocomplete="email" class="form-control mb-3" id="hero-slider-email" name="email" required="" type="email"/><label class="form-label" for="hero-slider-message">Your idea</label><textarea class="form-control mb-3" id="hero-slider-message" name="message" required=""></textarea><button class="btn btn-primary" type="submit">Send your idea</button><p data-form-status="" role="status"></p></form></div>
</div>
</div></div><div class="versa-slider-controls"><button aria-label="Previous slide" class="versa-slider-arrow versa-slider-prev" data-slider-prev="" type="button">‹</button><span class="visually-hidden" data-slider-status="" role="status"></span><button aria-label="Next slide" class="versa-slider-arrow versa-slider-next" data-slider-next="" type="button">›</button><button aria-pressed="true" class="versa-motion-toggle" data-slider-play="" type="button">Pause slideshow</button></div><div class="versa-slider-dots" data-slider-dots=""></div></div>