Card

Cards group related content and actions. In Nuxt / PLAI use UCard.

Element	Source
Card surface, border, typography	Nuxt UI zinc neutrals
Primary action button	CI brand blue — see Button
Ghost / secondary action	Nuxt UI

Live examples

Default

Three documents uploaded. Last activity yesterday.

Muted variant

Secondary information block with reduced emphasis.

HTML

<article class="ci-card">
  <header class="ci-card__header">
    <h3 class="ci-card__title">Case overview</h3>
  </header>
  <div class="ci-card__body">
    <p>Three documents uploaded.</p>
  </div>
  <footer class="ci-card__footer">
    <button type="button" class="ci-button ci-button--primary">Open case</button>
  </footer>
</article>

Accessibility

Use semantic <article> when the card is a self-contained unit.
Headings inside cards should follow the page outline (do not skip levels).
Footer actions: primary before secondary; see Button.

Button — card actions
Modal — focused overlays