Tabs
Accessible tabbed content with Versa styling plus Bootstrap-powered variants for richer responsive layouts.
Versa tabs
Use the Versa tab pattern when you want a polished, keyboard-friendly content switcher with minimal markup.
Ask better questions.
Start with the audience, the purpose and the practical constraints.
Make the idea tangible.
Explore structure, typography and a clear visual language.
Refine the experience.
Test real interactions across devices before publishing.
Bootstrap pill tabs — Versa treatment
Use Bootstrap tab behavior when you need its familiar API, while Versa supplies the visual treatment and responsive content styling.
Start with a clear idea.
Tabs can hold an entire responsive section, including cards, images and actions.
Bring your story to life.
Tabs can hold an entire responsive section, including cards, images and actions.
Share it with the world.
Tabs can hold an entire responsive section, including cards, images and actions.
HTML source & reuse instructions
Keep the CSS and JavaScript links from this page. Asset paths are relative to the modules folder.
<div data-versa-tabs=""><div aria-label="Our process" class="versa-tablist" role="tablist"><button aria-selected="true" role="tab" tabindex="0" type="button">Discover</button><button aria-selected="false" role="tab" tabindex="-1" type="button">Design</button><button aria-selected="false" role="tab" tabindex="-1" type="button">Deliver</button></div><section role="tabpanel" tabindex="0"><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-project.svg" width="960"/><div><h3>Ask better questions.</h3><p>Start with the audience, the purpose and the practical constraints.</p></div></div></section><section hidden="" role="tabpanel" tabindex="0"><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-content.svg" width="960"/><div><h3>Make the idea tangible.</h3><p>Explore structure, typography and a clear visual language.</p></div></div></section><section hidden="" role="tabpanel" tabindex="0"><div class="versa-content-slide"><img alt="Generic Versa interface illustration" height="640" loading="lazy" src="/assets/images/versa-dashboard.svg" width="960"/><div><h3>Refine the experience.</h3><p>Test real interactions across devices before publishing.</p></div></div></section></div>