Billboard

When to use

Primary metric at the top of a dashboard or widget (WidgetShell child).

When NOT to use

Multiple small KPIs in a row — use BadgeBar. Tabular metrics — use DataTable.

Podium primitives composed

• Podium Text

Props

Auto-generated from src/components/Billboard/Billboard.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

BillboardProps

Prop	Type	Required	Description
accent	string	No	Color of the accent bar rendered at the top of the card. Omit to render no accent bar.
delta	BillboardDelta	No	Delta/change indicator shown below the subtitle.
footnote	ReactNode	No	Tertiary text pinned to the bottom of the card. Useful for caveats, thresholds, or additional context.
subtitle	ReactNode	No	Secondary text displayed directly below the value. Accepts a React node for rich content.
title	string	Yes	Small uppercase label at the top of the card.
value	ReactNode	Yes	Primary metric content. Accepts any React node for maximum flexibility. For simple cases pass a plain number or string — wrap it in <BillboardValue> to apply the large display-scale typography and optional color. For complex layouts (e.g., two stacked values with labels) pass arbitrary JSX: tsx value={ <Stack> <BillboardValue color={teal}>14,832</BillboardValue> <BillboardValue>15,610</BillboardValue> </Stack> }

Examples

Revenue billboard

import { Billboard, BillboardValue } from '@nike/whisker-component-library';

<Billboard label="Today's revenue" value="$12,450" delta={{ value: '+8%', direction: 'up' }}>
  <BillboardValue label="Transactions" value="342" />
</Billboard>;

Live playground