Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
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 | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
messagerequired | string | - | Body text of the notification. |
timestamprequired | string | - | Pre-formatted time the notification arrived. |
severity | 'info' | 'success' | 'warning' | 'info' | Tone of the notification. Sets its colour and icon. |
dismissLabel | string | 'Dismiss notification' | Accessible name for the dismiss button. |
onDismiss | () => void | - | Fired when the user dismisses the notification. |
className | string | - | Additional classes merged onto the root element. |
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.