Card Flippers

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

<div class="lab-grid two">
<article class="lab-hover" tabindex="0">
<div aria-label="Illustrative website layout: A different point of view" class="lab-art art-2" role="img">
<div class="art-window">
<div class="art-dots">
           ● ● ●
          </div>
<div class="art-layout">
<div>
<small>
             MAKE SOMETHING GREAT
            </small>
<strong>
             A different point of view
            </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 class="lab-hover-caption">
<h3>
          Look a little closer.
         </h3>
<p>
          Details appear on hover or keyboard focus.
         </p>
</div>
</article>
<article class="lab-flipper" data-lab-flip="">
<div class="lab-flip-front">
<span class="eyebrow">
          DISCOVER
         </span>
<h3>
          More than meets the eye.
         </h3>
<p>
          A new side to your story.
         </p>
</div>
<div class="lab-flip-back">
<span class="eyebrow">
          THE DETAILS
         </span>
<h3>
          Made to be explored.
         </h3>
<p>
          Swap this text for features, benefits or a short customer story.
         </p>
</div>
<button aria-expanded="false" class="btn btn-outline-dark">
         Show details ↗
        </button>
</article>
</div>