Horizontal Card

प्रीव्यू

कोड

<article class="h-card">
  <img class="h-card__image" src="/your-image.jpg" alt="" width="160" height="160" />

  <div class="h-card__body">
    <p class="h-card__kicker">Workshop &middot; 2 hours</p>

    <h3 class="h-card__title">
      <a class="h-card__link" href="#">Debugging performance with the Profiler</a>
    </h3>

    <p class="h-card__copy">
      Record a real session, read the flame graph, and find the one component re-rendering forty times a second.
    </p>
  </div>
</article>

प्रॉपर्टीज़

वेरिएंट

कस्टमाइज़ेशन

One breakpoint does the work: `flex-col` stacks by default and `sm:flex-row` puts the image on the left, with `sm:self-stretch` making it match the copy's height instead of leaving a gap. Like the blog card, the title link stretches over the whole surface, so the card is one target and one announced name. Widen `sm:w-40` for a heavier image and the text column simply takes what is left.

विवरण

लेखक

ADYSRE

वर्ज़न

1.0.0

बनाया गया

2026-07-01

अपडेट किया गया

2026-07-15

संबंधित कंपोनेंट