Data & tables
Tables are for comparison, lookup, and scanning. In Sermona they stay quiet: muted cell text, tabular numerals for digits, and gold reserved for links — not for random cell highlights.
When to use what
| Pattern | Best for |
|---|---|
| Markdown table | Specs, token matrices, light comparison in docs (VitePress styles them via the theme). |
.sermona-table in .sermona-table-wrap | Wide or dense grids; horizontal scroll on small screens. |
.sermona-kv | A handful of key → value fields (release metadata, API params). |
.sermona-stat-row | Highlighted metrics (already in components). |
Avoid tables for narrative; use prose or icon-led lists instead.
Markdown tables
Regular GitHub-style tables pick up Sermona spacing and colors automatically in this site:
| Token | Value | Notes |
|---|---|---|
--sermona-space-3 | 22px | Vertical rhythm between blocks |
--sermona-radius-sm | 4px | Chips, inputs, media |
| Motion base | 250ms | Prefer on color / border |
HTML: scroll-safe table
Wrap wide tables and use sermona-table__num for numeric columns. Optional sermona-table--zebra for dense datasets.
| Week | Sessions | Docs views | Change |
|---|---|---|---|
| W14 | 12,400 | 3,210 | +4.2% |
| W15 | 13,080 | 3,512 | +5.5% |
| W16 | 12,910 | 3,698 | −1.3% |
Scroll horizontally on narrow viewports. Prefer a caption or aria-label on the wrapper for screen readers.
For a caption visible to all users, use <caption> inside the table (styled in sermona.components.css).
Key–value panel
Good for releases, builds, or entity summaries — not full spreadsheets.
- Build
- 2026-04-30T14:22Z
- Tokens package
- @sermona/tokens@0.1.0
- Contrast (body / bg)
- 12.6 : 1
- License
- Proprietary / Figma source
Inline metric pairs
Stack a label and value inside a cell or card:
Mean time to docs
48s
p50 over last 7 days
Copy & accessibility
- Header row — Short labels; avoid wrapping unless necessary.
- Row headers — Use
<th scope="row">when the first column identifies the record. - Units — Put units in the header (
Sessions (k)) or one column; don’t mix in-cell. - Alignment — Numbers right (
.sermona-table__num); text left. - Don’t encode meaning by color alone — Pair “+4%” with words if color is used.
See also
- Using Sermona — team handbook and vocabulary
- Tokens — spacing and radii used in table chrome
- Components — index of CSS classes
- Voice & copy — how to label metrics in prose
- Forms, buttons & CTAs — field labels, buttons, CTA copy