cardsBeginner
Editorial Blog Card
Editorial-style blog card with image, title, excerpt, and post metadata.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a blog card with Tailwind: rounded card with a hero image at the top, then padding around a title (text-lg, semibold), a 2-line excerpt with line-clamp, and a small footer row with the author avatar + name and a publish date in muted text on the right.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-blog-card
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-md p-6 w-full">
<article class="overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg">
<img
alt=""
src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160"
class="h-56 w-full object-cover"
/>
<div class="bg-white p-4 sm:p-6">
<time datetime="2022-10-10" class="block text-xs text-gray-500"> 10th Oct 2022 </time>
<a href="#">
<h3 class="mt-0.5 text-lg text-gray-900">
How to position your furniture for positivity
</h3>
</a>
<p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
atque dignissimos. Molestias explicabo corporis voluptatem?
</p>
</div>
</article>
</div>
</div>