FeaturedNew
BlogVertical Blog Card
A cover image over a category, title, excerpt and author row - the default post card for a grid.
#blog#card#post
2 frameworksBeginner
Loading…
A kicker, headline, author-and-date meta row and cover image to open a post.
<!-- The article's own top-level heading is an <h2>: the site header owns the
page <h1>. Meta sits in a <div> of muted text, not headings. -->
<header class="mx-auto w-full max-w-3xl px-4 pt-10 sm:px-6">
<p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Engineering</p>
<h2 class="mt-3 text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
Migrating a design system to semantic tokens
</h2>
<div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
<span class="font-medium text-gray-700 dark:text-gray-300">Priya Nair</span>
<span aria-hidden="true">·</span>
<time datetime="2026-07-19">Jul 19, 2026</time>
<span aria-hidden="true">·</span>
<span>8 min read</span>
</div>
<div class="mt-6 aspect-[16/9] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-5.jpg" alt="Close-up of a color palette on a monitor" class="h-full w-full object-cover" />
</div>
</header>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
kicker | string | - | Small label shown above the title. |
authorName | string | - | Name of the post's author. |
date | string | - | Machine-readable publication date. |
readTime | string | - | Read time |
coverSrc | string | - | Image URL for the cover image. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
className | string | - | Additional classes merged onto the root element. |
The article's own heading is an `<h2>` because the site chrome owns the page `<h1>`; the meta row is muted body text, not headings, so the outline stays a title and its sections. The cover uses `aspect-[16/9]` to hold its space, and the meta wraps gracefully with `flex-wrap` on narrow screens.