A dashboard

A dashboard is the screen a product opens on, and it answers one question before anything else: how are we doing. So the headline numbers come first, as a row of KPI tiles, and the panels come under them as cards, each with its chart in the slot and its own controls in the header. The MAFO Dashboard is built this way.

Beta · Pattern · kpi-tile.css · card.css · badge.css · select.css and 3 more · in use on MAFO’s Dashboard

KPI tile · Card · Badge / Chip · Select · Button · Spinner · Table

A dashboard — the KPI row, then two cards

Composed from the markup blocks at the top of kpi-tile.css, card.css, table.css and icon-list.css, at a 1200 px page — scroll the frame sideways. A product card holds its chart in the slot; this site draws no chart, so the first slot holds a table. Every number is a placeholder.

$ 8.97 M+12 %

Revenue, last 30 days

DE

Top GEO by revenue

46+3

GEOs with traffic

72 %−4 pts

OKR progress

Revenue by GEO

1–30 Aug 2026

Last 30 days

GEO	Revenue	Share
Germany	$ 2 104 380	23 %
United States	$ 1 811 902	20 %
Brazil	$ 977 640	11 %
India	$ 703 118	8 %

Top offers

Two offers carry a quarter of the month.

• Summer sale · 1042

  $ 1 240 500 · 14 % of the month

• Cashback app · 987

  $ 902 110 · 10 %

• Publisher onboarding

  18 new this week, 4 paused on fraud share

Open offers

What it is for

Use when a dashboard opens with its headline numbers; a case study or a deck states a result in one figure; a stat needs a period-over-period movement next to it. Do not use when the number needs a chart to mean anything (a Card with the chart in its slot); there are more than six of them (a Table); the tile would hold a paragraph (Card); it is a status, not a metric (Badge, Alert). A dashboard is read top-down: the row of numbers says whether to look further, the cards say where. A card that needs a number to mean anything keeps the number in its header; a number that needs a chart to mean anything is a card, not a tile.

The components it is made of

One row per part: its job here, and when the part itself is the one to use. Its own page holds the rest — the markup, the modifiers, the measured rows.

Component	Its job in the arrangement	Use it when
KPI tile	the headline numbers — a KPI row at the top, four tints so it reads as four	a dashboard opens with its headline numbers; a case study or a deck states a result in one figure; a stat needs a period-over-period movement next to it
Card	each panel: a header with the title and the period, the controls as the card’s action, the chart in the slot	content needs its own edges — a feature on a slide, a dashboard panel, a stat, a form, a post preview
Badge / Chip	the delta on a tile — the only thing that says good or bad	a status word on a KPI tile or a table row, a category tag on a card, a small count
Select	a card’s own control — the metric, the stat, the category — in its header	one option from a list too long to show as radios — about seven or more — or when space is tight
Button	a period control in a card header is the small secondary one with a calendar glyph	the one action a view exists for — submit, save, create
Spinner	beside a card’s title while that card’s data refreshes	a wait under a few seconds with no known layout — a button submitting, a panel refreshing
Table	a ranked list in a card’s slot — numbers right, words left, the neutral bar on a dashboard	rows of records with the same fields — publishers, campaigns, offers, users; a SWOT or a quarter plan on a slide

The rules that hold between them

• The numbers come first, and the tile is two blocks pushed apart. A dashboard’s table bar is the neutral one, a table divider is straight from end to end, and a KPI tile is two blocks pushed apart.
• A row of tiles is four tints, not one. The tint is a colour team, not a status: a row of four tiles carries blue, yellow, red and grey so it reads as four (the diversity rule), and the delta pill is the only thing that says good or bad.
• Not every result is positive. Never: a ring on a category tag, or a delta with none · a delta and a tag in the same corner · a glyph in a different ink from the label beside it · four green deltas in one row · the same tint on every tile · a delta with no sign · a tile as a button · a value in a body size · the Accent mode used to colour a row of tiles (they must differ within the row).
• How many across. Card grids: three across in the 896 content column beside the rail, four across a 1200 page at 32 gaps (KPI tile’s contract); the deck’s rows of cards match heights by being one auto-layout row.
• A card holds one panel: its title and period in the header, its controls as the action, the chart in the slot. Never: a card inside a card with the same fill · a border and a shadow together (Raised is the shadow alone) · a colour card whose ink was set by hand instead of the Accent mode · rounded 16 outside and rounded 16 inside · a footer of three buttons · a title in Regular · a card with nothing in the slot shipped as a design.
• The chart is the theme’s, under the shell’s accent. Every series fill binds chart/N, so the Accent mode recolours a chart — the shell sets the mode once; the palette, the two-slice donut rule and the narrow-band floor are on Data visualisation.
• A dashboard’s table has the neutral bar. A dashboard’s table bar is the neutral one.
• Where loading goes on a dashboard. A Spinner beside the card title while that card’s data refreshes; a container that has not loaded yet shows its Skeleton rows — never a spinner where a skeleton belongs. The whole trio is the states pattern.