Skip to content
DocumentationExamples
← All components
MODULE 04

Hover Swap

Pointer hover, keyboard focus and touch activation select the same content.

Open demo ↗
EXPLORE THE POSSIBILITIES

A new perspective.
With every interaction.

Multiple websites

One consistent system across many different pages.

HTML source & reuse instructions

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


<div class="lab-swap" data-lab-swap-root="">
<div>
<span class="eyebrow">
         EXPLORE THE POSSIBILITIES
        </span>
<h3 class="display-6">
         A new perspective.
         <br/>
         With every interaction.
        </h3>
<button aria-controls="swap-panel-0" aria-pressed="true" class="lab-swap-button" data-lab-swap="0" type="button">
<span>
          01
         </span>
<strong>
          Multiple websites
         </strong>
<span>
          ↗
         </span>
</button>
<button aria-controls="swap-panel-1" aria-pressed="false" class="lab-swap-button" data-lab-swap="1" type="button">
<span>
          02
         </span>
<strong>
          Mega menu
         </strong>
<span>
          ↗
         </span>
</button>
<button aria-controls="swap-panel-2" aria-pressed="false" class="lab-swap-button" data-lab-swap="2" type="button">
<span>
          03
         </span>
<strong>
          A theme that grows
         </strong>
<span>
          ↗
         </span>
</button>
</div>
<div>
<div data-lab-panel="0" id="swap-panel-0">
<div aria-label="Illustrative website layout: Multiple websites" 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>
              Multiple websites
             </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>
<h4 class="mt-3">
          Multiple websites
         </h4>
<p>
          One consistent system across many different pages.
         </p>
</div>
<div data-lab-panel="1" hidden="" id="swap-panel-1">
<div aria-label="Illustrative website layout: Mega menu" 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>
              Mega menu
             </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>
<h4 class="mt-3">
          Mega menu
         </h4>
<p>
          Give every destination a clear place in your navigation.
         </p>
</div>
<div data-lab-panel="2" hidden="" id="swap-panel-2">
<div aria-label="Illustrative website layout: A theme that grows" 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 theme that grows
             </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>
<h4 class="mt-3">
          A theme that grows
         </h4>
<p>
          Combine independent modules as your site expands.
         </p>
</div>
</div>
</div>