Tables
Semantic table — no classes, no wrappers, styled by default
Every <table> is styled automatically. No class
required. Headers in accent monospace. Rows stripe on hover.
Basic table
| Name | Type | Default | Description |
|---|---|---|---|
data-text |
string |
— | Text utility — mono, dim,
accent, small |
data-layout |
string |
— | Layout pattern — prose, grid-2,
docs, etc. |
data-callout |
string |
— | Callout type — note, tip,
warning, error |
With caption
A <caption> titles the table for screen
readers.
| Pattern | Attribute | Active state |
|---|---|---|
| Top nav | (none) | aria-current="page" |
| Sub-nav | data-subnav |
aria-current="page" |
| Sidebar nav | data-nav="sidebar" |
aria-current="page" |
| TOC nav | data-nav="toc" |
aria-current="true" |
Wide table (overflow)
Wide tables scroll horizontally on narrow viewports. No wrapper needed.
| Token | Value (dark) | Value (light) | Usage | CSS variable | Notes |
|---|---|---|---|---|---|
--asw-bg |
#0d1117 |
#ffffff |
Page background | background-color: var(--asw-bg) |
Root surface |
--asw-text |
#e6edf3 |
#1f2328 |
Body text | color: var(--asw-text) |
High contrast |
--asw-accent |
#3fb950 |
#1a7f37 |
Interactive, active | color: var(--asw-accent) |
GitHub green |