精选最新
博客Vertical Blog Card
A cover image over a category, title, excerpt and author row - the default post card for a grid.
#blog#card#post
2 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
authorName必填 | string | - | 文章作者的姓名。 |
role | string | - | 显示在姓名下方的职位。 |
avatarSrc | string | - | 头像的图片 URL。 |
date | string | - | 机器可读的发布日期。 |
readTime | string | - | Read time |
className | string | - | 合并到根元素上的额外类名。 |
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.