Components

The building blocks, grouped into six sections. Pick a section, then a page. Everything is standard HTML with a small set of classes; no custom tags and no IDs. Most components need no JavaScript; the table below marks the few that do.

Every component

Each component, the section it lives in, the standard HTML it is built on, and whether it is built yet. Classes lists what a component adds on top of that HTML; None means the elements alone are enough. JavaScript is None when HTML and CSS do the whole job, Optional when a script only adds to a component that already works without one, and Required when the component cannot work without a script. For components still to build, the Classes and JavaScript columns are the plan.

Component	Section	Present	Built on	Classes	JavaScript
Page	Structure	Yes	`body` `header` `nav` `main` `footer`	None	None
Section	Structure	Yes	`section` `h1`–`h6`	None	None
Layout	Structure	Yes	`div`	`.row` `.stretch` `.grid` `.cols-3` `.panel` `.flow` + inline style	None
Navigation	Structure	Yes	`nav` `ul` `details`	`.paging`	None
Tabset	Structure	Yes	`input type="radio"` `label`	`.tabset` `.vertical`	Optional, to read the selection
Divider	Structure	Yes	`hr`	`.divider`	None
Breadcrumb	Structure	Yes	`nav` `ol` `aria-current`	None	None
Menu	Structure	Yes	`menu` `button`	`.toolbar` `.secondary`	None
Scrollspy	Structure	No	`nav` `a` to `section` anchors	None	Required
Basics	Content	Yes	`p` `ul` `ol` `dl` `img` `blockquote` `pre` `figure`	None	None
Inline marks	Content	No	`kbd` `mark` `abbr` `sub` `sup` `del` `ins` `s` `q` `cite` `dfn` `var` `samp` `time` `data`	None	None
Media	Content	No	`picture` `video` `audio` `track` `iframe` `canvas`	None	None
Copy to clipboard	Content	No	`button` beside `pre`	`.copy`	Required
Card	Container	Yes	`article`	`.card` `.stretch-link` `.grid` `.cols-3`	None
Accordion	Container	Yes	`details` `summary` `name`	`.accordion`	None
Callout	Container	No	`aside`	`.callout` + `.info` `.success` `.warning` `.error`	None
Well	Container	No	`div`	`.well`	None
List group	Container	No	`ul` or `menu`	`.list`	None
Hero	Container	No	`header` or `section`	`.hero`	None
Ribbon	Container	No	`span` in a card	`.ribbon`	None
Media object	Container	No	`img` beside a `div`	`.media`	None
Carousel	Container	No	`ul` with CSS scroll snap	`.carousel`	Optional, for previous and next buttons
Drawer	Container	No	`dialog`	`.drawer`	Optional, to open it
Dialog	Container	No	`dialog` `form method="dialog"`	None	Optional, to open it
Popover	Container	No	`popover` `popovertarget`	None	None
Floating window	Container	No	`dialog`	`.window`	Required, to drag it
Table	Data	Yes	`table` `thead` `tbody`	None	None
Chip	Data	Yes	`span` `a` `button`	`.chip` `.accent` `.teal`	None
Statistic	Data	No	`dl` `data`	`.stat`	None
Badge	Data	No	`span`	`.badge`	None
Avatar	Data	No	`img`	`.avatar`	None
Timeline	Data	No	`ol` `time`	`.timeline`	None
Tree	Data	No	`ul` `details`	`.tree`	Optional, for arrow-key moves
Rating	Data	No	`fieldset` + radios, or `meter` to display	`.rating`	None
Calendar	Data	No	`table` `time`	`.calendar`	Optional, to build a month
Sparkline	Data	No	`svg`	`.sparkline`	None
Chart	Data	No	`table` or `svg`	`.chart`	Optional
Sortable table	Data	No	`table` + `button` in `th`, `aria-sort`	None	Required
Form	Form	Yes	`form` `label` `input` `select` `textarea` `fieldset`	None	None
Button	Form	Yes	`button` `a` `input type="submit"`	`.button` `.buttons` `.secondary` `.ghost` `.small` `.large`	None
Input types	Form	No	Every `input type`	None	None
Toggle switch	Form	No	`input type="checkbox" role="switch"`	None	None
Segmented control	Form	No	`fieldset` + radios	`.segmented`	None
Input group	Form	No	`label` `input` `button`	`.input-group`	None
Floating label	Form	No	`label` `input placeholder`	`.floating`	None
Validation	Form	No	`required` `pattern` `:user-invalid`	None	Optional, for custom messages
Combobox	Form	No	`input` + a `role="listbox"` list	`.combobox`	Required
Status	Feedback	Yes	`div role="status"` or `role="alert"`	`.status` `.success` `.error` `.info` `.warning`	None
Progress	Feedback	Yes	`progress`	None	None
Meter	Feedback	Yes	`meter`	None	None
Spinner	Feedback	Yes	`div role="status"`	`.spinner` `.large`	None
Skeleton	Feedback	Yes	`div`	`.skeleton` + inline style	None
Steps	Feedback	Yes	`ol`	`.steps`	None
Empty state	Feedback	Yes	`div` `p`	`.empty` `.icon`	None
Tooltip	Feedback	Yes	Any element + `data-tip`	`.tooltip`	None
Toast	Feedback	Yes	`div`	`.toasts` `.toast`	Required
3D	Unlisted	Yes	`div`	`.scene` `.view` `.stage` `.node` `.panel` `.face` `.rotate` `.translate` `.scale` `.flip` `.reflection` `.side` `.front` `.back` + inline style	None

Not yet on the list

Components the library should have that are not in the table above. Most come straight from HTML: elements and attributes the browser already understands, which need only CSS to look right. Together with the table above they cover what HTML can do on its own.

Component	Section	Built on	Classes	JavaScript
Skip link	Structure	`a href="#main"`, shown on `:focus-visible`	None	None
Table of contents	Structure	`nav` `ol` `a` to `section` anchors	None	None
Back to top	Structure	`a href="#top"`	None	None
Sticky header	Structure	`header` with `position: sticky`	`.sticky`	None
Resizable panes	Structure	`div` with CSS `resize`	`.split`	None
Scroll progress	Structure	CSS scroll-driven animation	`.scroll-progress`	Optional, where scroll timelines are missing
Heading group	Content	`hgroup`	None	None
Address	Content	`address`	None	None
Footnotes	Content	`sup` `a` + an `ol` of notes	`.footnotes`	None
Ruby annotation	Content	`ruby` `rt` `rp`	None	None
Bidirectional text	Content	`bdi` `dir`	None	None
Editable text	Content	`contenteditable`	None	Optional, to save the edit
Find-in-page reveal	Content	`hidden="until-found"`	None	None
Gallery and lightbox	Content	`figure` `img` + `popover`	`.gallery`	None
Disclosure	Container	A single `details` `summary`	None	None
Dropdown menu	Container	`button popovertarget` + `popover` `menu`	None	None
Confirm dialog	Container	`dialog` + `form method="dialog"`	None	Optional, to read the answer
Hover card	Container	`popover="hint"` `interestfor`	None	Optional, where `interestfor` is missing
Key-value list	Data	`dl` `dt` `dd` as a two-column grid	`.pairs`	None
Table parts	Data	`caption` `tfoot` `colgroup` `th scope`	None	None
Scrolling table	Data	`table` with a sticky `thead`	`.panel`	None
Select	Form	`select` `optgroup` `multiple` `size`	None	None
Checkbox and radio groups	Form	`fieldset` `legend` + inputs	None	Optional, for the indeterminate state
Range slider	Form	`input type="range"` + `datalist` ticks	None	None
Colour picker	Form	`input type="color"`	None	None
Date and time	Form	`date` `time` `datetime-local` `month` `week` inputs	None	None
File upload	Form	`input type="file"` `accept` `multiple`	None	Optional, for drag and drop
Search	Form	`search` + `input type="search"`	None	None
Number stepper	Form	`input type="number"`	None	None
Autocomplete	Form	`input list` + `datalist`	None	None
Auto-growing textarea	Form	`textarea` with `field-sizing: content`	None	Optional, where `field-sizing` is missing
Disabled and read-only	Form	`disabled` `readonly` `fieldset disabled`	None	None
Help text	Form	`small` in the `label`	None	None
Calculated result	Form	`output for`	None	Required
Password reveal	Form	`input type="password"`	None	Required
Character counter	Form	`maxlength` + `output`	None	Required
Busy button	Feedback	`button aria-busy="true"`	None	Required, to set it

Components

Structure

Content

Container

Data

Form

Feedback

Every component

Not yet on the list