カード
Profile Card
A centred team member card with an avatar, role, short bio and social links.
#profile#team#avatar
6 個のフレームワーク初級
Loading…
A single pricing tier with a feature list, price and call to action.
<article class="pricing-card pricing-card--highlighted" aria-labelledby="pricing-card-pro">
<p class="pricing-card__badge">Most popular</p>
<h3 class="pricing-card__name" id="pricing-card-pro">Pro</h3>
<p class="pricing-card__price">
<span class="pricing-card__amount">$29</span>
<span class="pricing-card__period">/month</span>
</p>
<ul class="pricing-card__features">
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Unlimited projects
</li>
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Priority support
</li>
<li class="pricing-card__feature">
<svg class="pricing-card__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Advanced analytics
</li>
</ul>
<a class="pricing-card__cta" href="#">Get started</a>
</article>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
name必須 | string | - | 見出しとして表示されるプラン名。 |
price必須 | string | - | 表示する金額。 |
period | string | '/month' | 価格の横に表示される請求期間。 |
features必須 | string[] | - | 機能を表す文字列のリスト。 |
highlighted | boolean | false | アクセント付きのスタイルでレンダリングします。 |
ctaLabel | string | 'Get started' | CTA ボタンのテキスト。 |
ctaHref | string | '#' | CTA リンクのリンク先。 |
Drive the tier from data rather than duplicating markup. The highlighted state is a ring plus a badge - keep the same height across cards so the CTAs line up.