कार्ड
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 फ्रेमवर्कशुरुआती
Loading…
A dismissible notice with a severity icon, message, timestamp and close button.
<article class="notice notice--success" role="status">
<span class="notice__icon" aria-hidden="true">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
</svg>
</span>
<div class="notice__body">
<p class="notice__title">Backup completed</p>
<p class="notice__message">All 1,284 records were exported to your S3 bucket.</p>
<p class="notice__time">2 minutes ago</p>
</div>
<button class="notice__dismiss" type="button" aria-label="Dismiss notification">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" />
</svg>
</button>
</article>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
messageआवश्यक | string | - | नोटिफ़िकेशन का मुख्य टेक्स्ट। |
timestampआवश्यक | string | - | नोटिफ़िकेशन आने का समय, पहले से फ़ॉर्मैट किया हुआ। |
severity | 'info' | 'success' | 'warning' | 'info' | नोटिफ़िकेशन का टोन, इसका रंग और आइकन तय करता है। |
dismissLabel | string | 'Dismiss notification' | बंद करने वाले बटन का एक्सेसिबल नाम। |
onDismiss | () => void | - | जब यूज़र नोटिफ़िकेशन बंद करता है तब चलता है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Severity picks the icon and the tile colour together, so info/success/warning never rely on hue alone. The card is `role="status"` - polite, announced without stealing focus; if a message genuinely blocks the user, use `role="alert"` instead. Dismiss state lives in the component, which is why the Next.js variant is the one that needs `'use client'`. Lift it out and pass `onDismiss` if a parent owns the queue.