Instruments and data display
Gauges, compass, map, rings, charts and status glyphs. Values come from native elements or one documented custom property; every look is a theme token.
Dial gauge .gauge-dial
A <meter> carries the value (its attributes drive the needle where typed attr() is supported); --value (0–1) drives it everywhere. Red zone from --gauge-redline.
Arc gauge .gauge-arc
Linear gauge .gauge-linear
A .meter with marks at --at: scale labels, a target, a warning line, and recorded min and max.
Compass .compass and heading strip .compass-strip
- N
- NE
- E
- SE
- S
- SW
- W
- NW
- N
- NE
- E
- SE
- S
- SW
- W
- NW
Map frame .map, pins .map-pin and legend .map-legend
Not a map engine: a frame for an image, SVG or iframe map. Pins sit at --x/--y and open a popover.
- Depot
- Gate
- Fault
12 vans, 3 charging.
Open until 22:00.
Hydraulic fault since 09:12.
A legend outside the frame, for small screens:
- Depot
- Gate
- Fault
Progress ring .progress-ring
Sparkline .sparkline
Inline in text: build times this week are trending down.
Donut .donut with --seg-1…6
- Direct 42%
- Search 28%
- Social 18%
- Email 12%
- Used 65%
- Reserved 20%
- Free 15%
Data table: Traffic sources, last 30 days
| Source | Share | Visits |
|---|---|---|
| Direct | 42% | 7,728 |
| Search | 28% | 5,152 |
| Social | 18% | 3,312 |
| 12% | 2,208 |
Chart legend .legend / .chart-legend
- Series 1
- Series 2
- Series 3
- Series 4
- Series 5
- Series 6
- Line swatch
- Line swatch
- Less
- More
Heatmap .heatmap
Commits per day, last 12 weeks (columns are weeks, Monday at the top).
Data table: Commits per day, 12 weeks
| Week | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| Week 1 | 5 | 7 | 5 | 5 | 3 | 0 | 4 |
| Week 2 | 7 | 9 | 6 | 7 | 6 | 0 | 4 |
| Week 3 | 7 | 7 | 0 | 0 | 3 | 0 | 2 |
| Week 4 | 5 | 7 | 4 | 6 | 7 | 0 | 6 |
| Week 5 | 7 | 9 | 4 | 3 | 4 | 1 | 3 |
| Week 6 | 6 | 4 | 3 | 4 | 9 | 0 | 2 |
| Week 7 | 7 | 1 | 6 | 9 | 0 | 0 | 1 |
| Week 8 | 3 | 7 | 5 | 1 | 8 | 3 | 4 |
| Week 9 | 10 | 7 | 6 | 2 | 7 | 0 | 0 |
| Week 10 | 2 | 3 | 4 | 9 | 0 | 0 | 2 |
| Week 11 | 10 | 7 | 0 | 0 | 7 | 0 | 0 |
| Week 12 | 8 | 9 | 6 | 6 | 7 | 6 | 3 |
Diverging (.is-diverging, --v from −1 to 1): monthly temperature anomaly, one row per year.
Data table: Temperature anomaly (°C) by month
| Year | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2024 | -0.6 | -0.3 | +0.1 | +0.4 | +0.2 | +0.7 | +0.9 | +0.5 | +0.0 | -0.2 | -0.5 | -0.8 |
| 2025 | -0.4 | +0.0 | +0.3 | +0.6 | +0.8 | +1.0 | +0.9 | +0.7 | +0.3 | +0.1 | -0.2 | -0.4 |
| 2026 | +0.1 | +0.2 | +0.5 | +0.7 | +1.0 | +0.9 | +1.0 | +0.8 | +0.6 | – | – | – |
Charts .chart: plain SVG with the class hooks
The .chart container sets color to the chart foreground; .chart-grid, .chart-axis, .chart-series[data-series], .chart-point and .chart-label take the theme's tokens.
- Web
- App
- API
Data table: Weekly active users by channel (thousands)
| Month | Web | App | API |
|---|---|---|---|
| Jan | 42 | 30 | 12 |
| Feb | 48 | 34 | 15 |
| Mar | 45 | 41 | 14 |
| Apr | 61 | 39 | 22 |
| May | 66 | 50 | 27 |
| Jun | 74 | 57 | 25 |
- 2025
- 2026
Data table: Revenue by quarter (millions)
| Quarter | 2025 | 2026 |
|---|---|---|
| Q1 | 18 | 22 |
| Q2 | 24 | 27 |
| Q3 | 21 | 29 |
| Q4 | 30 | 36 |
Timeline .timeline
- Order placed
Paid by card ending 4242.
- Packed
- Out for delivery
Driver is 6 stops away.
- Delivered
- Deploy started
- Canary latency high
p95 410ms, threshold 400ms.
- Rolled back
https://status.example.com/incidents/2026-10-02-canary-latency-regression
- Research
- Prototype
- Beta
- Launch
Property grid dl.props
- Name
- pump-station-04
- Status
- Running
- Flow
- 412.6 L/min
- Firmware
- 4.12.0+build.2291
- Checksum
- sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
- Tags
- north critical
- Created
- Owner
- Ava Thompson
- A much longer property name
- Value