Atlas

Description

A small, muted block of supporting text. No props — it exists so secondary copy is styled the same everywhere.

<x-atlas::description>

Description is a plain text wrapper. It takes no props: it renders an <atlas-description> element with one class, which sets the small size, the muted neutral color and a top margin. Its value is consistency — when every subtitle, caption and hint in the codebase goes through it, restyling secondary copy is one token change instead of a grep.

Prices include VAT. Shipping is calculated at checkout. 
<x-atlas::description>Prices include VAT. Shipping is calculated at checkout.</x-atlas::description>
Preview follows the site's light/dark mode. Open standalone →

Under a heading

The built-in top margin assumes a heading above it, so heading plus description needs no spacing wrapper of your own.

Returns

Send anything back within 30 days, unworn and with the tags still on. 
<x-atlas::heading :level="2" size="h3">Returns</x-atlas::heading>
<x-atlas::description>Send anything back within 30 days, unworn and with the tags still on.</x-atlas::description>
Preview follows the site's light/dark mode. Open standalone →

As help text

Nothing about the component connects it to a form control — that wiring is yours. Give it an id and reference it from the input's aria-describedby, otherwise the hint is invisible to anyone using a screen reader.

VAT number Include the country prefix, for example NL123456789B01. 
<x-atlas::label for="vat-number">VAT number</x-atlas::label>
<x-atlas::input id="vat-number" name="vat_number" aria-describedby="vat-number-hint" />
<x-atlas::description id="vat-number-hint">Include the country prefix, for example NL123456789B01.</x-atlas::description>
Preview follows the site's light/dark mode. Open standalone →

The element is a custom element, not a <p>. It is display-block by CSS, so if Atlas CSS fails to load it collapses to inline text — and putting block-level markup inside it is invalid nesting for a paragraph replacement it never was. Keep the slot to a sentence or two of text.

Heading

Headings that keep the document outline and the type scale independent, and throw rather than render something wrong.

List

Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.

Text link

An inline anchor with an animated underline and optional icons that slide outwards on hover.

Reference

<x-atlas::description>

Slots

  • Name
    default
    Type
    slot
    Description
    The supporting text. Any attribute you pass — id, class, data-* — is merged onto the element.