SummaryMetrics

stable

Horizontal strip of key performance metrics with trend deltas and loading states

import { SummaryMetrics } from "@nodus/design-system/finance"

Total Cash$245,000,000.00+1,250,000,000.0%

Net Debt$89,000,000.00-320,000,000.0%

LCR1.15%

Open Positions342+1,800.0%

Loading demo…

Props

Prop	Type	Default	Description
`metrics`req	`SummaryMetric[]`	—	Array of metric objects
`columns`	`2 \| 3 \| 4`	—	Number of grid columns
`locale`	`string`	—	BCP 47 locale override
`loading`	`boolean`	—	Show skeleton loading state

metricsrequired

Type SummaryMetric[]Default —

Array of metric objects

columns

Type 2 | 3 | 4Default —

Number of grid columns

locale

Type stringDefault —

BCP 47 locale override

loading

Type booleanDefault —

Show skeleton loading state

MobileStacks / Scroll

Metric grid collapses from 4-up to 2-up to 1-up as viewport narrows.

Design Rationale

This component was designed to express:

Key accounting metrics grid with period-over-period comparison and deltas

Formal report header with title, as-of date, period, and classification badge

Report footnote with data source attribution, timestamp, and optional disclaimer

Was this helpful?