Stats

Responsive grid of metric cards, with optional change percentages and unit suffixes.

Preview

Number of deploys: 405
Average deploy time: 3.65 mins
Number of servers: 3
Success rate: 98.5%

Revenue: +4.75%; $405,091.00
Overdue invoices: +54.02%; $12,787.00
Outstanding invoices: -1.39%; $245,988.00
Expenses: +10.18%; $30,156.00

React preview

LiveView (HEEx)

alias DesignSystem.UI.Stats

<Stats.stats items={[
  %{label: "Revenue",  value: "$405,091.00"},
  %{label: "Visitors", value: "12,402"},
  %{label: "Bounce",   value: "32.4%"}
]} columns={3} />

<Stats.stats
  layout={:with_change}
  items={[
    %{label: "Revenue", value: "$405k", change: "+4.75%", change_kind: :positive},
    %{label: "Expenses", value: "$30k",  change: "+10.18%", change_kind: :negative}
  ]}
/>

React (JSX)

import { Stats } from "../ui/index.mjs"

<Stats
  items={[
    { label: "Revenue",  value: "$405,091.00" },
    { label: "Visitors", value: "12,402" },
    { label: "Bounce",   value: "32.4%" },
  ]}
  columns={3}
/>

<Stats
  layout="with_change"
  items={[
    { label: "Revenue",  value: "$405k", change: "+4.75%",  changeKind: "positive" },
    { label: "Expenses", value: "$30k",  change: "+10.18%", changeKind: "negative" },
  ]}
/>