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…
An avatar beside the author name, role, date and read time for the top of a post.
<div class="flex items-center gap-3">
<img
src="/images/avatar-1.jpg"
alt="Priya Nair"
class="h-11 w-11 shrink-0 rounded-full object-cover ring-1 ring-gray-200 dark:ring-gray-700"
/>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Priya Nair</p>
<div class="flex flex-wrap items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
<span>Staff Engineer</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>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
authorNamerequired | string | - | Name of the post's author. |
role | string | - | Job title shown beneath the name. |
avatarSrc | string | - | Image URL for the avatar. |
date | string | - | Machine-readable publication date. |
readTime | string | - | Read time |
className | string | - | Additional classes merged onto the root element. |
The avatar carries the author name as its `alt`, so it is not decorative here. The meta line uses `flex-wrap` and `min-w-0` with `truncate` on the name, so a long name or a narrow column degrades cleanly instead of overflowing. Drop the role and time for the compact variant.