1 min read

Card

The Card component is a versatile container component that helps organize and group related content.

Basic Usage

Card Variants

Default

Outline

Elevated

Prop	Type	Default	Description
variant	'default' \| 'outline' \| 'elevated'	'default'	Style variant
className	string	undefined	Additional CSS classes
children	ReactNode	undefined	Card content

1 min read

The Card component is a versatile container component that helps organize and group related content.

Card Variants

Default

Outline

Elevated

Prop	Type	Default	Description
variant	'default' \| 'outline' \| 'elevated'	'default'	Style variant
className	string	undefined	Additional CSS classes
children	ReactNode	undefined	Card content

import { Card } from '@/components/atoms/card';

function Example() { return ( <Card> <h3>Card Title</h3> <p>Card content goes
here</p> </Card> ); }