Data display

Stat cards

Compact summary metrics.

Compact summary metrics extracted from the data-table overview. Use stat_card/1 alone or compose a responsive group with stat_grid/1. Callers own calculations, formatting, trends, and navigation state.

Standalone metric

Without href the card is a non-interactive div; subtitle adds quiet context.

Queued jobs

18 4 require attention

Responsive grid

Cards share a minimum basis, wrap without caller breakpoints, and only become links when href is present.

Open orders

Shipped

128

Long value

pending-warehouse-confirmation-2026-07

Revenue

$12,482.19 Last 30 days

<.stat_grid aria-label="Order summary">
  <:stat label="Open orders" value={42} />
  <:stat label="Shipped" value={128} href={~p"/orders?status=shipped"} />
  <:stat label="Long value" value="pending-warehouse-confirmation-2026-07" />
  <:stat label="Revenue" value="$12,482.19" subtitle="Last 30 days" />
</.stat_grid>

API reference

Props and slots, introspected from the component.

stat_card/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the card.
`href`	`string`	`nil`	Optional LiveView navigation target.
`icon`	`string`	`nil`	Optional host heroicon class shown by the label.
`label`*	`string`	`—`	Short caption identifying the metric.
`subtitle`	`string`	`nil`	Optional muted context below the value.
`value`*	`any`	`—`	Primary metric value to display.

stat_grid/1

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the grid.
Slots
`:stat`	A summary metric card; provide its value with the :value attribute or inner content.