Components / Data display / Definitions table
D8 · Data display
Definitions table
How the example lists are built, one rule per row, with a coloured bullet.
<table>
<tr><td><span class="c-bullet bad" aria-hidden="true"></span>Blocked</td><td>A required field is empty, so the record cannot move.</td></tr>
</table>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A status name needs a one-sentence definition.
- The same words are used on chips and tables.
When not to use
- The text is a task list.
- Definitions change per record.
Usage
<table>
<tr><td><span class="c-bullet bad" aria-hidden="true"></span>Blocked</td><td>A required field is empty, so the record cannot move.</td></tr>
</table>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-bullet | ok, warn, bad, accent | — | Colour token for the status. The name is still text. |
| Rule | sentence | — | The definition. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the table. |
Accessibility
- The status name is text beside the bullet.
- The bullet is aria-hidden.
- The table has column headers.
Motion
- No motion.
Pattern origin
Pattern type: a definitions table with coloured bullets.