Stat Card

One fact or outcome — the UX audit’s proof bento and case-study stat blocks (authored in Sanity as a “Stat cards” block, 1–4 cards). Two appearances: an open column under one hairline, or a flat tonal card (case studies and the UX audit bento, with optional icon chip, size, count-up, a light wash/flow backdrop and a top-right action), where the figure leads and the label is a caption rather than an eyebrow. Styling lives in .card-stat in globals.css.

Card — proof bento (UX audit)

Google rating

Chris BauerNational Manager, Hychem Flooring

Product design experience

Products shipped

1–2 wksAudit turnaround

tsx

// Supporting tiles: light, on the FAQ cards' static aqua wash
<StatCard appearance="card" size="md" countUp backdrop="wash" icon={Briefcase} figure="8+ yrs" label="Product design experience" />

// Lead tile: the CTA banner's live aqua silk, an icon-only link out in the
// top-right slot, and children pinned to the card foot
<StatCard
  appearance="card" size="lg" countUp backdrop="flow"
  figure="5.0" label="Google rating"
  action={<Button href={siteConfig.links.googleReviews} target="_blank" rel="noopener noreferrer" variant="secondary" size="icon">…</Button>}
>
  <StarRating rating={5} size="md" showValue={false} />
  <blockquote>…</blockquote>
</StatCard>

Card — case studies

~4×Monthly signups

Growth in monthly new-customer signups over ten months.

~37%Marketing database

Growth in the marketing database over nine months.

~4 / customerRepeat use

Transactions per active customer each month.

tsx

<StatCard appearance="card" label="Monthly signups" figure="~4×" body="…" />

Open — facts

Partners4 reward partners

Qantas, Velocity, ALL Accor and Luxury Escapes — up to 6 points per $1

Payment methods4 ways to pay

Amex, Visa, Mastercard and pay-by-bank, across every business expense type

Plans3 subscription tiers

Free, Silver and Gold — the monthly fee buys down the processing rate

tsx

<StatCard
  label="Partners"
  figure="4 reward partners"
  body="Qantas, Velocity, ALL Accor and Luxury Escapes — up to 6 points per $1"
/>

Open — outcomes

Success metric~4×

Growth in monthly new-customer signups over ten months.

Database growth~37%

Growth in the marketing database over nine months

Repeat use~4 / customer

Transactions per active customer each month

tsx

<StatCard variant="result" label="Success metric" figure="~4×" body="…" />

Props

Prop	Type	Default	Description
`label`*	`string`	-	Small uppercase line above the figure, e.g. "Success metric".
`figure`*	`string`	-	The big line — a ratio, a count, a short phrase.
`body`	`string`	-	One or two sentences of context under the figure.
`variant`	`"default" \| "result"`	`"default"`	Blue for facts, green for outcomes. Colours the label in the open appearance, and tints the card fill in the card appearance.
`appearance`	`"open" \| "card"`	`"open"`	Open: a column under one hairline with the label as a coloured eyebrow. Card: a flat tonal card (case-study bodies, the UX audit proof bento) — the figure leads and the label drops to a plain caption beneath it.
`icon`	`LucideIcon`	-	Card only. A small chip in the card hue (.card-stat-icon), top-right, level with the figure.
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Card only. Figure size: sm = h3 (case studies), md = h2 (bento tiles), lg = h1 (a bento lead tile).
`countUp`	`boolean`	`false`	Card only. Counts the figure up when it scrolls into view — see Count Up. Opt-in, so case-study figures stay still.
`children`	`ReactNode`	-	Card only. Extra content pinned to the card foot, e.g. the lead tile’s review.
`backdrop`	`"wash" \| "flow"`	-	Card only. Puts the card on the light ladder (surface-paper surface-white) with the aqua material behind it: wash = the FAQ cards’ static wash (.card-stat-wash), flow = the CTA banner’s live silk (.card-stat-flow, one WebGL canvas, lazy). Omit for the dark tinted fill (case studies).
`action`	`ReactNode`	-	Card only. A control in the top-right slot where the icon chip sits — the lead tile’s icon-only Google reviews link out.