Summary box

Overview

The Summary box ships from @flatpay-dk/ui as <SummaryBox>. One job — frame the single most important number on the page in the brand display face, on a charcoal surface, with a small secondary label naming what the number is. It’s the only component in the system besides the page H1 allowed to use Founders Grotesk X Condensed.

Anatomy

• Surface. bg-foreground (charcoal) with text-background (off-white). 8 px radius at the default size; 40 px padding. The surface is the only chroma decision in this component — everything else flows from it.
• Metric. Founders Grotesk X Condensed Bold, uppercase, tracking-tight, leading-[0.95]. 60 px at size="lg". Tabular numerals + slashed zero apply automatically — pass the number pre-formatted.
• Label. Inter Tight Semibold 16 px, text-background/70. Phrased as a noun: Total, Net sales today, Available balance. Never a sentence; the metric IS the sentence.
• Centred. Both the metric and the label sit centred horizontally. The Summary box is a poster, not a row — it commands the column it lives in.

Sizes

Three sizes — small for tight columns or stacked comparisons, medium for a side-card hero, large for the page hero. Padding, radius, and metric size all step together.

In context

Three real surfaces. The Summary box is the visual anchor; the surrounding copy is supporting detail in normal product type.

Label position

The label sits beneath the metric by default — the Figma layout. Pass labelPosition="above" when the surrounding context calls for the label to introduce the metric (a stat in a table cell that needs a short caption above it, for instance).

Code

Pass the metric pre-formatted as children. The component never touches separators, currency symbols, or signs — the currency rules tell you how to format.

import { SummaryBox } from "@flatpay-dk/ui";

// Default — large hero metric on a page
<SummaryBox label="Net sales today">€ 10.095,00</SummaryBox>

// Compact — for stacked comparisons or sidebars
<SummaryBox label="Cash counted" size="md">€ 412,50</SummaryBox>

// Small — for inline summaries inside dense surfaces
<SummaryBox label="Total" size="sm">45,00 kr</SummaryBox>

// Label above — when context calls for a caption-led layout
<SummaryBox label="Net sales today" labelPosition="above">
  € 10.095,00
</SummaryBox>

// Two-up grid — pair to compare. Stay at md or smaller.
<div className="grid grid-cols-2 gap-3">
  <SummaryBox label="Cash counted" size="md">€ 412,50</SummaryBox>
  <SummaryBox label="Cash expected" size="md">€ 408,00</SummaryBox>
</div>

Best practices

• One large summary box per page. Founders Grotesk earns its rarity by being rare. Two large boxes on one screen turns the brand face into a pattern instead of a moment.
• Pre-format the metric.Pass the value as you want it shown — “€ 10.095,00”, not 10095. Use Intl.NumberFormat with the locale and currency, never hand-roll separators.
• Label the metric, don’t describe it. Total, Net sales today, Available balance. Not This is the total. The label is a noun.
• Don’t recolour the surface.The charcoal-and-off-white pair is the component’s identity; swapping it for a brand pastel turns it into something else. For a softer surface, reach for a regular Card with a metric token instead.
• Don’t make it interactive. A Summary box is read, not clicked. If the user needs to drill into the underlying data, put a link or a button below it — not on the surface itself.

Props

Related