<article class="h-card">
  <div class="h-card-image">
    <img src="image.jpg" alt="" />
  </div>
  <div class="h-card-body">
    <span class="badge badge-default">CSS</span>
    <h3>Title Metni</h3>
    <p>Short description text. Two lines is enough.</p>
    <a href="#" class="btn btn-ghost btn-sm">Continue →</a>
  </div>
</article>

<style>
.h-card {
  display: flex; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden;
  transition: box-shadow 0.2s;
}
.h-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.h-card-image { width: 160px; flex-shrink: 0; }
.h-card-image img { width: 100%; height: 100%; object-fit: cover; }
.h-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.h-card-body h3 { font-weight: 500; }
.h-card-body p  { font-size: 0.875rem; color: var(--muted); flex: 1; }
</style>