Card
A bordered surface with an optional header, body and footer, for a summary, a setting or a view of your own in a reply.
-
.aparte-card
On this page
html
<div class="aparte-card">
<div class="aparte-card__header">Usage this month</div>
<div class="aparte-card__body">
<p>412 000 tokens across 38 conversations.</p>
</div>
<div class="aparte-card__footer">Resets on the 1st.</div>
</div>.aparte-card is a surface with a border and rounded corners, split into an optional
__header, a __body and an optional __footer. It is the natural frame for a
view of your own inside a reply: a forecast, an order, a summary.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-card-radius | var(--aparte-radius-xl) |
--aparte-card-header-padding | var(--aparte-space-4) var(--aparte-space-5) |
--aparte-card-body-padding | var(--aparte-space-5) |
--aparte-card-footer-padding | var(--aparte-space-4) var(--aparte-space-5) |
--aparte-card-header-font-size | var(--aparte-font-size-base) |
Classes
Section titled “Classes”.aparte-card · .aparte-card__body · .aparte-card__footer · .aparte-card__header
Accessibility
Section titled “Accessibility”- A card is a box, not a landmark: give its title a real heading level when the card is a section of the page, and make the whole card a link only when it leads to one place.
Related
Section titled “Related”- Custom view — a card drawn in a reply.
- Popover — a surface that floats above the page.