Data Display Overview
Data display patterns prioritize scan speed. Tables, summary cards, and grouped values should remain clear across themes and viewport widths.
Source files: styles/base.css, styles/components/card.css
Summary Cards
$83.97
Current monthly spend
$1,007.64
Projected annual spend
<div class="wm-card card">
<h3>$83.97</h3>
<p>Current monthly spend</p>
</div>Stat Cards — .stats-grid / .stat-card
Compact metric display. Use .stats-grid as a responsive wrapper and
.stat-card for each cell. Inner .stat-value and
.stat-label position the number and descriptor.
Source: styles/components/stat-card.css
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">$214</div>
<div class="stat-label">Monthly spend</div>
</div>
<div class="stat-card stat-card-success">
<div class="stat-value">$48</div>
<div class="stat-label">Savings realized</div>
</div>
<div class="stat-card stat-card-warning">
<div class="stat-value">$24</div>
<div class="stat-label">Projected savings</div>
</div>
</div>Dedicated Data Views
Detailed table, chart, and gallery patterns now live on focused pages. Use this overview for metric-card composition and jump to the dedicated docs below.