Before is a classless, semantic style reset that styles HTML5 elements directly, providing accessible defaults without relying on utility-first CSS libraries or overly complex frameworks. It is themeable (via CSS custom properties) and designed for progressive enhancement, allowing further customization through classes, components, or frameworks when desired. By targeting semantic HTML, it provides a rock-solid, long-term foundation. All components are implemented according to the ARIA Authoring Practices Guide (APG), ensuring they are accessible, predictable, and keyboard-friendly, so your semantic HTML remains usable for everyone.
To get started, simply copy/paste the Before.css file into your project and link to it in the head of your HTML document.
The following visual HTML5 elements are styled by Before:
<a> - Anchor element that creates a hyperlink to other pages, files, or locations.A standard hyperlink with underline styling that inherits the current text color.
<a href="#">Click here to learn more</a>Links that have been visited maintain the current color with slightly reduced opacity.
<a href="#visited-example">Previously visited link</a>Links with target="_blank" automatically display an external link indicator (↗).
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>Links with the download attribute display a download indicator (↓) before the text.
<a href="/files/document.pdf" download>Download PDF</a>Links with mailto: protocol display an email icon (✉) before the text.
<a href="mailto:hello@example.com">hello@example.com</a>Links with tel: protocol display a phone icon (📞) before the text.
<a href="tel:+1234567890">+1 (234) 567-890</a>Use aria-disabled="true" to visually disable a link while maintaining accessibility.
<a href="#" aria-disabled="true">Unavailable link</a>Use aria-current="page" to indicate the current page in navigation. The link appears bold without underline.
<nav>
<a href="/">Home</a>
<a href="/about" aria-current="page">About</a>
<a href="/contact">Contact</a>
</nav>A hidden link that becomes visible on focus, allowing keyboard users to skip to main content.
<a href="#main-content">Skip to main content</a>
<main id="main-content">Main content here...</main><abbr> - Represents an abbreviation or acronym with an optional title for the full description.Dotted underline indicates hover for full text.
The WWW changed everything.
<p>The <abbr title="World Wide Web">WWW</abbr> changed everything.</p><address> - Provides contact information for the nearest article or body ancestor.Italic contact information block.
<address>
Contact: <a href="mailto:info@example.com">info@example.com</a><br>
123 Main St, City
</address><article> - Represents a self-contained composition intended for independent distribution or reuse.Self-contained content block with implicit padding.
Article content goes here...
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article><aside> - Represents content tangentially related to the main content, often used for sidebars.Sidebar or supplementary content with subtle styling.
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
</ul>
</aside><audio> - Embeds sound content with controls for playback.Full-width audio player with native controls.
<audio controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4
" type="audio/mpeg">
Your browser does not support audio.
</audio><b> - Represents text stylistically offset from normal text without conveying extra importance.Bold text for stylistic offset.
The quick brown fox jumps.
<p>The <b>quick</b> brown fox jumps.</p><blockquote> - Indicates an extended quotation from another source.Indented with a left border to distinguish quoted content.
The only way to do great work is to love what you do.
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote><body> - Represents the content of an HTML document.Clean, readable defaults with system fonts, comfortable line height, and responsive max-width for optimal reading.
The body element provides the foundation for all content. It uses system fonts for fast loading and familiar appearance.
<p>The body element provides the foundation for all content. It uses system fonts for fast loading and familiar appearance.</p><br> - Produces a line break in text.Forces a line break within text.
Line one
Line two
<p>Line one<br>Line two</p><canvas> - Container for graphics drawn via scripting (usually JavaScript).Drawing surface with responsive sizing.
<canvas width="300" height="150">
Your browser does not support canvas.
</canvas><caption> - Specifies the title of a table.Descriptive title displayed above the table.
| Month | Sales |
|---|---|
| Jan | $1,000 |
<table>
<caption>Monthly Sales Data</caption>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>$1,000</td></tr>
</table><cite> - Represents the title of a creative work being referenced.Italic text for referencing creative works.
My favorite book is The Great Gatsby.
<p>My favorite book is <cite>The Great Gatsby</cite>.</p><code> - Displays a fragment of computer code.Inline code with subtle background for visibility.
Use the console.log() function to debug.
<p>Use the <code>console.log()</code> function to debug.</p>Wrap code in pre for multi-line code blocks.
function greet(name) {
return "Hello, " + name;
}<pre><code>function greet(name) {
return "Hello, " + name;
}</code></pre><data> - Links content with a machine-readable translation.Machine-readable value with human display.
Price: $49.99
<p>Price: <data value="49.99">$49.99</data></p><dd> - Provides the description or value for a term in a description list.Indented description for a term.
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl><del> - Represents text that has been deleted from a document.Strikethrough styling to indicate removed content.
Price: $50 $30
<p>Price: <del>$50</del> $30</p><details> - Creates a disclosure widget from which the user can obtain additional information.Expandable content with toggle control.
Hidden content revealed when expanded.
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed when expanded.</p>
</details><dialog> - Represents a dialog box or other interactive component.A modal dialog box for user interaction.
<button onclick="document.querySelector('dialog').showModal()">Open Dialog</button>
<dialog>
<p>This is a dialog box.</p>
<button onclick="this.closest('dialog').close()">Close</button>
</dialog><dfn> - Indicates the defining instance of a term.Italic styling for terms being defined.
A pixel is the smallest unit of a digital image.
<p>A <dfn>pixel</dfn> is the smallest unit of a digital image.</p><div> - A generic container for flow content with no semantic meaning.Generic block-level container.
Content inside a div.
<div>
<p>Content inside a div.</p>
</div><dl> - Represents a description list of term-description pairs.A list of terms and their descriptions, perfect for glossaries or metadata.
<dl>
<dt>Term</dt>
<dd>The definition or description of the term.</dd>
<dt>Another Term</dt>
<dd>Another definition.</dd>
</dl><dt> - Specifies a term in a description list.Bold term in a definition list.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl><em> - Marks text with stress emphasis.Italic text for stress emphasis.
I really mean it.
<p>I <em>really</em> mean it.</p><embed> - Embeds external content from an external application or plugin.<fieldset> - Groups related elements within a form.Bordered container for grouping related form fields.
<fieldset>
<legend>Personal Info</legend>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
</fieldset><figcaption> - Represents a caption or legend for a figure.Smaller, muted text for describing figure content.
<figcaption>Photo by Jane Doe, 2024</figcaption><figure> - Represents self-contained content with an optional caption.Image container with descriptive caption below.
<figure>
<img src="https://picsum.photos/400/200" alt="Sample">
<figcaption>A descriptive caption for the image.</figcaption>
</figure><form> - Represents a section containing interactive controls for submitting information.A simple form with inputs and a submit button.
<form>
<label>Name</label>
<input type="text" placeholder="Your name">
<label>Email</label>
<input type="email" placeholder="you@example.com">
<button type="submit">Submit</button>
</form><h1> - Represents the highest level section heading.The main heading of the page. Bold and large for clear hierarchy.
<h1>Main Page Title</h1><h2> - Represents a second-level section heading.Major section heading at 2rem size.
<h2>Section Heading</h2><h3> - Represents a third-level section heading.Subsection heading at 1.5rem size.
<h3>Subsection Heading</h3><h4> - Represents a fourth-level section heading.Minor heading at 1.25rem size.
<h4>Minor Heading</h4><h5> - Represents a fifth-level section heading.Small heading at 1rem size.
<h5>Small Heading</h5><h6> - Represents the lowest level section heading.Smallest heading at 0.875rem size.
<h6>Smallest Heading</h6><header> - Represents introductory content or navigational aids for a section or page.Introductory content container.
<header>
<h1>Site Title</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header><hgroup> - Groups a heading with related content such as subheadings.Groups heading with subtitle, reduced spacing between.
Subtitle or tagline
<hgroup>
<h1>Main Title</h1>
<p>Subtitle or tagline</p>
</hgroup><hr> - Represents a thematic break between paragraph-level elements.A subtle line to separate content sections.
Content above the break.
Content below the break.
<p>Content above the break.</p>
<hr>
<p>Content below the break.</p><i> - Represents text in an alternate voice or mood, such as technical terms or foreign phrases.Italic text for alternate voice or mood.
The word café is from French.
<p>The word <i>café</i> is from French.</p><iframe> - Embeds another HTML page within the current page.Embedded frame with no border.
<iframe src="https://example.com" title="Embedded page"></iframe><img> - Embeds an image into the document.Responsive image that scales to its container.
<img src="https://picsum.photos/400/200" alt="Sample image"><input> - Creates interactive form controls for accepting user data.Standard text input with clean borders and focus state.
<input type="text" placeholder="Enter text...">Checkbox input using system accent color.
<label><input type="checkbox"> Accept terms</label>Radio button for single selection from a group.
<label><input type="radio" name="option"> Option A</label>
<label><input type="radio" name="option"> Option B</label><ins> - Represents text that has been added to a document.Underlined to indicate newly added content.
We now offer free shipping on all orders.
<p>We now offer <ins>free shipping</ins> on all orders.</p><kbd> - Represents user keyboard input.Styled like a physical keyboard key with border and shadow.
Press Ctrl + S to save.
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p><label> - Represents a caption for an item in a user interface.Block-level label with subtle weight.
<label>Username</label>
<input type="text"><legend> - Represents a caption for a fieldset.Caption displayed on fieldset border.
<fieldset>
<legend>Account Info</legend>
<label>Email</label>
<input type="email">
</fieldset><li> - Represents an item in a list.Individual list items with comfortable spacing.
<ul>
<li>A single list item with proper vertical rhythm</li>
</ul><main> - Represents the dominant content of the body of a document.Primary content area of the document.
Main content goes here...
<main>
<h1>Page Title</h1>
<p>Main content goes here...</p>
</main><mark> - Represents text marked or highlighted for reference or notation.Yellow highlight for marking relevant content.
Search results: The quick brown fox jumps over the lazy dog.
<p>Search results: The <mark>quick brown fox</mark> jumps over the lazy dog.</p><object> - Represents an external resource such as an image, plugin, or nested browsing context.<ol> - Represents an ordered list of items.A numbered list for sequential content.
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol><output> - Container for the result of a calculation or user action.Displays calculation results inline.
Total:
<p>Total: <output>42</output></p><p> - Represents a paragraph of text.Standard paragraph with comfortable line height and spacing.
This is a paragraph of text. It has comfortable line height for readability and proper spacing between consecutive paragraphs.
This is a second paragraph demonstrating the vertical rhythm between paragraphs.
<p>This is a paragraph of text. It has comfortable line height for readability and proper spacing between consecutive paragraphs.</p>
<p>This is a second paragraph demonstrating the vertical rhythm between paragraphs.</p><picture> - Contains source elements and one img element for responsive images.Responsive image container for multiple sources.
<picture>
<source srcset="https://picsum.photos/seed/button/800/400" media="(min-width: 800px)">
<img src="https://picsum.photos/seed/button/400/200" alt="Responsive image">
</picture><pre> - Represents preformatted text preserving whitespace and line breaks.Preserves whitespace and uses monospace font with subtle background.
Line 1 Line 2 Indented line
<pre>Line 1
Line 2
Indented line</pre><progress> - Displays the completion progress of a task.Visual progress indicator using the primary color.
<progress value="70" max="100"></progress><q> - Represents a short inline quotation.Automatically wrapped with quotation marks.
She said, This is amazing!
<p>She said, <q>This is amazing!</q></p><s> - Represents text that is no longer accurate or relevant.Text with line through indicating outdated content.
Price: $50 $35
<p>Price: <s>$50</s> $35</p><samp> - Represents sample output from a computer program.Monospace font for computer output.
The error was: File not found
<p>The error was: <samp>File not found</samp></p><section> - Represents a standalone section of a document.Thematic grouping of content.
Section content...
<section>
<h2>Section Heading</h2>
<p>Section content...</p>
</section><select> - Represents a control providing a menu of options.Dropdown menu for selecting from predefined options.
<select>
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select><small> - Represents side comments or small print.Reduced font size for fine print or disclaimers.
Price: $99 (plus tax)
<p>Price: $99 <small>(plus tax)</small></p><span> - A generic inline container for phrasing content.Generic inline container.
This is inline content in a paragraph.
<p>This is <span>inline content</span> in a paragraph.</p><strong> - Indicates text with strong importance or urgency.Bold text for emphasis and importance.
This is very important information.
<p>This is <strong>very important</strong> information.</p><sub> - Represents subscript text.Text positioned below the baseline.
H2O is the chemical formula for water.
<p>H<sub>2</sub>O is the chemical formula for water.</p><summary> - Specifies a visible heading for a details element.Clickable heading that toggles the details content.
Additional information here.
<details>
<summary>Show more info</summary>
<p>Additional information here.</p>
</details><sup> - Represents superscript text.Text positioned above the baseline.
E = mc2 is Einstein's famous equation.
<p>E = mc<sup>2</sup> is Einstein's famous equation.</p><table> - Represents tabular data with rows and columns.A simple table with headers and data cells.
| Name | Age |
|---|---|
| Alice | 30 |
| Bob | 25 |
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
<tr><td>Bob</td><td>25</td></tr>
</tbody>
</table><tbody> - Groups the body content rows of a table.Container for table body rows.
| Name |
|---|
| Alice |
| Bob |
<table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>Alice</td></tr>
<tr><td>Bob</td></tr>
</tbody>
</table><td> - Represents a data cell in a table.Standard data cell with padding and border.
| Item | Price |
|---|---|
| Apple | $1.50 |
| Banana | $0.75 |
<table>
<tr><th>Item</th><th>Price</th></tr>
<tr><td>Apple</td><td>$1.50</td></tr>
<tr><td>Banana</td><td>$0.75</td></tr>
</table><textarea> - Represents a multi-line plain text editing control.Multi-line input with resizable height.
<textarea placeholder="Enter your message..."></textarea><tfoot> - Groups the footer content rows of a table.Container for table footer rows, often for totals.
| Item | Cost |
|---|---|
| Item 1 | $5 |
| Total | $5 |
<table>
<thead><tr><th>Item</th><th>Cost</th></tr></thead>
<tbody><tr><td>Item 1</td><td>$5</td></tr></tbody>
<tfoot><tr><td>Total</td><td>$5</td></tr></tfoot>
</table><th> - Represents a header cell in a table.Bold header cell with bottom border.
| Name | Age | City |
|---|---|---|
| Alice | 30 | NYC |
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Alice</td><td>30</td><td>NYC</td></tr>
</table><thead> - Groups the header content rows of a table.Container for table header rows.
| Product | Price |
|---|---|
| Widget | $10 |
<table>
<thead>
<tr><th>Product</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Widget</td><td>$10</td></tr>
</tbody>
</table><time> - Represents a specific period in time or a machine-readable datetime.Machine-readable date/time with human display.
Published on
<p>Published on <time datetime="2024-01-15">January 15, 2024</time></p><tr> - Represents a row of cells in a table.Horizontal row containing table cells.
| Col 1 | Col 2 |
|---|---|
| A1 | A2 |
| B1 | B2 |
<table>
<tr><th>Col 1</th><th>Col 2</th></tr>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
</table><u> - Represents text with an unarticulated annotation, such as misspelled words.Wavy underline for annotated text like spelling errors.
Check the speling of this word.
<p>Check the <u>speling</u> of this word.</p><ul> - Represents an unordered list of items.A bullet list with proper spacing and indentation.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Lists can be nested for hierarchical content.
<ul>
<li>Parent item
<ul>
<li>Child item</li>
<li>Another child</li>
</ul>
</li>
<li>Another parent</li>
</ul><var> - Represents the name of a variable in a mathematical or programming context.Italic monospace for variable names.
Let x equal the number of items.
<p>Let <var>x</var> equal the number of items.</p><video> - Embeds video content with playback controls.Responsive video with native controls.
<video controls>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
" type="video/mp4">
Your browser does not support video.
</video>The following components are built using semantic HTML and styled by Before:
A simple accordion using native details/summary elements with exclusive behavior via the name attribute.
An accordion is a vertically stacked set of interactive headings that each reveal a section of content.
Use accordions when you have multiple sections of content that users may want to browse through without leaving the page.
Yes, when built with native details/summary elements, accordions are keyboard navigable and screen reader friendly.
<div role="region" aria-label="FAQ">
<details name="accordion-basic">
<summary>What is an accordion?</summary>
<p>An accordion is a vertically stacked set of interactive headings that each reveal a section of content.</p>
</details>
<details name="accordion-basic">
<summary>When should I use an accordion?</summary>
<p>Use accordions when you have multiple sections of content that users may want to browse through without leaving the page.</p>
</details>
<details name="accordion-basic">
<summary>Are accordions accessible?</summary>
<p>Yes, when built with native details/summary elements, accordions are keyboard navigable and screen reader friendly.</p>
</details>
</div>An accordion where one panel starts expanded using the open attribute.
<nav aria-label="Product categories">
<details name="accordion-open" open>
<summary>Electronics</summary>
<ul>
<li>Phones</li>
<li>Laptops</li>
<li>Tablets</li>
</ul>
</details>
<details name="accordion-open">
<summary>Clothing</summary>
<ul>
<li>Shirts</li>
<li>Pants</li>
<li>Shoes</li>
</ul>
</details>
<details name="accordion-open">
<summary>Home & Garden</summary>
<ul>
<li>Furniture</li>
<li>Decor</li>
<li>Plants</li>
</ul>
</details>
</nav>Accordions can be nested to create hierarchical content structures.
Run npm install to get started with the project.
Edit the config file to customize your setup.
Learn about available component APIs.
Explore utility functions and helpers.
<section aria-labelledby="docs-heading">
<h3 id="docs-heading">Documentation</h3>
<details name="accordion-nested">
<summary>Getting Started</summary>
<details>
<summary>Installation</summary>
<p>Run npm install to get started with the project.</p>
</details>
<details>
<summary>Configuration</summary>
<p>Edit the config file to customize your setup.</p>
</details>
</details>
<details name="accordion-nested">
<summary>API Reference</summary>
<details>
<summary>Components</summary>
<p>Learn about available component APIs.</p>
</details>
<details>
<summary>Utilities</summary>
<p>Explore utility functions and helpers.</p>
</details>
</details>
</section>A simple alert for displaying messages to users.
<div role="alert">
<strong>Notice:</strong> Your session will expire in 5 minutes.
</div>Alerts with different semantic tones using data-tone attribute.
<div role="alert" data-tone="success">
<strong>Success!</strong> Your changes have been saved.
</div>
<div role="alert" data-tone="warning">
<strong>Warning:</strong> This action cannot be undone.
</div>
<div role="alert" data-tone="error">
<strong>Error:</strong> Failed to save changes.
</div>
<div role="alert" data-tone="info">
<strong>Info:</strong> New features are available.
</div>A simple image carousel with navigation buttons.
<section aria-roledescription="carousel" aria-label="Featured images">
<div aria-live="polite">
<article aria-roledescription="slide" aria-label="Slide 1 of 3">
<img src="https://picsum.photos/400/200?random=1" alt="Sample image 1" style="width: 100%;">
</article>
<article aria-roledescription="slide" aria-label="Slide 2 of 3">
<img src="https://picsum.photos/400/200?random=2" alt="Sample image 2" style="width: 100%;">
</article>
<article aria-roledescription="slide" aria-label="Slide 3 of 3">
<img src="https://picsum.photos/400/200?random=3" alt="Sample image 3" style="width: 100%;">
</article>
</div>
</section>Checkboxes in various states.
<div style="display: flex; flex-direction: column; gap: 0.5em;">
<label><input type="checkbox"> Unchecked</label>
<label><input type="checkbox" checked> Checked</label>
<label><input type="checkbox" disabled> Disabled</label>
<label><input type="checkbox" checked disabled> Checked & Disabled</label>
</div>A text input with an associated listbox.
<div role="combobox" aria-expanded="true" aria-haspopup="listbox">
<input type="text" placeholder="Select a fruit..." aria-autocomplete="list">
<ul role="listbox">
<li role="option">Apple</li>
<li role="option" aria-selected="true">Banana</li>
<li role="option">Cherry</li>
<li role="option">Date</li>
</ul>
</div>A modal dialog with header and footer.
<dialog>
<header>
<h3>Confirm Action</h3>
</header>
<p>Are you sure you want to proceed with this action?</p>
<footer>
<button data-variant="secondary">Cancel</button>
<button>Confirm</button>
</footer>
</dialog>A collapsible section using the native details/summary elements.
This content is hidden by default and revealed when the summary is clicked.
You can include any content here.
<details>
<summary>Click to reveal more information</summary>
<p>This content is hidden by default and revealed when the summary is clicked.</p>
<p>You can include any content here.</p>
</details>A disclosure that starts in the open state.
This content is visible by default because the open attribute is present.
<details open>
<summary>Already expanded</summary>
<p>This content is visible by default because the open attribute is present.</p>
</details>A feed of articles with proper ARIA attributes.
Content of the first article...
Content of the second article...
Content of the third article...
<section role="feed" aria-label="News feed">
<article aria-posinset="1" aria-setsize="3" tabindex="0">
<h4>First Article</h4>
<p>Content of the first article...</p>
</article>
<article aria-posinset="2" aria-setsize="3" tabindex="0">
<h4>Second Article</h4>
<p>Content of the second article...</p>
</article>
<article aria-posinset="3" aria-setsize="3" tabindex="0">
<h4>Third Article</h4>
<p>Content of the third article...</p>
</article>
</section>An interactive grid with keyboard navigation support.
<div role="grid" aria-label="Sample data" style="grid-template-columns: repeat(3, 1fr);">
<div role="row">
<div role="columnheader">Name</div>
<div role="columnheader">Email</div>
<div role="columnheader">Role</div>
</div>
<div role="row">
<div role="gridcell" tabindex="0">Alice</div>
<div role="gridcell">alice@example.com</div>
<div role="gridcell">Admin</div>
</div>
<div role="row">
<div role="gridcell" tabindex="-1">Bob</div>
<div role="gridcell">bob@example.com</div>
<div role="gridcell">User</div>
</div>
</div>A header element at the top of a page.
A brief description of the page content.
<header>
<h1>Page Title</h1>
<p>A brief description of the page content.</p>
</header>Semantic landmark elements for page structure.
<div style="border: 1px dashed var(--surface_muted); padding: 1em;">
<header style="padding: 0.5em; background: var(--surface_raised);">
<header> - Page header
</header>
<nav style="padding: 0.5em; background: var(--surface_overlay); margin-block: 0.5em;">
<nav> - Navigation
</nav>
<main style="padding: 0.5em; background: var(--surface_raised);">
<main> - Main content
<aside style="margin: 0.5em 0;">
<aside> - Sidebar
</aside>
</main>
<footer style="padding: 0.5em; background: var(--surface_overlay);">
<footer> - Page footer
</footer>
</div>Different link states and types.
<div style="display: flex; flex-direction: column; gap: 0.5em;">
<a href="#">Standard Link</a>
<a href="#" aria-current="page">Current Page</a>
<a href="#" aria-disabled="true">Disabled Link</a>
<a href="#" target="_blank">External Link</a>
<a href="#" download>Download Link</a>
</div>A listbox for selecting a single option.
<ul role="listbox" aria-label="Select a color">
<li role="option" aria-selected="false" tabindex="0">Red</li>
<li role="option" aria-selected="true" tabindex="-1">Green</li>
<li role="option" aria-selected="false" tabindex="-1">Blue</li>
<li role="option" aria-disabled="true" tabindex="-1">Yellow (unavailable)</li>
</ul>Meters showing different value ranges.
<div style="display: flex; flex-direction: column; gap: 1em;">
<label>Storage (optimal): <meter value="0.3" min="0" max="1" low="0.25" high="0.75" optimum="0.1"></meter></label>
<label>Memory (suboptimal): <meter value="0.7" min="0" max="1" low="0.25" high="0.75" optimum="0.1"></meter></label>
<label>CPU (critical): <meter value="0.95" min="0" max="1" low="0.25" high="0.75" optimum="0.1"></meter></label>
</div>A group of radio buttons for single selection.
<fieldset role="radiogroup" aria-label="Favorite color">
<legend>Choose a color:</legend>
<label><input type="radio" name="color" value="red"> Red</label>
<label><input type="radio" name="color" value="green" checked> Green</label>
<label><input type="radio" name="color" value="blue"> Blue</label>
<label><input type="radio" name="color" value="yellow" disabled> Yellow (unavailable)</label>
</fieldset>A slider for selecting a value within a range.
<div style="display: flex; flex-direction: column; gap: 1em;">
<label>Volume: <input type="range" min="0" max="100" value="50"></label>
<label>Brightness: <input type="range" min="0" max="100" value="75"></label>
<label>Disabled: <input type="range" min="0" max="100" value="25" disabled></label>
</div>Toggle switches for on/off states.
<div style="display: flex; flex-direction: column; gap: 1em;">
<label style="display: flex; align-items: center; gap: 0.75em;">
<span role="switch" aria-checked="false" tabindex="0"></span>
Off
</label>
<label style="display: flex; align-items: center; gap: 0.75em;">
<span role="switch" aria-checked="true" tabindex="0"></span>
On
</label>
<label style="display: flex; align-items: center; gap: 0.75em;">
<span role="switch" aria-checked="false" aria-disabled="true" tabindex="-1"></span>
Disabled
</label>
</div>A data table with headers and rows.
| Name | Role | |
|---|---|---|
| Alice Johnson | alice@example.com | Admin |
| Bob Smith | bob@example.com | User |
| Carol White | carol@example.com | Moderator |
<table>
<caption>User Data</caption>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>alice@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>bob@example.com</td>
<td>User</td>
</tr>
<tr>
<td>Carol White</td>
<td>carol@example.com</td>
<td>Moderator</td>
</tr>
</tbody>
</table>Standard horizontal tabs with radio inputs for CSS-only state management.
Configure your general application settings here.
Update your profile information and preferences.
Manage your password and security options.
<div>
<ul role="tablist" aria-label="Settings tabs">
<li><input type="radio" name="tabs-demo" id="tab1" checked /><label for="tab1" id="tab1-label">General</label></li>
<li><input type="radio" name="tabs-demo" id="tab2" /><label for="tab2" id="tab2-label">Profile</label></li>
<li><input type="radio" name="tabs-demo" id="tab3" /><label for="tab3" id="tab3-label">Security</label></li>
</ul>
<div role="group" aria-label="Tab panels">
<div role="tabpanel" aria-labelledby="tab1-label">
<h4>General Settings</h4>
<p>Configure your general application settings here.</p>
</div>
<div role="tabpanel" aria-labelledby="tab2-label">
<h4>Profile Settings</h4>
<p>Update your profile information and preferences.</p>
</div>
<div role="tabpanel" aria-labelledby="tab3-label">
<h4>Security Settings</h4>
<p>Manage your password and security options.</p>
</div>
</div>
</div>Vertical tab orientation for sidebar-style navigation. Use aria-orientation='vertical'.
Welcome to your dashboard overview.
View your analytics and metrics here.
Generate and download reports.
<div style="display: flex;">
<ul role="tablist" aria-label="Navigation tabs" aria-orientation="vertical">
<li><input type="radio" name="vtabs-demo" id="vtab1" checked /><label for="vtab1" id="vtab1-label">Dashboard</label></li>
<li><input type="radio" name="vtabs-demo" id="vtab2" /><label for="vtab2" id="vtab2-label">Analytics</label></li>
<li><input type="radio" name="vtabs-demo" id="vtab3" /><label for="vtab3" id="vtab3-label">Reports</label></li>
</ul>
<div role="group" aria-label="Tab panels">
<div role="tabpanel" aria-labelledby="vtab1-label">
<h4>Dashboard</h4>
<p>Welcome to your dashboard overview.</p>
</div>
<div role="tabpanel" aria-labelledby="vtab2-label">
<h4>Analytics</h4>
<p>View your analytics and metrics here.</p>
</div>
<div role="tabpanel" aria-labelledby="vtab3-label">
<h4>Reports</h4>
<p>Generate and download reports.</p>
</div>
</div>
</div>Tabs can be disabled using the disabled attribute on the radio input.
This tab is active and selectable.
This content is not accessible.
This tab is also available for selection.
<div>
<ul role="tablist" aria-label="Feature tabs">
<li><input type="radio" name="dtabs-demo" id="dtab1" checked /><label for="dtab1" id="dtab1-label">Active</label></li>
<li><input type="radio" name="dtabs-demo" id="dtab2" disabled /><label for="dtab2" id="dtab2-label">Disabled</label></li>
<li><input type="radio" name="dtabs-demo" id="dtab3" /><label for="dtab3" id="dtab3-label">Available</label></li>
</ul>
<div role="group" aria-label="Tab panels">
<div role="tabpanel" aria-labelledby="dtab1-label">
<p>This tab is active and selectable.</p>
</div>
<div role="tabpanel" aria-labelledby="dtab2-label">
<p>This content is not accessible.</p>
</div>
<div role="tabpanel" aria-labelledby="dtab3-label">
<p>This tab is also available for selection.</p>
</div>
</div>
</div>A horizontal toolbar with grouped controls.
<div role="toolbar" aria-label="Text formatting">
<div role="group" aria-label="Text style">
<button data-variant="ghost">B</button>
<button data-variant="ghost">I</button>
<button data-variant="ghost">U</button>
</div>
<span role="separator"></span>
<div role="group" aria-label="Alignment">
<button data-variant="ghost">Left</button>
<button data-variant="ghost">Center</button>
<button data-variant="ghost">Right</button>
</div>
<span role="separator"></span>
<button data-variant="ghost">Link</button>
</div>A vertical toolbar using aria-orientation.
<div role="toolbar" aria-label="Tools" aria-orientation="vertical">
<button data-variant="ghost">Select</button>
<button data-variant="ghost">Move</button>
<span role="separator"></span>
<button data-variant="ghost">Draw</button>
<button data-variant="ghost">Erase</button>
</div>CSS-only tooltips using data-tooltip attribute.
<div style="display: flex; gap: 2em; padding: 2em;">
<button data-tooltip="Save your changes">Save</button>
<button data-tooltip="Delete this item" data-tooltip-position="bottom">Delete</button>
<button data-tooltip="Edit content" data-tooltip-position="right">Edit</button>
</div>Tooltip with proper ARIA role for accessibility.
<div style="position: relative; display: inline-block;">
<button aria-describedby="tooltip1">Hover for info</button>
<span role="tooltip" id="tooltip1" style="top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5em;">
Additional information about this button
</span>
</div>A hierarchical data grid with expandable rows.
<div role="treegrid" aria-label="File browser">
<div role="row">
<span role="columnheader">Name</span>
<span role="columnheader">Size</span>
<span role="columnheader">Modified</span>
</div>
<div role="row" aria-level="1" aria-expanded="true" tabindex="0">
<span role="gridcell">Documents</span>
<span role="gridcell">—</span>
<span role="gridcell">Today</span>
</div>
<div role="row" aria-level="2" tabindex="-1">
<span role="gridcell">Report.pdf</span>
<span role="gridcell">2.4 MB</span>
<span role="gridcell">Yesterday</span>
</div>
<div role="row" aria-level="2" tabindex="-1">
<span role="gridcell">Notes.txt</span>
<span role="gridcell">12 KB</span>
<span role="gridcell">Last week</span>
</div>
</div>A hierarchical tree with expandable nodes.
<ul role="tree" aria-label="File system">
<li role="treeitem" aria-expanded="true" tabindex="0">
Documents
<ul role="group">
<li role="treeitem" aria-expanded="false" tabindex="-1">
Work
<ul role="group">
<li role="treeitem" tabindex="-1">Report.docx</li>
<li role="treeitem" tabindex="-1">Presentation.pptx</li>
</ul>
</li>
<li role="treeitem" tabindex="-1">Personal</li>
</ul>
</li>
<li role="treeitem" aria-expanded="false" tabindex="-1">
Pictures
<ul role="group">
<li role="treeitem" tabindex="-1">Vacation</li>
<li role="treeitem" tabindex="-1">Family</li>
</ul>
</li>
<li role="treeitem" aria-selected="true" tabindex="-1">Downloads</li>
</ul>A vertical divider between two horizontal panes.
<div style="display: flex; height: 150px; border: 1px solid var(--surface_muted); border-radius: 0.5em; overflow: hidden;">
<div style="flex: 1; padding: 1em; background: var(--surface_raised);">Left Pane</div>
<div role="separator" aria-orientation="vertical" aria-valuenow="50" tabindex="0"></div>
<div style="flex: 1; padding: 1em;">Right Pane</div>
</div>A horizontal divider between two vertical panes.
<div style="display: flex; flex-direction: column; height: 200px; border: 1px solid var(--surface_muted); border-radius: 0.5em; overflow: hidden;">
<div style="flex: 1; padding: 1em; background: var(--surface_raised);">Top Pane</div>
<div role="separator" aria-orientation="horizontal" aria-valuenow="50" tabindex="0"></div>
<div style="flex: 1; padding: 1em;">Bottom Pane</div>
</div>