x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="grid gap-4 sm:grid-cols-3"> <div class="flex h-full flex-col justify-center rounded-xl border border-line-faint bg-surface p-5 shadow-sm"> <span class="font-display text-3xl tracking-tight text-ink">87</span> <span class="mt-1 text-sm text-ink-muted">Search engines</span> </div> <div class="flex h-full flex-col justify-center rounded-xl border border-line-faint bg-surface p-5 shadow-sm"> <span class="font-display text-3xl tracking-tight text-ink">99.9%</span> <span class="mt-1 text-sm text-ink-muted">Uptime</span> </div> <div class="flex h-full flex-col justify-center rounded-xl border border-line-faint bg-surface p-5 shadow-sm"> <span class="font-display text-3xl tracking-tight text-ink">1</span> <span class="mt-1 text-sm text-ink-muted">Endpoint</span> </div></div>1
2
3
4
5
<div class="grid gap-4 sm:grid-cols-3"> <%= render StatTileComponent.new(value: "87", label: "Search engines") %> <%= render StatTileComponent.new(value: "99.9%", label: "Uptime") %> <%= render StatTileComponent.new(value: "1", label: "Endpoint") %></div>The value is a string on purpose: what a figure means is in how it is written, so the tile renders "99.9%" and "1" the same way it renders "87" and formats none of them.
No params configured.