<div class="card" style="max-width:320px;">
<div class="card-info d-flex flex-column" style="padding:12px;">
<h4 style="margin-bottom:8px;">Connect your YouTube channel</h4>
<p style="color:var(--paragraph);font-size:0.875rem;margin-bottom:12px;">Link your channel to unlock analytics, scheduling, and more.</p>
<a href="#" class="btn btn-primary" style="margin-top:auto;">Connect now</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": "Connect your YouTube channel",
"body": "Link your channel to unlock analytics, scheduling, and more.",
"image": null,
"action": "Connect now",
"single": false,
"hover": false,
"maxWidth": "320px"
}
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.