Card

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<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>

A surface with optional header/body/footer

Classes

.aparte-card · .aparte-card__body · .aparte-card__footer · .aparte-card__header

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.