Organisms
Standalone regions that lay out atoms and molecules.
Page title
The page title and one short explanation, with no separate metadata column.
Page title
The short explanation sits eight pixels below the title.
Example markup
Usage
Use it once at the top of a standalone page. Put actions and settings in the nearest section.
Accessibility
In the finished page, mark up the title as the only h1.
| Root | .page-head |
|---|---|
| Lede | .page-head__lede |
| Placeholders | TITLE, SUMMARY |
Section
A standalone part of a document with a heading, a lede and content at its natural height.
Section title
The lede states the question that the content below answers.
The content takes the height it needs and can break across printed pages.
Example markup
Variants
A dense section uses .section--tight. Use an accent section for one key conclusion only.
Structure
The heading level follows the structure of the finished document. Do not replace nested sections with visual cards.
| Root | .section |
|---|---|
| Header | .section-head |
| Modifiers | .section--tight, .section--accent |
Workspace header
The name of a persistent workspace, its current state and the actions for the whole workspace.
Tool name
The state applies to the whole workspace.
Example markup
Usage
Actions on the right change the whole workspace. Commands for a single panel stay in that panel's header.
Responsive behavior
On a narrow screen the actions move below the title and keep their order.
| Root | .workspace-head |
|---|---|
| Compact variant | .workspace-head--compact |
| Actions | .workspace-head__tools |
Metric strip
A short set of values that the reader takes in before a table or chart.
Example markup
Usage
Keep two to four comparable values. Put units in the label or the value.
Accessibility
Name the group with aria-label. Give the accent only to a value that needs action. The label names the problem in words, and color does not replace it.
| Columns | --metrics |
|---|---|
| Density | .scoreboard--compact |
| Accent | .metric--accent |
Workspace
Two related panels that scroll independently and share context.
Main panel
List or editor
Main workspace content.
Example markup
Usage
Both panels answer one working question. Put unrelated tasks on separate pages or tabs.
Keyboard
Give every scrollable region tabindex="0" and a visible focus.
| Root | .workbench |
|---|---|
| Panels | .workbench__primary, .workbench__aside |
| Scrolling | .scroll-region |
Filter bar
Filter controls sit right above the set they change.
Example markup
Usage
The filter bar never becomes a global header. The count on the right confirms the result of the current filter.
Accessibility
Name the related group. Announce count updates through a live region only when needed.
| Root | .filter-bar |
|---|---|
| Result | .filter-bar__count |
Data table
Compares records of one kind across a fixed set of columns.
| Field | Type | Size | Status |
|---|---|---|---|
| Title | Text | 14 | Done |
| Description | Text | 64 | Review |
| Version | Number | 4 | Draft |
Example markup
Usage
Each column answers one question. The .data-table__num class right-aligns numbers in any column, and the last column is right-aligned without it. Compact numeric tables stay scrollable, and the hidden edge of a wide table fades out. For text records, add .data-table--records and repeat the column header in each cell's data-label. On a narrow screen each row then becomes a labeled card. Add sorting, filters and pagination only when a specific task needs them.
Interaction
Give the table a caption and th headers. Static rows do not react to the pointer. A row that opens details gets data-interactive, keyboard focus and a persistent aria-selected state.
| Root | .data-table |
|---|---|
| Scrolling | .table-scroll |
| Interactive row | data-interactive, aria-selected |
| Numeric column | .data-table__num on the th and every td |
| Variants | .data-table--records, data-label, .data-table--sticky, .data-table__sort, .data-table__detail |
Timeline
Events where order and time matter more than comparing rows side by side.
- Check started
Static contracts are running.
- Needs review
A visual change turned up.
- Check finished
No differences left.
Example markup
Usage
Events run from earliest to latest or the other way round, but the order never changes within one timeline.
Accessibility
Pair the color mark with a title. Put the machine-readable time in the datetime attribute.
| Root | .timeline |
|---|---|
| Parts | __mark, __time, __title |
Dialog
A native modal window for a confirmation or a short, bounded input.
The main page content stays in the normal flow.
Example markup
When to use
Use it for an irreversible confirmation or a short action that needs a top layer. Open help and extra settings in the flow instead.
Keyboard
The native dialog traps focus and closes on Escape. The script returns focus to the button that opened it.
| Root | .dialog |
|---|---|
| Parts | .dialog__head, __body, __foot |
| Open | data-dialog-open="#id" |
| Close | data-dialog-close |
Description list
Describes one entity compactly, instead of a table with a single row.
Settings
- Format
- HTML
- Theme
- System
- Width
- 320 px and up
Example markup
Usage
Keep keys short and consistent. To compare several entities, use a table.
Semantics
Mark up pairs with native dl, dt and dd.
| Root | .kv-list |
|---|---|
| Rules | .kv-list--lined |
| Wrapper | .kv-block |
Chart
Picks a chart type for the data task and always includes a text summary.
Value comparison
The shared scale starts at zero
The first value leads. It is 24 units ahead of the second.
Example markup
Choosing a type
Bars compare categories, columns compare periods, and a line shows continuous change. Use a donut only for parts of a whole.
Accessibility
A title, exact values and a summary are required. Color does not replace a series label.
| Container | figure with an explicit figcaption |
|---|---|
| Summary | .chart-summary |
| Types | .bar-list, .column-chart, line or donut |