Card overview

Headless card gives you stable structural slots for grouped content while keeping markup, semantics, and the entire visual contract under your control.

Imports

Import only the slots you need for the card shape your feature owns.

import {
  TngCard,
  TngCardHeader,
  TngCardTitle,
  TngCardDescription,
  TngCardContent,
  TngCardFooter,
  TngCardActions,
} from '@tailng-ui/primitives';

Basic composition

Apply the directives to semantic elements like article, header, section, and footer.

<article tngCard>
  <header tngCardHeader>
    <h3 tngCardTitle>Release status</h3>
    <p tngCardDescription>Production rollout is complete and monitoring is stable.</p>
  </header>

  <section tngCardContent>
    <p>Latency is below target across all regions.</p>
  </section>

  <footer tngCardFooter>
    <div tngCardActions>
      <button type="button">View report</button>
      <button type="button">Promote</button>
    </div>
  </footer>
</article>

Accessibility baseline

• Use semantic regions so screen-reader users get a meaningful content outline.
• Keep the card itself non-interactive unless the entire surface truly behaves like one action.
• Preserve a natural tab order for links, buttons, and other controls inside the footer.