PUI.Card provides a composable container with header, title, description,
action, content, and footer primitives.
Import
use PUI
# or
import PUI.Card
Usage
<.card>
<.card_header>
<.card_title>Team Members</.card_title>
<.card_description>Manage your team.</.card_description>
<.card_action>
<.button size="sm">Add member</.button>
</.card_action>
</.card_header>
<.card_content>Member list.</.card_content>
</.card>
Card Demo
Card Title
This is a card description.
The card component is a versatile container for grouping related content.
heex
<PUI.Card.card class="max-w-md">
<PUI.Card.card_header>
<PUI.Card.card_title>Card Title</PUI.Card.card_title>
<PUI.Card.card_description>
This is a card description.
</PUI.Card.card_description>
</PUI.Card.card_header>
<PUI.Card.card_content>
<p class="text-sm text-muted-foreground">
The card component is a versatile container for grouping related content.
</p>
</PUI.Card.card_content>
<PUI.Card.card_footer class="flex justify-end gap-2">
<.button variant="outline" size="sm">Cancel</.button>
<.button size="sm">Save</.button>
</PUI.Card.card_footer>
</PUI.Card.card>API Reference
| Component | Attributes | Description |
|---|---|---|
card/1 |
class, global HTML attributes |
Main card container |
card_header/1 |
— | Header layout |
card_title/1 |
class |
Card title |
card_description/1 |
class |
Supporting description |
card_action/1 |
— | Header action |
card_content/1 |
— | Main content |
card_footer/1 |
class |
Footer area |