फ़ीचर्डनया
ब्लॉग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.