Card Pattern (article + link wrapper)

<article class="card">
    <img src="/posts/perf-wins/cover.png"
         alt=""
         width="600" height="338"
         loading="lazy">

    <div class="card-body">
        <p class="card-meta">
            <time datetime="2025-03-12">March 12, 2025</time> · 8 min read
        </p>
        <h3>
            <a href="/posts/perf-wins" class="card-link">
                How We Cut Page Load Time in Half
            </a>
        </h3>
        <p>Five practical performance wins from our last sprint, with real numbers.</p>
        <p class="card-author">By Alice Example</p>
    </div>
</article>

<style>
.card { position: relative; border-radius: 10px; overflow: hidden;
        background: #fff; border: 1px solid #e5e7eb; transition: transform .15s; }
.card:hover { transform: translateY(-2px); }
.card img  { width: 100%; height: auto; display: block; }
.card-body { padding: 16px 18px; }
.card-meta { font-size: 0.8rem; color: #6b7280; margin: 0 0 6px; }
.card-link { color: inherit; text-decoration: none; }

/* The pseudo-element extends the hit area to the full card — only the
   title link is in the tab order though, which is what screen readers expect. */
.card-link::after {
    content: "";
    position: absolute; inset: 0;
}
</style>