Card
The Card component provides a flexible container for displaying content.
Source
LLM docs
Package
Examples
2
Properties
50
Playground
Basics
Compose card content with spacing primitives and a primary action for quick scenarios.
Loading demo…
import { Block, Button, Card, Text } from '@plocks/ui';
export function Demo() {
return (
<Card p="lg" radius="lg" shadow="md" maw={320}>
<Block>
<Block>
<Text variant="small" c="muted">
Upcoming match
</Text>
<Text variant="h6">Falcons at Bears</Text>
</Block>
<Text c="muted">
Kickoff is set for 7:30 PM with rain in the forecast. Review the lineup and
travel logistics before departure.
</Text>
<Button size="sm" variant="filled">
View itinerary
</Button>
</Block>
</Card>
);
}Variants
Tour the available card
variant treatments to pick the right surface style for your layout.Loading demo…
import { Block, Card, Text } from '@plocks/ui';
const VARIANTS = ['filled', 'outline', 'elevated', 'subtle', 'ghost', 'gradient'] as const;
export function Demo() {
return (
<Block fullWidth>
{VARIANTS.map((variant) => (
<Card key={variant} variant={variant} p="lg" radius="lg">
<Text c={variant === 'gradient' ? 'white' : undefined}>{variant}</Text>
</Card>
))}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources