精选最新
博客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…
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
kicker | string | - | 显示在标题上方的小标签。 |
authorName | string | - | 文章作者的姓名。 |
date | string | - | 机器可读的发布日期。 |
readTime | string | - | Read time |
coverSrc | string | - | 封面图片的 URL。 |
imageAlt | string | '' | 图片的替代文本。若 title 已说明图片内容则留空。 |
className | string | - | 合并到根元素上的额外类名。 |
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.