Overview
tng-card is a container with optional header and footer slots. Use [tngCardHeader] and [tngCardFooter] for those sections; the default slot is the card body. Slot-based micro styling: container, header, body, footer.
Quick example
Basic
<tng-card>
<div tngCardHeader class="font-semibold">Card title</div>
<p class="text-sm">Card body content goes here.</p>
<div tngCardFooter class="text-xs text-muted">Footer</div>
</tng-card>
import { TngCard, TngCardHeader, TngCardFooter } from '@tailng-ui/ui/layout';Card title
Card body content goes here.
Footer
Features
Content projection
Default slot = body. [tngCardHeader] and [tngCardFooter] for optional header/footer.
Class hooks
slot.container, slot.header, slot.body, slot.footer for styling.