<article class="card">
  <div class="card-image">
    <img src="image.jpg" alt="Card image" />
  </div>
  <div class="card-body">
    <span class="badge badge-accent">Design</span>
    <h2 class="card-title">Card Title</h2>
    <p class="card-desc">Short description text goes here. Two or three lines is ideal.</p>
    <div class="card-footer">
      <a href="#" class="btn btn-primary btn-sm">Read more →</a>
    </div>
  </div>
</article>

<style>
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.08); }
.card-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.card-title { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.card-desc  { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.card-footer { margin-top: 0.5rem; }
</style>