Card
Flexible container with Storm's border-driven identity. 3 variants.
Usage
1import { Card, CardBody } from '@storm-ds/ui'23<Card>4 <CardBody>Content here</CardBody>5</Card>Variants
Outlined
Default card with border
Filled
Filled background
Ghost
Transparent card
With Sections
Card Title
A card with header, body, and footer sections.
1<Card>2 <CardHeader>3 <h3>Card Title</h3>4 </CardHeader>5 <CardBody>6 <p>Main content area.</p>7 </CardBody>8 <CardFooter>9 <Button size="sm">Action</Button>10 </CardFooter>11</Card>With Title and Description
Design System
Build consistent interfaces with reusable tokens and components.
Lightning Fast
Optimized for Next.js with zero client-side JS by default.
1<Card>2 <CardBody>3 <CardTitle>Project Setup</CardTitle>4 <CardDescription>Configure your project settings and preferences.</CardDescription>5 </CardBody>6</Card>Interactive
Team Plan
Up to 10 members
$29/mo
Pro Plan
Unlimited members
$79/mo
Enterprise
Custom solutions
Custom
1<Card interactive>2 <CardBody>3 <CardTitle>Click me</CardTitle>4 <CardDescription>This card has hover and pointer styles.</CardDescription>5 </CardBody>6</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'outlined' | 'filled' | 'ghost' | 'outlined' | Card style variant |
| interactive | boolean | false | Adds hover effect and cursor pointer |
| className | string | - | Custom classes (overrides via tailwind-merge) |
Use with AI
Create a Next.js component using Storm UI's Card. Import: `import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from '@storm-ds/ui'`. Variants: outlined (border), filled (muted bg), ghost (transparent). Sub-components: CardHeader, CardBody, CardFooter, CardImage, CardTitle, CardDescription. Use the `interactive` prop to add hover effect and cursor pointer for clickable cards. Example: `<Card interactive><CardBody><CardTitle>Title</CardTitle><CardDescription>Description</CardDescription></CardBody></Card>`