Card
LayoutElevated surface with title, body copy, and footer actions for dashboards and settings.
Rendering preview
<article class="content-card"> <header class="content-card__head"> <h2 class="content-card__title">Usage this month</h2> <span class="content-card__badge">Billing</span> </header> <p class="content-card__body"> You’ve used <strong>42%</strong> of your included API quota. Overage is billed at the rate shown in your plan. </p> <footer class="content-card__foot"> <button type="button" class="cc-btn cc-btn--primary">View invoice</button> <button type="button" class="cc-btn cc-btn--ghost">Download CSV</button> </footer></article>