Components / Display & Media / Card
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.
Usage this month
Across all projects in this workspace.
Uses: Badge, Button — include its CSS alongside this one.
<div class="k-card" style="max-width:430px">
<div class="k-card-h">
<div><h3>Usage this month</h3><p>Across all projects in this workspace.</p></div>
<span class="sp"><span class="badge teal">On track</span></span>
</div>
<div class="k-card-b">Build minutes are at 62% with nine days left. The deploy queue cleared twice as fast since the cache change, and nothing is waiting on review.</div>
<div class="k-card-f">Updated 2 hours ago<span class="sp"><button class="btn btn-sec btn-sm">Details</button><button class="btn btn-pri btn-sm">Open report</button></span></div>
</div>.k-card{border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);font-family:var(--k-font);color:var(--k-ink);overflow:hidden;text-align:left}
.k-card-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 0}
.k-card-h h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.k-card-h p{margin-top:3px;font-size:12.5px;color:var(--k-ink-3);line-height:1.6}
.k-card-h .sp{margin-left:auto;flex:none}
.k-card-b{padding:14px 18px 18px;font-size:13.5px;line-height:1.75;color:var(--k-ink-2)}
.k-card-f{display:flex;align-items:center;gap:9px;padding:13px 18px;border-top:1px solid var(--k-line);background:var(--k-bg-soft);font-size:12.5px;color:var(--k-ink-3)}
.k-card-f .sp{margin-left:auto;display:flex;gap:9px}
Examples
Basic
Everything in Starter, plus unlimited projects, guest seats and priority support.
<div class="k-card" style="max-width:340px">
<div class="k-card-b">
<b style="font-size:14.5px">Studio plan</b>
<p style="margin-top:6px;font-size:13px;line-height:1.75;color:var(--k-ink-2)">Everything in Starter, plus unlimited projects, guest seats and priority support.</p>
</div>
</div>Header and footer
Issued October 31. Payment is due at the end of December, per the terms on the estimate.
<div class="k-card" style="max-width:340px">
<div class="k-card-h">Invoice INV-1042</div>
<div class="k-card-b">
<p style="font-size:13px;line-height:1.75;color:var(--k-ink-2)">Issued October 31. Payment is due at the end of December, per the terms on the estimate.</p>
</div>
<div class="k-card-f"><a href="#" style="font-size:13px;font-weight:550;color:var(--k-accent);text-decoration:none">Download PDF</a></div>
</div>Whole card as a link
<a class="k-card" href="#" style="max-width:340px;display:block;text-decoration:none">
<div class="k-card-b">
<b style="font-size:14.5px">Getting started guide</b>
<p style="margin-top:6px;font-size:13px;line-height:1.75;color:var(--k-ink-2)">From zero to a working part in three steps — tokens, copy, paste.</p>
</div>
</a>Usage
The default box for grouped content. If a thing has a title, a body and actions, it is a card; if it only has a body, use a plain section.
Accessibility
A card is a region, not a landmark: give the page real headings and let the card carry an aria-label only when it needs a name.
Used in these blocks
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Carousel beta
A row of panels that scrolls like it means it — snap points, real buttons, no autoplay.