Hero

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

<div class="lab-hero">
<div>
<span class="eyebrow">
         ONE MODULE. SO MANY POSSIBILITIES.
        </span>
<h3>
         Make a little
         <br/>
<em>
          magic.
         </em>
</h3>
<p>
         One flexible canvas for your next big idea. Combine text, media and actions without rebuilding your layout.
        </p>
<a class="btn btn-primary" href="/modules/card/standard/">
         Explore the cards →
        </a>
</div>
<div aria-label="Illustrative website layout: Your next big idea" 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>
            Your next big idea
           </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 class="lab-centered">
<span class="eyebrow">
        CENTERED VARIANT
       </span>
<h3>
        A bold idea deserves
        <br/>
        a beautiful beginning.
       </h3>
<a class="btn btn-outline-dark" href="/modules/tabs/">
        Explore the possibilities
       </a>
</div>