Stat grid

Keyed label, value, and detail records in a responsive one-to-three-column grid.

Source
StatGrid composes Grid with one column by default, two from sm, and three from lg. It does not own trends, charts, colors, or policy.
API
stat(key:, label:, value:, detail:) requires unique normalized keys and non-blank strings. At least one stat is required.

Cardinality and content pressure

The deliberately narrow keyed stat record across one, partial, complete, dense, and long data.

One stat

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/stat_grid_page.rb
render NitroKit::StatGrid.new(id: "gallery-stat-grid-one") do |stats|
  stats.stat(key: :members, label: "Members", value: "1")
end

Partial row

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/blocks/stat_grid_page.rb
render NitroKit::StatGrid.new(id: "gallery-stat-grid-two") do |stats|
  stats.stat(key: :members, label: "Members", value: "18", detail: "2 invitations pending")
  stats.stat(key: :projects, label: "Active projects", value: "7")
end

Complete row

ViewportFull width
Rubytest/dummy/app/components/gallery/blocks/stat_grid_page.rb
render NitroKit::StatGrid.new(id: "gallery-stat-grid-three") do |stats|
  stats.stat(key: :monthly_requests, label: "Monthly requests", value: "1,284,902", detail: "Current billing period")
  stats.stat(key: :error_rate, label: "Error rate", value: "0.08%", detail: "Past 24 hours")
  stats.stat(key: :uptime, label: "Uptime", value: "99.99%", detail: "Past 30 days")
end

Dense records

9
ViewportFull width
Rubytest/dummy/app/components/gallery/blocks/stat_grid_page.rb
render NitroKit::StatGrid.new(id: "gallery-stat-grid-dense") do |stats|
  9.times do |index|
    stats.stat(
      key: "region-#{index + 1}",
      label: "Region #{index + 1}",
      value: ((index + 1) * 12_345).to_s,
      detail: index.even? ? "Healthy" : nil
    )
  end
end

Long values nested in content

ViewportFull width
Rubytest/dummy/app/components/gallery/blocks/stat_grid_page.rb
render NitroKit::Container.new(size: :lg, id: "gallery-stat-grid-long-container") do
  render NitroKit::StatGrid.new(id: "gallery-stat-grid-long") do |stats|
    stats.stat(key: :retention, label: "Annual enterprise data retention", value: "365 days", detail: "Applies to International Research and Reliability Engineering")
    stats.stat(key: :storage, label: "Encrypted object storage", value: "8,192.75 GB", detail: "Replicated across three regions")
    stats.stat(key: :events, label: "Audit events awaiting export", value: "2,147,483,647", detail: "Export before the regulatory deadline")
  end
end