नया
आंकड़े और KPIKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 फ्रेमवर्कशुरुआती
Loading…
A single dominant metric with a label, optional delta and supporting copy, centred.
<section class="mx-auto w-full max-w-xl rounded-2xl border border-gray-200 bg-white px-6 py-10 text-center dark:border-gray-800 dark:bg-gray-900">
<dl>
<dt class="text-sm font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-400">Total processed</dt>
<dd class="mt-3 text-5xl font-bold tracking-tight text-gray-900 sm:text-6xl dark:text-gray-100">$4.2M</dd>
</dl>
<p class="mx-auto mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
<svg viewBox="0 0 12 12" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9V3M3 6l3-3 3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="sr-only">Increased by</span>18% this quarter
</p>
<p class="mx-auto mt-4 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
Across every workspace since launch, settled and reconciled in real time.
</p>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
valueआवश्यक | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
description | string | - | Description |
delta | string | - | तुलना अवधि से हुआ बदलाव, पहले से फ़ॉर्मैट किया हुआ। |
direction | 'up' | 'down' | 'up' | दिखते समय एलिमेंट जिस दिशा से आता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The label is the `dt` and the value the `dd`, so the pair reads as one stat; the optional delta carries an arrow and an `sr-only` word so the trend is not colour alone. The number scales `text-5xl` to `text-6xl` from `sm:` up.