Home/Blocks/Summary bar

Summary bar

A compact one-line row of metrics under a page header. Used when 8–10 small numbers belong above the fold but don't deserve full KPI cards.

Stable .summary-bar Inline · dense

Default

Pills separated by dot. Each item is a tiny label + value.

Open shifts
3 of 4
·
Cash on hand
$ 1,950
·
Receipts
147
·
Refunds
2 · $ 38
·
Low stock
12 SKUs
·
Avg basket
$ 19.16
·
Today’s receipts
147
Dense summary bar

Do & don't

Do

Keep it to a single row. No wrapping on desktop; on tablet, allow two rows.

Don't

Mix scales. Don’t have one item in millions and another in single digits.

Do

Make each pill clickable when it tap-throughs to a more detailed view.

Don't

Use this as a chart container. Use the KPI grid for that.