<article class="blog-card">
  <div class="blog-cover">
    <span class="blog-tag">Design</span>
  </div>
  <div class="blog-body">
    <div class="blog-meta">
      <span>Apr 9, 2026</span>
      <span>·</span>
      <span>5 min read</span>
    </div>
    <h3 class="blog-title">The quiet power of negative space in UI design</h3>
    <p class="blog-excerpt">How intentional emptiness shapes attention, reduces noise, and makes interfaces feel effortless.</p>
    <div class="blog-author">
      <div class="avatar avatar-fallback" style="width:1.75rem;height:1.75rem;font-size:0.625rem">JD</div>
      <span>Jane Doe</span>
    </div>
  </div>
</article>

<style>
.blog-card { border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--surface); }
.blog-cover { height: 160px; background: linear-gradient(135deg, #2A5A3A, #5A9A6A); position: relative; }
.blog-tag {
  position: absolute; bottom: 0.75rem; left: 0.75rem;
  background: rgba(0,0,0,0.5); color: #fff;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.625rem; border-radius: 9999px; backdrop-filter: blur(4px);
}
.blog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.blog-meta { font-size: 0.75rem; color: var(--muted); display: flex; gap: 0.375rem; }
.blog-title { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0; }
.blog-excerpt { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin: 0; }
.blog-author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; margin-top: 0.25rem; }
</style>