Card

Cards display related content and actions in a structured container with header, body, and footer sections. The Card component also supports a CardMedia subcomponent for displaying images with configurable aspect ratios. All the sections are optional, allowing for flexible layouts.

Preview

Default

Standard card appearance.

Default styling with subtle shadow.

Primary

Primary color scheme.

Uses primary background color.

Secondary

Secondary color scheme.

Uses secondary background color.

Tertiary

Tertiary color scheme.

Uses tertiary background color.

Gradient

Gradient background.

Features a gradient from secondary to tertiary.

Animated

With hover animation.

Hover to see the translate effect.

With Icon

Icon + title layout

Card featuring an icon in the header.

With Action

Action button in header

Card with an action button positioned in the header.

Preview

Card with Media

Image extends to edges.

Use CardMedia for images with aspect ratio control.

Usage

Default Card

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  Button,
} from "@e-infra/design-system";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>;

Variant Cards

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Primary variant
<Card variant="primary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Primary Card</CardTitle>
    <CardDescription>Uses primary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with primary color scheme.</p>
  </CardContent>
</Card>

// Secondary variant
<Card variant="secondary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Secondary Card</CardTitle>
    <CardDescription>Uses secondary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with secondary color scheme.</p>
  </CardContent>
</Card>

// Tertiary variant
<Card variant="tertiary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Tertiary Card</CardTitle>
    <CardDescription>Uses tertiary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with tertiary color scheme.</p>
  </CardContent>
</Card>

// Gradient variant
<Card variant="gradient" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Gradient Card</CardTitle>
    <CardDescription>Gradient background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Features a gradient from secondary to tertiary colors.</p>
  </CardContent>
</Card>

Card with Animation

tsx

1
2
3
4
5
6
7
8
9
<Card animation="translate" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Animated Card</CardTitle>
    <CardDescription>Hover to see the effect</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This card has a translate animation on hover.</p>
  </CardContent>
</Card>

Card with Action

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Card with Action</CardTitle>
    <CardDescription>Has an action button in the header</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">
        Edit
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>The action button is positioned in the header.</p>
  </CardContent>
</Card>

Card with Icon

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Info } from "lucide-react";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardIcon>
      <Info className="h-8 w-8" />
    </CardIcon>
    <CardTitle>Card with Icon</CardTitle>
    <CardDescription>Icon positioned in the header</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Use CardIcon to display an icon above the title.</p>
  </CardContent>
</Card>;

Card with Media

Use CardMedia to display images that extend to the edges of the card:

tsx

1
2
3
4
5
6
7
8
9
10
<Card className="w-full max-w-sm">
  <CardMedia src="/path/to/image.jpg" alt="Description" aspectRatio="video" />
  <CardHeader>
    <CardTitle>Card with Image</CardTitle>
    <CardDescription>Visual content</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content goes here.</p>
  </CardContent>
</Card>

Aspect Ratios

video (16:9) - Default, ideal for landscape images
square (1:1) - Ideal for profile pictures or detailed views
auto - Natural image dimensions

Custom Image Component (asChild)

Use the asChild prop to render a custom image component (e.g., Next.js Image) while maintaining the CardMedia styling and aspect ratio:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Image from "next/image";

<Card className="w-full max-w-sm">
  <CardMedia asChild aspectRatio="video">
    <Image
      src="/path/to/image.jpg"
      alt="Description"
      width={800}
      height={450}
    />
  </CardMedia>
  <CardHeader>
    <CardTitle>Card with Next.js Image</CardTitle>
    <CardDescription>Using asChild pattern</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Allows framework-specific image optimizations.</p>
  </CardContent>
</Card>;

When asChild is true, CardMedia will clone and render the child element instead of an <img> tag, passing all styling and props to it.

Components

Component	Description
`Card`	Main container
`CardHeader`	Header section
`CardFooter`	Footer section
`CardTitle`	Title element
`CardDescription`	Description element
`CardContent`	Content area
`CardAction`	Action area
`CardIcon`	Icon container
`CardMedia`	Image container with aspect ratio support

Props

Card

Prop	Type	Default	Description
variant	`default` \| `primary` \| `secondary` \| `tertiary` \| `gradient`	`default`	Visual style variant
animation	`static` \| `translate`	`static`	Hover animation behavior
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native div props

CardHeader/CardFooter/CardContent

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native div props

CardMedia

Prop	Type	Default	Description
aspectRatio	`auto` \| `square` \| `video`	`video`	Aspect ratio of the media container
asChild	boolean	`false`	Use a custom image component (e.g., Next.js Image)
alt	string	`""`	Image alt text
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native img props

Responsive Design

Cards are responsive by default. Use w-full with max-w-* utility classes to control the card width:

tsx

1
2
3
4
5
6
7
8
9
// Card that fills container but maxes out at small breakpoint
<Card className="w-full max-w-sm">
  ...
</Card>

// Card with custom max width
<Card className="w-full max-w-100">
  ...
</Card>

Card

Preview

Default

Standard card appearance.

Default styling with subtle shadow.

Primary

Primary color scheme.

Uses primary background color.

Secondary

Secondary color scheme.

Uses secondary background color.

Tertiary

Tertiary color scheme.

Uses tertiary background color.

Gradient

Gradient background.

Features a gradient from secondary to tertiary.

Animated

With hover animation.

Hover to see the translate effect.

With Icon

Icon + title layout

Card featuring an icon in the header.

With Action

Action button in header

Card with an action button positioned in the header.

Preview

Card with Media

Image extends to edges.

Use CardMedia for images with aspect ratio control.

Usage

Default Card

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  Button,
} from "@e-infra/design-system";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>;

Variant Cards

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Primary variant
<Card variant="primary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Primary Card</CardTitle>
    <CardDescription>Uses primary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with primary color scheme.</p>
  </CardContent>
</Card>

// Secondary variant
<Card variant="secondary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Secondary Card</CardTitle>
    <CardDescription>Uses secondary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with secondary color scheme.</p>
  </CardContent>
</Card>

// Tertiary variant
<Card variant="tertiary" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Tertiary Card</CardTitle>
    <CardDescription>Uses tertiary background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content with tertiary color scheme.</p>
  </CardContent>
</Card>

// Gradient variant
<Card variant="gradient" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Gradient Card</CardTitle>
    <CardDescription>Gradient background</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Features a gradient from secondary to tertiary colors.</p>
  </CardContent>
</Card>

Card with Animation

tsx

1
2
3
4
5
6
7
8
9
<Card animation="translate" className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Animated Card</CardTitle>
    <CardDescription>Hover to see the effect</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This card has a translate animation on hover.</p>
  </CardContent>
</Card>

Card with Action

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Card with Action</CardTitle>
    <CardDescription>Has an action button in the header</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">
        Edit
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>The action button is positioned in the header.</p>
  </CardContent>
</Card>

Card with Icon

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Info } from "lucide-react";

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardIcon>
      <Info className="h-8 w-8" />
    </CardIcon>
    <CardTitle>Card with Icon</CardTitle>
    <CardDescription>Icon positioned in the header</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Use CardIcon to display an icon above the title.</p>
  </CardContent>
</Card>;

Card with Media

Use CardMedia to display images that extend to the edges of the card:

tsx

1
2
3
4
5
6
7
8
9
10
<Card className="w-full max-w-sm">
  <CardMedia src="/path/to/image.jpg" alt="Description" aspectRatio="video" />
  <CardHeader>
    <CardTitle>Card with Image</CardTitle>
    <CardDescription>Visual content</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content goes here.</p>
  </CardContent>
</Card>

Aspect Ratios

video (16:9) - Default, ideal for landscape images
square (1:1) - Ideal for profile pictures or detailed views
auto - Natural image dimensions

Custom Image Component (asChild)

Use the asChild prop to render a custom image component (e.g., Next.js Image) while maintaining the CardMedia styling and aspect ratio:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Image from "next/image";

<Card className="w-full max-w-sm">
  <CardMedia asChild aspectRatio="video">
    <Image
      src="/path/to/image.jpg"
      alt="Description"
      width={800}
      height={450}
    />
  </CardMedia>
  <CardHeader>
    <CardTitle>Card with Next.js Image</CardTitle>
    <CardDescription>Using asChild pattern</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Allows framework-specific image optimizations.</p>
  </CardContent>
</Card>;

When asChild is true, CardMedia will clone and render the child element instead of an <img> tag, passing all styling and props to it.

Components

Component	Description
`Card`	Main container
`CardHeader`	Header section
`CardFooter`	Footer section
`CardTitle`	Title element
`CardDescription`	Description element
`CardContent`	Content area
`CardAction`	Action area
`CardIcon`	Icon container
`CardMedia`	Image container with aspect ratio support

Props

Card

Prop	Type	Default	Description
variant	`default` \| `primary` \| `secondary` \| `tertiary` \| `gradient`	`default`	Visual style variant
animation	`static` \| `translate`	`static`	Hover animation behavior
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native div props

CardHeader/CardFooter/CardContent

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native div props

CardMedia

Prop	Type	Default	Description
aspectRatio	`auto` \| `square` \| `video`	`video`	Aspect ratio of the media container
asChild	boolean	`false`	Use a custom image component (e.g., Next.js Image)
alt	string	`""`	Image alt text
className	string	-	Additional CSS classes
...props	React.ComponentProps	-	Native img props

Responsive Design

Cards are responsive by default. Use w-full with max-w-* utility classes to control the card width:

tsx

1
2
3
4
5
6
7
8
9
// Card that fills container but maxes out at small breakpoint
<Card className="w-full max-w-sm">
  ...
</Card>

// Card with custom max width
<Card className="w-full max-w-100">
  ...
</Card>