card
A surface container for grouping related content.
A headless, purely structural card. Compose it from the parts, or drop any content inside. It carries no behavior — just a styled surface with header, body, and footer regions.
Installation
pnpm add @fluixi-ui/card
Usage
import { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter } from '@fluixi-ui/card';
<Card>
<CardHeader>
<CardTitle>Invite your team</CardTitle>
<CardDescription>Add up to 5 members.</CardDescription>
</CardHeader>
<CardBody>Everyone on your plan can be invited.</CardBody>
<CardFooter>
<button>Send invites</button>
</CardFooter>
</Card>
Parts
| Part | Description |
|---|---|
Card |
The surface <div>. |
CardHeader |
Header region (title + description). |
CardTitle |
The title (<h3>). |
CardDescription |
Supporting text (<p>). |
CardBody |
Main content region. |
CardFooter |
Footer, typically actions. |
All parts forward class, style, and other props to the underlying element.
Glow
Card accepts glow (and glowSide) for an animated gradient border ring — the
same shared, element-agnostic effect as Button
and Surface, including the custom --flx-glow-* colours and hover
behaviour.
<Card glow>…</Card>
<Card glow glowSide="bottom">…</Card>
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.