Card ​

The block most screens are made of: a darker surface with padding, and an optional header and footer.

<OCard label="Usage" title="Requests">
  <template #actions>
    <OBadge>Pro</OBadge>
  </template>

  <span class="number">131.6k</span>
  <OProgress :value="72" aria-label="Plan usage" />

  <template #footer>72% of the plan, resets on Monday.</template>
</OCard>

Everything but the content is optional. A card with no header and no footer is just padding around what you put in it.

Header ​

• label — a small caption: what the card is about. The quiet way to name a card, and the one to reach for first.
• title — a heading in display type, for a card that is a section of the page. It is an <h3>; set title-as to the level that fits your page.
• actions — the slot at the right end: a badge, a button, a menu.

<OCard label="Endpoints">
  <template #actions>
    <OButton icon size="sm" variant="ghost" aria-label="More"><Ellipsis /></OButton>
  </template>
  Only a label and an action.
</OCard>

<OCard title="Billing" title-as="h2">Only a title.</OCard>

Footer ​

What comes after the content: a total, a note, a link to more. A thin line sets it apart — a line between two parts of one card, not a border around it.

Signal ​

The ring from Surface: accent for the main thing, danger for something at stake. One per screen, rarely two.

<OCard signal="accent" label="Next release">v1.4.1</OCard>
<OCard signal="danger" label="Quota runs out in">3 days</OCard>

Props and slots ​