Components
Every preview uses the generated unbloat.css from this checkout. The dashed
border marks the preview area; it is a documentation layout rule.
| Component | Class or Element | Style |
|---|---|---|
| Typography | Headings, paragraphs, links, lists, and code | Monospace type and underlined links |
| Form Controls | Inputs, select, textarea, and buttons | Square borders and visible keyboard focus |
| Buttons | unbloat-button |
Bordered surface, hard shadow, and inverted hover |
| Tags | unbloat-tag |
Compact label or link with a hard shadow |
| Panels | unbloat-panel |
Bordered surface with a hard shadow |
| Callouts | unbloat-callout |
Bordered note with a thicker leading edge |
| Inverse Surfaces | unbloat-inverse |
White text on a black surface |
| Tabs | unbloat-tabs |
Wrapping controls with an inverted selected state |
| Tables and Details | table, details, and summary |
Bordered cells and native disclosure behavior |
Use native controls and descriptive labels. See Tabs for the behavior you need to add beyond the CSS.
The Design Tokens page lists the values used by these components and shows how to override them.