Card
cardGroups related content into header, body, and footer regions.
Usage
Basic usage
outline stroke card, composed of three sections: CardHeader / CardBody / CardFooter.
<Card variant="outline" className="w-64">
<CardHeader>Hulian Card</CardHeader>
<CardBody> Ancestral temple jade, extremely beautiful and useful. Appearance + ease of use are the primary productivity. </CardBody>
<CardFooter>footer District</CardFooter>
</Card>Floating Card
elevated replaces the solid border with shadow, and the shadow deepens in hover.
<Card variant="elevated" className="w-64">
<CardHeader>Hulian Card</CardHeader>
<CardBody> Ancestral temple jade, extremely beautiful and useful. Appearance + ease of use are the primary productivity. </CardBody>
<CardFooter>footer District</CardFooter>
</Card>Highlight Card
featured Use primary double-line stroke to highlight recommended items, aligned within the grid without offset.
<Card variant="featured" className="w-64">
<CardHeader>Hulian Card</CardHeader>
<CardBody> Ancestral temple jade, extremely beautiful and useful. Appearance + ease of use are the primary productivity. </CardBody>
<CardFooter>footer District</CardFooter>
</Card>None footer
All three sections are optional, only Header + Body is also established.
<Card variant="outline" className="w-64">
<CardHeader>Hulian Card</CardHeader>
<CardBody> Ancestral temple jade, extremely beautiful and useful. Appearance + ease of use are the primary productivity. </CardBody>
</Card>When to use
Use Card to group related content in a bordered or elevated container. Use List for an item stream or grid, and Descriptions for key-value details. Card is a structural shell with no business behavior.
Import
import { Card, CardHeader, CardBody, CardFooter } from "@hulianui/ui"Props
CardProps inherits HTMLAttributes<HTMLDivElement> and adds a CVA variant:
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "outline" | "elevated" | "featured" | "outline" | Border, raised shadow, or emphasized appearance. |
CardHeader, CardBody, and CardFooter accept native div properties and children.
Example
<Card variant="elevated" className="w-64">
<CardHeader>Hulian Card</CardHeader>
<CardBody>Designed for beauty and practical use.</CardBody>
<CardFooter>Footer</CardFooter>
</Card>Usage notes
- Do not wrap loading skeletons in Card. [[loading-skeletons-are-chromeless-dont-wrap-in-card]] explains why shimmer placeholders conventionally avoid borders and shadows.
- A fixed outer minimum height combined with flex stretching can push a final metadata row outside the card background; see [[grid-card-button-tail-row-leaks-outside-when-outer-min-height]].
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Card variant="outline">
<CardHeader>Hulian Card</CardHeader>
<CardBody>...</CardBody>
<CardFooter>footer District</CardFooter>
</Card>