Tabs & accordions
CSS-only tab layouts, including desktop tabs that become native accordions in narrow containers.
Horizontal tabs
A horizontal tab presentation with one section open at a time. Tab to a label, then use Enter or Space. No component JavaScript.
Overview
Start with the essentials.
Build with small, composable classes and native HTML.
Design tokens
Make it feel like yours.
Use CSS variables to adjust colors, spacing and typography.
Accessibility
Keep the interaction familiar.
Tab to a heading and use Enter or Space to open or close its section.
View HTML / PlaygroundHTML source
<div class="sl-tabs-container">
<div class="sl-tabs sl-tabs--always" style="--sl-tabs-count: 3">
<details class="sl-tab" name="basic-tabs" open>
<summary>Overview<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Start with the essentials.</h3>
<p>Build with small, composable classes and native HTML.</p>
</div>
</details>
<details class="sl-tab" name="basic-tabs">
<summary>Design tokens<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Make it feel like yours.</h3>
<p>Use CSS variables to adjust colors, spacing and typography.</p>
</div>
</details>
<details class="sl-tab" name="basic-tabs">
<summary>Accessibility<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep the interaction familiar.</h3>
<p>Tab to a heading and use Enter or Space to open or close its section.</p>
</div>
</details>
</div>
</div>Desktop tabs → mobile accordion
Resize the preview: above 768px of container width the headings form tabs; below it they become a stacked accordion. The open section is preserved when resizing.
Overview
Start with the essentials.
Build with small, composable classes and native HTML.
Design tokens
Make it feel like yours.
Use CSS variables to adjust colors, spacing and typography.
Accessibility
Keep the interaction familiar.
Tab to a heading and use Enter or Space to open or close its section.
View HTML / PlaygroundHTML source
<div class="sl-tabs-container">
<div class="sl-tabs sl-tabs--responsive" style="--sl-tabs-count: 3">
<details class="sl-tab" name="responsive-tabs" open>
<summary>Overview<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Start with the essentials.</h3>
<p>Build with small, composable classes and native HTML.</p>
</div>
</details>
<details class="sl-tab" name="responsive-tabs">
<summary>Design tokens<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Make it feel like yours.</h3>
<p>Use CSS variables to adjust colors, spacing and typography.</p>
</div>
</details>
<details class="sl-tab" name="responsive-tabs">
<summary>Accessibility<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep the interaction familiar.</h3>
<p>Tab to a heading and use Enter or Space to open or close its section.</p>
</div>
</details>
</div>
</div>Independent responsive groups
Each group has its own disclosure name, so changing one group leaves the other untouched.
Product
Overview
Start with the essentials.
Build with small, composable classes and native HTML.
Design tokens
Make it feel like yours.
Use CSS variables to adjust colors, spacing and typography.
Accessibility
Keep the interaction familiar.
Tab to a heading and use Enter or Space to open or close its section.
Documentation
Overview
Start with the essentials.
Build with small, composable classes and native HTML.
Design tokens
Make it feel like yours.
Use CSS variables to adjust colors, spacing and typography.
Accessibility
Keep the interaction familiar.
Tab to a heading and use Enter or Space to open or close its section.
View HTML / PlaygroundHTML source
<div class="sl-stack sl-gap-8">
<section class="sl-stack">
<h3 class="sl-text-xl">Product</h3>
<div class="sl-tabs-container">
<div class="sl-tabs sl-tabs--responsive" style="--sl-tabs-count: 3">
<details class="sl-tab" name="product-tabs" open>
<summary>Overview<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Start with the essentials.</h3>
<p>Build with small, composable classes and native HTML.</p>
</div>
</details>
<details class="sl-tab" name="product-tabs">
<summary>Design tokens<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Make it feel like yours.</h3>
<p>Use CSS variables to adjust colors, spacing and typography.</p>
</div>
</details>
<details class="sl-tab" name="product-tabs">
<summary>Accessibility<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep the interaction familiar.</h3>
<p>Tab to a heading and use Enter or Space to open or close its section.</p>
</div>
</details>
</div>
</div>
</section>
<section class="sl-stack">
<h3 class="sl-text-xl">Documentation</h3>
<div class="sl-tabs-container">
<div class="sl-tabs sl-tabs--responsive" style="--sl-tabs-count: 3">
<details class="sl-tab" name="docs-tabs" open>
<summary>Overview<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Start with the essentials.</h3>
<p>Build with small, composable classes and native HTML.</p>
</div>
</details>
<details class="sl-tab" name="docs-tabs">
<summary>Design tokens<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Make it feel like yours.</h3>
<p>Use CSS variables to adjust colors, spacing and typography.</p>
</div>
</details>
<details class="sl-tab" name="docs-tabs">
<summary>Accessibility<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep the interaction familiar.</h3>
<p>Tab to a heading and use Enter or Space to open or close its section.</p>
</div>
</details>
</div>
</div>
</section>
</div>Four-section responsive layout
Set --sl-tabs-count to match the number of sections. Longer labels wrap on the desktop layout; mobile uses the same accordion controls.
Overview
Start with the essentials.
Build with small, composable classes and native HTML.
Design tokens
Make it feel like yours.
Use CSS variables to adjust colors, spacing and typography.
Accessibility
Keep the interaction familiar.
Tab to a heading and use Enter or Space to open or close its section.
Next steps
Keep building.
Explore the rest of the component library.
View HTML / PlaygroundHTML source
<div class="sl-tabs-container">
<div class="sl-tabs sl-tabs--responsive" style="--sl-tabs-count: 4">
<details class="sl-tab" name="four-tabs" open>
<summary>Overview<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Start with the essentials.</h3>
<p>Build with small, composable classes and native HTML.</p>
</div>
</details>
<details class="sl-tab" name="four-tabs">
<summary>Design tokens<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Make it feel like yours.</h3>
<p>Use CSS variables to adjust colors, spacing and typography.</p>
</div>
</details>
<details class="sl-tab" name="four-tabs">
<summary>Accessibility<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep the interaction familiar.</h3>
<p>Tab to a heading and use Enter or Space to open or close its section.</p>
</div>
</details>
<details class="sl-tab" name="four-tabs">
<summary>Next steps<span aria-hidden="true">⌄</span></summary>
<div class="sl-tab__panel sl-stack">
<h3 class="sl-text-xl">Keep building.</h3>
<p>Explore the rest of the component library.</p>
</div>
</details>
</div>
</div>Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.