Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
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 | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
hrefrequired | string | - | Destination the card links to. |
copyrequired | string | - | Body text shown under the title. |
kicker | string | - | Small label shown above the title. |
imageSrcrequired | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
className | string | - | Additional classes merged onto the root element. |
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.