कार्ड
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 फ्रेमवर्कशुरुआती
Loading…
A KPI tile with a large metric, a label and a coloured trend delta.
<article class="stat-card">
<div class="stat-card__head">
<p class="stat-card__label">Monthly recurring revenue</p>
<span class="stat-card__icon" aria-hidden="true">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a1 1 0 0 1 1 1v1.1c1.7.3 3 1.5 3 3.1a1 1 0 1 1-2 0c0-.6-.8-1.2-2-1.2s-2 .6-2 1.2.8 1.2 2 1.2c2.2 0 4 1.4 4 3.2 0 1.6-1.3 2.8-3 3.1V16a1 1 0 1 1-2 0v-1.3c-1.7-.3-3-1.5-3-3.1a1 1 0 1 1 2 0c0 .6.8 1.2 2 1.2s2-.6 2-1.2-.8-1.2-2-1.2c-2.2 0-4-1.4-4-3.2 0-1.6 1.3-2.8 3-3.1V3a1 1 0 0 1 1-1Z" />
</svg>
</span>
</div>
<p class="stat-card__value">$48,120</p>
<p class="stat-card__trend">
<span class="stat-card__delta stat-card__delta--up">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 4a1 1 0 0 1 .7.3l4 4a1 1 0 0 1-1.4 1.4L11 7.4V15a1 1 0 1 1-2 0V7.4L6.7 9.7a1 1 0 0 1-1.4-1.4l4-4A1 1 0 0 1 10 4Z" />
</svg>
<span class="stat-card__sr">Up</span>
12.5%
</span>
<span class="stat-card__period">vs last month</span>
</p>
</article>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | वैल्यू के ऊपर दिखने वाले मेट्रिक का नाम। |
valueआवश्यक | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
deltaआवश्यक | string | - | तुलना अवधि से हुआ बदलाव, पहले से फ़ॉर्मैट किया हुआ। |
trend | 'up' | 'down' | 'up' | बदलाव की दिशा, delta का रंग और ऐरो तय करती है। |
period | string | 'vs last month' | delta के बगल में दिखने वाली तुलना अवधि। |
icon | ReactNode | - | कंटेंट के साथ रेंडर होने वाला आइकन एलिमेंट। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Colour alone never carries the trend: the arrow is `aria-hidden` and an `sr-only` "Up" or "Down" sits beside the number, so the direction survives both greyscale and screen readers. Green and red are conventional but not universal - if your domain reads a falling number as good (churn, latency), pass `trend` from the interpretation rather than the arithmetic sign.