API reference
Card is a structural surface primitive with optional wrapper components for consistent visual defaults.
tngCard and slot directives (primitives)
Attach directives to semantic elements to define the card structure while keeping full markup ownership.
Primitive attachment
html
<article tngCard>
<header tngCardHeader>
<h3 tngCardTitle>Card title</h3>
<p tngCardDescription>Card description</p>
</header>
<section tngCardContent>Body content</section>
<footer tngCardFooter>
<div tngCardActions>
<button type="button">Action</button>
</div>
</footer>
</article>
| Directive | Selector | Data slot | Purpose |
|---|---|---|---|
TngCard | [tngCard] | card | Root container for grouped content. |
TngCardHeader | [tngCardHeader] | card-header | Top metadata section. |
TngCardTitle | [tngCardTitle] | card-title | Primary heading hook. |
TngCardDescription | [tngCardDescription] | card-description | Supporting summary text. |
TngCardContent | [tngCardContent] | card-content | Main body region. |
TngCardFooter | [tngCardFooter] | card-footer | Footer container for meta/actions. |
TngCardMedia | [tngCardMedia] | card-media | Image/video slot wrapper. |
TngCardActions | [tngCardActions] | card-actions | Action row alignment hook. |
TngCardDivider | [tngCardDivider] | card-divider | Separator hook between sections. |
TngCardLink | [tngCardLink] | card-link | Focusable link hook inside card surfaces. |
tng-card wrappers (components)
Wrapper components apply baseline styles while preserving primitive slot contracts and composition.
Component attachment
html
<tng-card variant="outline" tone="neutral" padding="md">
<tng-card-header>
<tng-card-title>Card title</tng-card-title>
<tng-card-description>Card description</tng-card-description>
</tng-card-header>
<tng-card-content>Body content</tng-card-content>
<tng-card-footer>
<tng-card-actions>
<button type="button">Action</button>
</tng-card-actions>
</tng-card-footer>
</tng-card>
| Surface | Input | Type | Default |
|---|---|---|---|
tng-card | variant | 'ghost' | 'outline' | 'solid' | 'solid' |
tng-card | tone | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' |
tng-card | padding | 'none' | 'sm' | 'md' | 'lg' | 'md' |
tng-card | interactive | boolean | false |
tng-card | elevated | boolean | false |
tng-card-actions | align | 'start' | 'end' | 'end' |
tng-card-link | href | string | null | '#' |
tng-card-link | disabled | boolean | false |