Molecules

Stable groups of atoms that do one local job.

Segmented control

Switches between two or three mutually exclusive modes in place.

View mode
Example markup

Usage

Keep labels short and of similar length. For four or more options, use a regular select.

Keyboard

A native radio group keeps arrow keys, focus and the announcement of the selected value.

Public contract
Root.segmented
Controlinput[type="radio"] inside label
Stateschecked, disabled

Disclosure

Keeps secondary content one click away without a modal.

More details

The content sits in the normal flow and needs no extra script.

Example markup

Usage

Use it for help text and extra settings. Never hide a critical warning in a closed block.

Keyboard

Native details and summary respond to Enter and Space without JavaScript.

Public contract
Root.disclosure
Content.disclosure__body
Stateopen

Field

Groups the label, control, hint and error into one vertical stack.

A short rule for filling it in.

Example markup

Error

On error, set aria-invalid="true" on the control and link the message with aria-describedby.

Hint

The hint explains the rule before the user types. An empty hint or error takes no space.

Public contract
Parts.field__label, .field__hint, .field__error
Statearia-invalid, aria-describedby

Radio group

One required choice from a short set of visible options.

Method
Example markup

Usage

All options are visible at once. For a long set, use a select.

Keyboard

A shared name ties the group together. fieldset and legend give it an accessible name.

Public contract
Group.check-group
Controlinput[type="radio"]

Tabs

Switch between several equal panels in one context.

First panel content.

Page sections · tabs--page

Deploys

All services, last 24 hours.

Summary across all services.

Example markup

Usage

Panels must be equal in rank. For sequential stages, use the Steps component.

Tabs that split the whole page into sections get .tabs--page and go right after .workspace-head. The strip runs edge to edge on the header fill with no line between them, and the first label lines up with the heading.

Keyboard

Arrow keys switch tabs, Home and End jump to the ends. Tab moves focus into the active panel.

Public contract
Root.tabs, data-tabs
Rolestablist, tab, tabpanel
Linksaria-controls, aria-labelledby
Variants.tabs--page right after .workspace-head

Pagination

Moves between pages of a large set and shows the current position.

Example markup

Usage

Keep filters and sorting when the page changes. A short set needs no pagination.

Accessibility

Give the navigation a name. The current link uses aria-current="page".

Public contract
Page.pagination__page
Position.pagination__status

Steps

Position in a short linear process: done, current and upcoming.

  1. 01Setup
  2. 02Review
  3. 03Done
Example markup

Usage

Keep three to five stable stages. Detailed subtasks do not become separate steps.

Accessibility

The current item gets aria-current="step". Color alone never carries the state.

Public contract
Root.steps
Statesdata-state="done|current|upcoming"

Code block

Local source code with a file label and a copy button.

Summary markup
<!-- Weekly summary -->
<section class="section" id="summary">
  <h2>Week in review</h2>
  <p data-count="12">12 tasks closed</p>
</section>
Summary styles
/* Gap from the scale, 1 px border */
.summary { gap: var(--space-4); border: 1px solid var(--line); }
Example markup

Usage

The label names the source. Do not use the monospace font for ordinary values and metadata.

Mechanics

The button points at the pre block with a selector in data-copy="#id". After copying, copy.js sets aria-pressed="true" and shows the second label in the same cell, so the button keeps its width.

code-highlight.js colors HTML, CSS, JavaScript, JSON and shell commands offline. Set the language with class="language-css" on code. Without it, the script guesses the language from the text.

Public contract
Root.code-block
Button.code-block__copy
Hookdata-copy="#id"
Statearia-pressed
Languageclass="language-html", language-css, language-js, language-json, language-shell
Scriptcopy.js, code-highlight.js

Notice

A message, warning or next step inside the current flow.

Example markup

Variants

OK, warning and error report a state. .notice--action replaces a separate accent callout.

Accessibility

Spell out the message type in words. An urgent error can get role="alert".

Public contract
Variants.notice--ok, .notice--warn, .notice--error, .notice--action
Parts__mark, __title, __actions

Progress

Shows a known share of completed work, or just that work is still going.

Checking68%
PreparingIn progress
Example markup

Usage

Repeat known progress as a number. The indeterminate mode never makes up a percentage.

Motion

The animation stops when reduced motion is on. The label still tells the state.

Public contract
Parts__head, __track, __fill
Value--value
Indeterminate.progress--indeterminate

Section navigation

Anchor list for a long document that marks the current section.

Example markup

Usage

Use it for a long document with stable anchors. A short page needs no separate navigation.

Mechanics

The script watches the sections, updates aria-current and writes the current link's coordinates to --nav-marker-*. The marker slides along the guide line. Links work without JavaScript too.

Public contract
List.section-nav__links
Row.section-nav--row
Hookdata-section-nav
Currentaria-current="true"

Empty state

Explains why there is no result and which action can create one.

No records yetChange the filters or add the first record.
Example markup

Usage

Tell an empty set apart from a loading error. Show the action only when the user can change the state.

Accessibility

Do not move focus automatically after the area updates. Announce content that appears asynchronously through a live region.

Public contract
Root.empty-state
Headingdirect child strong