New
Stats & KPIsKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 frameworksBeginner
Loading…
A dark gradient band of centred metrics that paints its own surface, no `dark:` variants.
<!--
This band paints its own dark surface and gradient, so it looks identical on a
light or dark page - there is nothing here that inherits the theme and hence no
dark: variants. The gradient stops are dark enough that the near-white values
clear AA everywhere on them.
-->
<section class="w-full rounded-2xl bg-gradient-to-br from-gray-900 via-gray-900 to-blue-950 px-6 py-10 sm:px-10">
<p class="text-center text-xs font-semibold uppercase tracking-widest text-blue-300">By the numbers</p>
<dl class="mx-auto mt-6 grid max-w-4xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col text-center">
<dd class="order-1 text-3xl font-bold tracking-tight text-white sm:text-4xl">99.98%</dd>
<dt class="order-2 mt-1 text-sm text-gray-400">Uptime SLA</dt>
</div>
<div class="flex flex-col text-center">
<dd class="order-1 text-3xl font-bold tracking-tight text-white sm:text-4xl">140+</dd>
<dt class="order-2 mt-1 text-sm text-gray-400">Countries served</dt>
</div>
</dl>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | DarkStatItem[] | - | The array of items to render. |
eyebrow | string | - | Eyebrow |
className | string | - | Additional classes merged onto the root element. |
The band paints its own `bg-gradient-to-br` dark surface so it looks identical on a light or dark page and needs no `dark:` variants; the stops are dark enough that near-white values clear AA everywhere. Values sit above labels via `order-*` while the DOM keeps reading order.