Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
Loading…
An article card with a cover image, category chip, excerpt and author byline.
<article class="blog-card">
<img class="blog-card__cover" src="/your-image.jpg" alt="" width="384" height="200" />
<div class="blog-card__body">
<p class="blog-card__chip">Engineering</p>
<h3 class="blog-card__title">
<a class="blog-card__link" href="#">Why we rewrote our design tokens in one afternoon</a>
</h3>
<p class="blog-card__excerpt">
Four years of drift left us with 312 colours for what turned out to be nine decisions. Here is how we found them.
</p>
<div class="blog-card__meta">
<img class="blog-card__avatar" src="/your-image.jpg" alt="" width="28" height="28" />
<span class="blog-card__author">Priya Raman</span>
<span class="blog-card__dot" aria-hidden="true">·</span>
<time class="blog-card__date" datetime="2026-06-18">18 Jun 2026</time>
</div>
</div>
</article>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
hrefrequired | string | - | Destination the card links to. |
excerptrequired | string | - | Short summary shown under the title. |
categoryrequired | string | - | Category label shown above the title. |
coverSrcrequired | string | - | Image URL for the cover image. |
authorNamerequired | string | - | Name of the post's author. |
authorAvatarSrcrequired | string | - | Image URL for the author's avatar. |
daterequired | string | - | Machine-readable publication date. |
dateLabelrequired | string | - | Human-readable publication date. |
className | string | - | Additional classes merged onto the root element. |
The title link stretches over the card with `after:absolute after:inset-0`, so the whole surface is clickable from a single real anchor - no nested links, and the announced name is the headline rather than "Read more". That trick needs a positioned ancestor: keep `relative` on the article. The `<time datetime>` is what feeds structured data, so give it the machine format and let the visible label be whatever reads well.