RZREDZ.UI

Stat tiles

A number with its label and an icon in a tone - and, as a button, the filter for what it counts: the numbers a person reads are the buttons they press.

Examples

stat holds an icon tile, a stat-value and a stat-label; stat-primary, stat-success, stat-warning, stat-danger, stat-info and stat-secondary - a quiet zero - tint the icon and the number. As a button with aria-pressed a tile is a toggle: pressed, it wears its tone's border and the list below shows only what it counts. A row is a grid: two tiles a row on a phone, four from md:.

<div class="grid cols-2 md:cols-4 gap-12" role="group" aria-label="Show agents">
	<button class="stat" type="button" aria-pressed="true"><span class="icon-tile"><i class="bi bi-cpu" aria-hidden="true"></i></span><span><span class="stat-value">24</span><span class="stat-label">All agents</span></span></button>
	<button class="stat stat-primary" type="button" aria-pressed="false"><span class="icon-tile"><i class="bi bi-play-circle" aria-hidden="true"></i></span><span><span class="stat-value">3</span><span class="stat-label">Running</span></span></button>
	<button class="stat stat-warning" type="button" aria-pressed="false"><span class="icon-tile"><i class="bi bi-clock-history" aria-hidden="true"></i></span><span><span class="stat-value">2</span><span class="stat-label">Late</span></span></button>
	<button class="stat stat-secondary" type="button" aria-pressed="false"><span class="icon-tile"><i class="bi bi-x-octagon" aria-hidden="true"></i></span><span><span class="stat-value">0</span><span class="stat-label">Failed</span></span></button>
</div>

A tile takes the stat's tone unless it has its own: icon-tile-chart-3 or icon-tile-success on the tile stays, for a category in a neutral stat.

14Uploaded
2,126Matched
<div class="grid cols-2 gap-12 max-w-480">
	<div class="stat"><span class="icon-tile icon-tile-chart-3"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span><span><span class="stat-value">14</span><span class="stat-label">Uploaded</span></span></div>
	<div class="stat stat-success"><span class="icon-tile"><i class="bi bi-check-lg" aria-hidden="true"></i></span><span><span class="stat-value">2,126</span><span class="stat-label">Matched</span></span></div>
</div>

Without a button it only reads: a div class="stat". One long word breaks instead of running past a narrow tile.

14Reconfigurations
3RefundsCounterbalancing
<div class="grid cols-2 gap-12 max-w-320">
	<div class="stat"><span><span class="stat-value">14</span><span class="stat-label">Reconfigurations</span></span></div>
	<div class="stat"><span><span class="stat-value">3</span><span class="stat-label">Refunds</span><span class="stat-sub">Counterbalancing</span></span></div>
</div>

As an a a tile leads to the list it counts, filtered on its server; the tile of the list shown carries aria-current="page" and wears its tone's border, as a pressed one does.

<nav class="grid cols-2 md:cols-4 gap-12" aria-label="Bookings by state">
	<a class="stat stat-primary" href="#stat-links" aria-current="page"><span class="icon-tile"><i class="bi bi-calendar-check" aria-hidden="true"></i></span><span><span class="stat-value">128</span><span class="stat-label">Confirmed</span></span></a>
	<a class="stat stat-warning" href="#stat-links"><span class="icon-tile"><i class="bi bi-hourglass-split" aria-hidden="true"></i></span><span><span class="stat-value">14</span><span class="stat-label">Waiting</span></span></a>
	<a class="stat stat-danger" href="#stat-links"><span class="icon-tile"><i class="bi bi-x-circle" aria-hidden="true"></i></span><span><span class="stat-value">3</span><span class="stat-label">Cancelled</span></span></a>
	<a class="stat" href="#stat-links"><span><span class="stat-value">145</span><span class="stat-label">All bookings</span></span></a>
</nav>

A second line, a trend, a bar and a time

stat-sub is a second line under the label. stat-delta shows a change with an arrow: data-trend="up" or "down" turns it, and it is green when the trend is the good one - up, unless data-good="down" says that less is better, as for refunds - and red when not; its words say the change, "+12%", and the arrow only repeats them. A progress or a meter in the tile's words takes their width; stat-meta sits at the end - when the number was counted. A tile with no icon tile lays out its words alone, and stat-emphasis tints the whole tile in its tone, for the one number a screen leads with. aria-busy="true" draws the number as a placeholder while it is counted.

412,000 THBRevenue in November+12% on October
6Refunds+2 on October
68%Rooms filled5 min ago
0Guests today
<div class="grid sm:cols-3 gap-12">
	<div class="stat stat-success stat-emphasis"><span><span class="stat-value">412,000 THB</span><span class="stat-label">Revenue in November</span><span class="stat-sub"><span class="stat-delta" data-trend="up">+12%</span> on October</span></span></div>
	<div class="stat"><span class="icon-tile"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></span><span><span class="stat-value">6</span><span class="stat-label">Refunds</span><span class="stat-sub"><span class="stat-delta" data-trend="up" data-good="down">+2</span> on October</span></span></div>
	<div class="stat stat-info"><span class="icon-tile"><i class="bi bi-door-open" aria-hidden="true"></i></span><span><span class="stat-value">68%</span><span class="stat-label">Rooms filled</span><progress class="progress progress-xs progress-info" value="68" max="100" aria-label="Rooms filled, 68 percent"></progress></span><span class="stat-meta">5 min ago</span></div>
</div>
<div class="grid sm:cols-3 gap-12">
	<div class="stat" aria-busy="true"><span><span class="stat-value">0</span><span class="stat-label">Guests today</span></span></div>
</div>

Accessibility

  • A tile button's name is its number and its label, "2 Late"; aria-pressed says it filters. Put the row in a group with a name.
  • The tone repeats the label; it never says alone what the tile counts. A delta's color and arrow repeat its words.
  • A tile link's name is its number and its label; the tile of the list shown says aria-current="page". A tile counting its number is aria-busy="true", and its words come when it is done.
  • Pressed, the tile also draws an outline in forced colors.

Tokens

From css/components/stat.css. It declares --redz-stat-tone, --redz-tile-base-bg, --redz-tile-base-fg on its root, never on rows or items.

It reads the theme's --redz-text, --redz-space-12, --redz-space-16, --redz-border, --redz-radius-12, --redz-bg, --redz-bg-hover, --redz-space-8, --redz-text-muted, --redz-fs-12, --redz-space-2, --redz-success, --redz-danger, --redz-radius-6, --redz-fs-24, --redz-primary, --redz-warning, --redz-info.