<div class="card t-hover" style="max-width:320px;">
<div class="img-figure">
<img src="https://picsum.photos/seed/ts/400/200" alt="Video thumbnail" style="width:100%;border-radius:8px 8px 0 0;object-fit:cover;max-height:160px;">
</div>
<div class="card-info d-flex flex-column" style="padding:12px;">
<h4 style="margin-bottom:8px;">How to grow your YouTube channel</h4>
<p style="color:var(--paragraph);font-size:0.875rem;margin-bottom:12px;">Published 21 Feb 2024</p>
<a href="#" class="btn btn-primary" style="margin-top:auto;">View video</a>
</div>
</div>
<div class="card{{#if single}} card-single{{/if}}{{#if hover}} t-hover{{/if}}" style="{{#if maxWidth}}max-width:{{maxWidth}};{{/if}}">
{{#if image}}
<div class="img-figure">
<img src="{{image}}" alt="{{imageAlt}}" style="width:100%;border-radius:8px 8px 0 0;object-fit:cover;max-height:160px;">
</div>
{{/if}}
<div class="card-info d-flex flex-column" style="padding:{{#if single}}0{{else}}12px{{/if}};">
{{#if title}}<h4 style="margin-bottom:8px;">{{title}}</h4>{{/if}}
{{#if body}}<p style="color:var(--paragraph);font-size:0.875rem;margin-bottom:12px;">{{body}}</p>{{/if}}
{{#if action}}
<a href="#" class="btn btn-primary" style="margin-top:auto;">{{action}}</a>
{{/if}}
</div>
</div>
{
"title": "How to grow your YouTube channel",
"body": "Published 21 Feb 2024",
"image": "https://picsum.photos/seed/ts/400/200",
"action": "View video",
"single": false,
"hover": true,
"maxWidth": "320px",
"imageAlt": "Video thumbnail"
}
Base card component. Three variants:
.card) — white background, 12px border-radius, no border..card-single) — light purple background (--primary-light), 8px border-radius. Use for stats and highlights..t-hover) — adds a lift/shadow on hover. Use for clickable cards.