カード
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.