नया
आंकड़े और KPIKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 फ्रेमवर्कशुरुआती
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 | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | DarkStatItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
eyebrow | string | - | Eyebrow |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
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.