cardsBeginner

Blog — Cover Card

Editorial blog card with full-cover image overlay.

Live preview

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 cover-image blog card with Tailwind: full-card image with a dark gradient overlay at the bottom containing title, excerpt, and date. Hover state intensifies the gradient.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/blog-cards/2.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-blog-card-3
-->
<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="group">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160"
        class="h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50"
      />

      <div class="p-4">
        <a href="#">
          <h3 class="text-lg font-medium text-gray-900">Finding the Journey to Mordor</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>