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 divided list of posts with optional thumbnails - the dense archive or search-result view.
<ul class="mx-auto w-full max-w-2xl divide-y divide-gray-200 dark:divide-gray-800">
<!-- Repeat per post. -->
<li>
<a href="#" class="flex items-start gap-4 py-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-950">
<img src="/images/thumb-1.jpg" alt="" loading="lazy" class="hidden h-16 w-24 shrink-0 rounded-lg object-cover sm:block" />
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-500">
<span class="font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Product</span>
<span aria-hidden="true">·</span>
<time datetime="2026-07-15">Jul 15, 2026</time>
</div>
<h3 class="mt-1 truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
Naming things: our lightweight component conventions
</h3>
<p class="mt-1 line-clamp-1 text-sm text-gray-600 dark:text-gray-400">
The three rules that removed most of our review comments.
</p>
</div>
</a>
</li>
</ul>| Prop | Type | Default | Description |
|---|---|---|---|
postsrequired | Post[] | - | Posts |
className | string | - | Additional classes merged onto the root element. |
Each row is one link with a thumbnail that hides below `sm`, so the list stays readable on a phone without the images crowding the text. `divide-y` draws the separators from the list itself, so adding a row needs no extra markup. `line-clamp-1` keeps every row the same height.