Custom elements
Three things HTML has no element for, written as unregistered custom elements. They're valid HTML, need no JavaScript, and render as a block in every browser. An element for a thing that stands alone, a class for a modifier.
ui-card
A card
Header holds a title and a subtitle.
The body is ordinary flow content. A card is a raised surface with no border or shadow, and nothing inside it draws one.
With actions
Cards can hold controls. Keep them to the footer.
A card is the raised surface, so it reads the same on the paper page, a sunken sidebar, or an empty state.
On a sunken surface
Same markup.
Raised stays raised.
On a sunken surface
Same markup.
Raised stays raised.
ui-toast
Fixed to the bottom-right corner in a real page. Shown inline here.
ui-empty
No invoices yet
Invoices you send will show up here. Create the first one to get started.
Background patterns
Quiet texture for sections and empty states. Use one pattern per surface; each follows the theme and preserves the background color.
Dots
A little texture, plenty of space.
.pattern-dots
Grid
Fine lines behind your content.
.pattern-grid
Diagonal
A faint rhythm across the surface.
.pattern-diagonal
Patterns repeat every 8px by default. Set --pattern-size for spacing, --pattern-stroke for dot radius or line thickness, and --color-pattern for the marks. Use background-color to change the surface without clearing its pattern.
<section class="pattern-dots">…</section>
<ui-empty class="pattern-grid" style="--pattern-size: var(--space-6)">…</ui-empty>Button variants
Badge
Draft Paid Pending Overdue
Inline in text: invoice Paid on Sep 24.
Tabs
Tabs are a nav element with the current link marked by aria-current.
Layout utilities
.container
Max width with centered margins. Add .narrow for reading-width or single-column forms.
.grid
Columns that wrap on their own. Set --min to change the minimum column width.
.stack
Vertical spacing. Set --gap to change it.
.cluster
Inline items that wrap. Add .between to push the ends apart.
.visually-hidden
Hidden from sight, read by screen readers. Like this.