Card
Surface container for grouping related content. Border or shadow elevation.
Examples
Border variant
Default card with a subtle border.
Border cards are used for neutral content groupings.
Shadow variant
Elevated card with a drop shadow.
Shadow cards draw attention without a visible border.
With header and footer
Structured card with a title, body, and action footer.
Interactive hover
Card with hover state signalling it is clickable.
Nested cards
Cards inside cards for layered information hierarchy.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Card } from "@rokle/components";import { Card } from "@rokle/components";
export function Example() {
return (
<div className="flex gap-4">
<Card variant="border">
<h3>Border variant</h3>
<p>Uses a subtle border for definition.</p>
</Card>
<Card variant="shadow">
<h3>Shadow variant</h3>
<p>Uses elevation shadow for depth.</p>
</Card>
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "border" | "shadow" | "border" | Elevation style. |
| children | ReactNode | - | Card content. |