カード
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 個のフレームワーク初級
Loading…
A media card with the image beside the content that stacks vertically on mobile.
<article class="h-card">
<img class="h-card__image" src="/your-image.jpg" alt="" width="160" height="160" />
<div class="h-card__body">
<p class="h-card__kicker">Workshop · 2 hours</p>
<h3 class="h-card__title">
<a class="h-card__link" href="#">Debugging performance with the Profiler</a>
</h3>
<p class="h-card__copy">
Record a real session, read the flame graph, and find the one component re-rendering forty times a second.
</p>
</div>
</article>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
href必須 | string | - | カードのリンク先。 |
copy必須 | string | - | タイトルの下に表示される本文。 |
kicker | string | - | タイトルの上に表示される小さなラベル。 |
imageSrc必須 | string | - | カードの画像の URL。 |
imageAlt | string | '' | 画像の代替テキスト。title で内容が伝わる場合は空文字にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
One breakpoint does the work: `flex-col` stacks by default and `sm:flex-row` puts the image on the left, with `sm:self-stretch` making it match the copy's height instead of leaving a gap. Like the blog card, the title link stretches over the whole surface, so the card is one target and one announced name. Widen `sm:w-40` for a heavier image and the text column simply takes what is left.