StatTile

One headline figure with a caption over it.

Overview

A single number a person should see first: a total, a date, a balance.

Figure

Do

Left over

R 4 250

after all bills

Debt-free

Mar 2029

import { CardGrid, StatTile } from "@hackcove/ui";

<CardGrid columns={2}>
  <StatTile label="Left over" value="R 4 250" hint="after all bills" />
  <StatTile label="Debt-free" value="Mar 2029" />
</CardGrid>
Pass the value already formatted, with its unit: R 4 250, Mar 2029, 12%.
Don't

Left over

4250.5

Savings

1250000

import { CardGrid, StatTile } from "@hackcove/ui";

<CardGrid columns={2}>
  <StatTile label="Left over" value={4250.5} />
  <StatTile label="Savings" value={1250000} />
</CardGrid>
A raw number has no unit or grouping, so the tile shows a figure nobody can read at a glance.

Tone

Do

Left over

+R 4 250

surplus

Total interest

−R 12 400

shortfall

import { CardGrid, StatTile } from "@hackcove/ui";

<CardGrid columns={2}>
  <StatTile label="Left over" value="+R 4 250" hint="surplus" tone="positive" accent />
  <StatTile label="Total interest" value="−R 12 400" hint="shortfall" tone="negative" accent />
</CardGrid>
tone colours the value, and a sign and a hint say what the colour means.
Don't

Left over

R 4 250

Total interest

R 12 400

import { CardGrid, StatTile } from "@hackcove/ui";

<CardGrid columns={2}>
  <StatTile label="Left over" value="R 4 250" tone="positive" accent />
  <StatTile label="Total interest" value="R 12 400" tone="negative" accent />
</CardGrid>
The same tones with no sign and no hint: red and green are the only difference, so the meaning is lost without colour.

Usage

  • Pass value already formatted, with its unit and grouping (R 4 250, Mar 2029); the tile does not format.
  • label names the figure; hint is one short line under it.
  • tone is neutral, positive or negative. A tone colours the value, so give it a sign or a hint that says the same; accent adds a bar in the same tone across the top.
  • Lay several tiles out in a CardGrid. A tile is not a button or a link.

Accessibility

  • A StatTile is plain text in a <div>: the caption, the value and the hint are read in that order.
  • The accent bar is decoration and hidden from assistive tech.
  • Colour alone never carries the tone; a sign or the hint says it.

API

StatTile

One headline figure: an uppercase caption over a large tabular-nums value, with an optional hint line beneath. tone colours the value; accent adds a bar across the top edge in the same tone. Pass the value already formatted.

accent
Type
boolean
Default
false
hint
Type
ReactNode
label required
Type
ReactNode
tone

Defaults to "neutral".

Type
"positive" | "neutral" | "negative"
Default
neutral
value required
Type
ReactNode