Components

The building blocks, grouped into eight 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

All 109 components by section, 25 of them built so far. Built on is the standard HTML each one uses. 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 do, the Classes and JavaScript columns are the plan.

Component	Status	Built on	Classes	JavaScript
Structure
Page	Built	`body` `header` `nav` `main` `footer`	None	None
Section	Built	`section` `h1`–`h6`	None	None
Layout	Built	`div`	`.row` `.stretch` `.grid` `.cols-3` `.panel` `.flow` + inline style	None
Sidebar layout	Built	`aside` beside the content	`.sidebar`	None
Sticky header	Built	`header`, or anything with `position: sticky`	`.sticky`	None
Resizable panes	Built	`div` with CSS `resize`	`.resizable`	Optional, for keyboard resizing
Divider	Built	`hr`	`.divider`	None
Scroll area	Built	`role="region"` + `aria-label` + `tabindex="0"`	None	None
3D	Built	`div`	`.scene` `.view` `.stage` `.node` `.panel` `.face` `.rotate` `.translate` `.scale` `.flip` `.reflection` `.side` `.front` `.back` + inline style	None
Navigation
Nav bar	Built	`nav` `ul` `details` `aria-current`	`.paging`	None
Breadcrumb	Built	`nav` `ol` `aria-current`	None	None
Pagination	Built	`nav` of links with `aria-current="page"` and `rel`	`.paging`	None
Tabset	Built	`input type="radio"` `label`	`.tabset` `.vertical`	Optional, to read the selection
Menu	Built	`menu` `button`	`.toolbar` `.secondary`	None
Skip link	Built	First `a` in the `body`, to `main id="main"`, shown on `:focus`	None	None
Table of contents	Built	`nav` opening with a heading, `ol` of `a` to `section` ids	None	None
Back to top	Built	`a href="#top"` after `main`, faded in by a scroll timeline	None	None
Heading anchors	Built	`a` to the section's id, holding the heading's text	None	None
Scrollspy	To do	`nav` `a` to `section` anchors	None	Required
Content
Prose	Built	`p` `ul` `ol` `dl` `img` `blockquote` `pre` `figure`	None	None
Inline text	To do	`mark` `abbr` `sub` `sup` `del` `ins` `s` `q` `cite` `dfn` `var` `samp` `time` `data`	None	None
Keyboard keys	To do	`kbd`, and `kbd kbd` for combinations	None	None
Heading group	To do	`hgroup` with a `p` before or after the heading	None	None
Address	To do	`address`	None	None
Code block	Built	`figure` `pre` `code` `samp` `figcaption`	`.html` `.css` `.js` + token spans	None
Copy to clipboard	To do	`button` beside `pre`	`.copy`	Required
Media	Built	`figure` with `img` `picture` `video` `audio` `track` `svg` `iframe`	None	None
Video embed	Built	`figure` with an `iframe`, or an `a` around a poster `img`	`.play`	Optional, to swap in the player
Gallery	To do	`figure` `img` + `popover`	`.gallery`	None
Footnotes	To do	`sup` `a` to an `ol` of notes	`.footnotes`	None
Margin notes	To do	`aside role="note"`	None	None
Ruby annotation	To do	`ruby` `rt` `rp`	None	None
Bidirectional text	To do	`bdi` `dir`	None	None
Text columns	To do	CSS `columns`	`.columns`	None
Link icons	To do	`a[href^="mailto:"]` and other link types	None	None
Editable text	To do	`contenteditable`	None	Optional, to save the edit
Find-in-page reveal	To do	`hidden="until-found"`	None	None
Container
Card	Built	`article`	`.card` `.stretch-link` `.grid` `.cols-3`	None
Titled card	To do	`fieldset` `legend`, or `section` `h2`	`.titled`	None
Accordion	Built	`details` `summary` `name`	`.accordion`	None
Disclosure	To do	A single `details` `summary`	None	None
Callout	To do	`aside`	`.callout` + `.info` `.success` `.warning` `.error`	None
Hero	To do	`header` or `section`	`.hero`	None
Well	To do	`div`	`.well`	None
Ribbon	To do	`span` in a card	`.ribbon`	None
List group	To do	`ul` or `menu`	`.list`	None
Media object	To do	`img` beside a `div`	`.media`	None
Carousel	To do	`ul` with CSS scroll snap	`.carousel`	Optional, for previous and next buttons
Window	To do	`section` or `dialog` with a title bar	`.window`	Optional, to drag it
Overlay
Dialog	To do	`dialog` + `button command="show-modal" commandfor`	None	None
Confirm dialog	To do	`dialog role="alertdialog"` + `form method="dialog"`	None	Optional, to read the answer
Drawer	To do	`dialog`	`.drawer`	None
Popover	To do	`popover` `popovertarget`	None	None
Dropdown menu	To do	`popover` `menu` `button`	None	Optional, for arrow keys
Context menu	To do	`popover` `menu` `button`	None	Required
Menubar	To do	`menu` `popover` `button`	`.menubar`	Required
Hover card	To do	`popover="hint"` `interestfor`	None	Optional, where `interestfor` is missing
Tooltip	Built	Any element + `data-tip`	`.tooltip`	None
Command palette	To do	`dialog` `input` + a list of commands	`.palette`	Required
Data
Table	Built	`table` `thead` `tbody`	None	None
Sortable table	To do	`table` + `button` in `th`, `aria-sort`	None	Required
Chip	Built	`span` `a` `button`	`.chip` `.accent` `.teal`	None
Badge	To do	`span`	`.badge`	None
Avatar	To do	`img` over initials	`.avatar`	None
Statistic	To do	`dl` `data`	`.stat`	None
Key-value list	To do	`dl` `dt` `dd`	`.pairs`	None
Timeline	To do	`ol` `time`	`.timeline`	None
Tree view	To do	`ul` `details`	`.tree`	Optional, for arrow keys
Rating	To do	`fieldset` of radios, or `meter` to display	`.rating`	None
Calendar	To do	`table` `time`	`.calendar`	Optional, to build a month
Chart	To do	`table` or `svg`	`.chart`	Optional
Sparkline	To do	`svg`	`.sparkline`	None
Chat messages	To do	`ol` of `article`	`.chat`	None
Indicator light	To do	`output` or `span`	`.indicator`	None
Form
Form layout	Built	`form` `label` `input` `select` `textarea` `fieldset`	None	None
Button	Built	`button` `a` `input type="submit"`	`.button` `.buttons` `.secondary` `.ghost` `.small` `.large`	None
Button group	To do	`role="group"` around buttons	None	None
Input group	To do	`role="group"` around `input` and `button`	None	None
Text input	To do	`input type="text"` `email` `url` `tel`	None	None
Search field	To do	`search` + `input type="search"`	None	None
Select	To do	`select` `optgroup` `option`	None	None
Checkbox and radio	To do	`input type="checkbox"` `type="radio"` in a `label`	None	Optional, for the indeterminate state
Switch	To do	`input type="checkbox" role="switch"`	None	None
Toggle button	To do	`button aria-pressed`	None	Required, to flip the state
Segmented control	To do	`fieldset` of radios	`.segmented`	None
Range slider	To do	`input type="range"` + `datalist` ticks	None	None
Color picker	To do	`input type="color"`	None	None
Date and time	To do	`input type="date"` `time` `datetime-local` `month` `week`	None	None
Number field	To do	`input type="number"`	None	None
File upload	To do	`input type="file"`	None	Optional, for drag and drop
One-time code	To do	`input autocomplete="one-time-code"`	None	None
Textarea	To do	`textarea` with `field-sizing: content`	None	None
Password	To do	`input type="password"`	None	Required, to show the password
Help text	To do	`small` linked by `aria-describedby`	None	None
Validation	To do	`required` `pattern` `:user-invalid` `aria-invalid`	None	Optional, for custom messages
Floating label	To do	`label` `input placeholder`	`.floating`	None
Output	To do	`output for`	None	Required
Combobox	To do	`input` + a `role="listbox"` list	`.combobox`	Required
Knob	To do	`role="spinbutton"`	`.knob`	Required
Feedback
Status	Built	`div role="status"` or `role="alert"`	`.status` `.success` `.error` `.info` `.warning`	None
Progress	Built	`progress`	None	None
Meter	Built	`meter`	None	None
Spinner	Built	`div role="status"`	`.spinner` `.large`	None
Busy state	To do	`aria-busy="true"` on any element	None	Optional, to set it
Skeleton	Built	`div`	`.skeleton` + inline style	None
Steps	Built	`ol`	`.steps`	None
Empty state	Built	`div` `p`	`.empty` `.icon`	None
Toast	Built	`div`	`.toasts` `.toast`	Required
Scroll progress	To do	CSS scroll-driven animation	`.scroll-progress`	Optional, where scroll timelines are missing