New
Grids & BentosFeature Bento 3x2
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
#bento#features#grid
3 frameworksIntermediate
Loading…
Key metrics as bento tiles - one hero number on a gradient panel, the rest bordered around it.
<!-- Each metric is a <dl> pair: dt (label) then dd (value) in the DOM, but the
value is shown first with order-* so a screen reader still reads label→value. -->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 p-4 sm:grid-cols-4 sm:p-6">
<dl class="flex flex-col justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 p-6 text-white sm:col-span-2 sm:row-span-2">
<dd class="order-1 text-4xl font-bold tracking-tight sm:text-5xl">99.99%</dd>
<dt class="order-2 mt-2 text-sm font-medium text-blue-100">Uptime across all regions, measured every minute</dt>
</dl>
<dl class="flex flex-col justify-center rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 sm:col-span-2">
<dd class="order-1 text-3xl font-bold text-gray-900 dark:text-gray-100">2.4M</dd>
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Requests per minute</dt>
</dl>
<dl class="flex flex-col justify-center rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<dd class="order-1 text-3xl font-bold text-gray-900 dark:text-gray-100">38ms</dd>
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">p95 latency</dt>
</dl>
<dl class="flex flex-col justify-center rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<dd class="order-1 text-3xl font-bold text-gray-900 dark:text-gray-100">150+</dd>
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Edge locations</dt>
</dl>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
stats | Stat[] | - | Stats |
className | string | - | Additional classes merged onto the root element. |
Drive it with `stats`; mark one `featured` to promote it to the large gradient cell. Each metric is a `<dl>` pair with the value shown first via `order-*` while the DOM keeps `dt`-then-`dd`, so a screen reader still reads label then value. The grid collapses to one column below `sm`.