docs

API reference

Headless card is a slot-only primitive surface. It adds stable data-slot hooks and otherwise leaves semantics, content, and interaction flow to your markup.

Root and slots

Attach the directives to the elements that already make sense for your content model rather than wrapping everything in non-semantic containers.

<article tngCard>
  <div tngCardMedia>...</div>
  <header tngCardHeader>
    <h3 tngCardTitle>Roadmap update</h3>
    <p tngCardDescription>Plan next-quarter work and owners.</p>
  </header>
  <section tngCardContent>...</section>
  <hr tngCardDivider />
  <footer tngCardFooter>
    <a tngCardLink href="/roadmap">Open board</a>
    <div tngCardActions>...</div>
  </footer>
</article>

Directive	Selector	Slot	Purpose
`TngCard`	`[tngCard]`	`card`	Root container for the grouped content surface.
`TngCardHeader`	`[tngCardHeader]`	`card-header`	Heading wrapper for title and description content.
`TngCardTitle`	`[tngCardTitle]`	`card-title`	Primary heading hook.
`TngCardDescription`	`[tngCardDescription]`	`card-description`	Supporting summary or metadata text.
`TngCardMedia`	`[tngCardMedia]`	`card-media`	Media wrapper for imagery, charts, or preview surfaces.
`TngCardContent`	`[tngCardContent]`	`card-content`	Main body copy or owner-authored custom layout.
`TngCardDivider`	`[tngCardDivider]`	`card-divider`	Visual separation between regions.
`TngCardFooter`	`[tngCardFooter]`	`card-footer`	Footer row for links, meta, and actions.
`TngCardLink`	`[tngCardLink]`	`card-link`	Inline focusable link hook within the footer area.
`TngCardActions`	`[tngCardActions]`	`card-actions`	Action grouping hook for aligned button rows.

Owner responsibilities

Choose semantic host elements such as article, header, and footer.
Author all visual state, including emphasis, density, hover treatment, and elevation.
Manage any interaction model yourself when the full card or inner regions are clickable.
Provide meaningful accessible names for linked cards, inline actions, and media alternatives.