Card

Stable

Versatile container component with header, content, and footer sections.

Import

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent, 
  CardFooter 
} from '@brutal-ui/react';

Basic Usage

Card Title

This is the card content. You can put any content here.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This is the card content.</p>
  </CardContent>
  <CardFooter>
    <Button variant='primary'>Action</Button>
  </CardFooter>
</Card>

Variants

Default

8px shadow

Elevated

12px shadow

Bordered

No shadow

<Card variant='default'>...</Card>
<Card variant='elevated'>...</Card>
<Card variant='bordered'>...</Card>

With Badge

Product Card

New

Check out our latest product release!

Featured

Props

Prop	Type	Default	Description
variant	string	"default"	Card style variant
padding	string	"md"	Padding size: none, sm, md, lg