Introduction

Cards are versatile containers for displaying grouped content. They support headers, footers, images, and various layout configurations.

Installation

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';

Usage

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card description.</CardDescription>
</CardHeader>
<CardContent>
  <p>Card content goes here.</p>
</CardContent>
<CardFooter>
  <Button>Action</Button>
</CardFooter>
</Card>

Examples

Default

Card Title

Card description goes here.

Cards are flexible content containers. They include options for headers, footers, content, and images.

CardDefault

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';

export default function Component() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here.</CardDescription>
      </CardHeader>
      <CardContent><p className="text-sm">Card content.</p></CardContent>
      <CardFooter><Button size="sm">Action</Button></CardFooter>
    </Card>
  );
}

With Image

Image Placeholder

Card with Image

Supporting text below the title.

Some quick example text to build on the card title and make up the bulk of the card content.

CardWithImage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function Component() {
  return (
    <Card className="w-[350px] overflow-hidden">
      <div className="h-48 bg-neutral-100">Image Placeholder</div>
      <CardHeader>
        <CardTitle>Card with Image</CardTitle>
        <CardDescription>Supporting text.</CardDescription>
      </CardHeader>
      <CardContent><p className="text-sm">Content text.</p></CardContent>
      <CardFooter className="gap-2">
        <Button size="sm">Primary</Button>
        <Button size="sm" variant="outlined">Secondary</Button>
      </CardFooter>
    </Card>
  );
}

Simple

A card with only body content, no header or footer.

This is a simple card with only body content. No header or footer needed.

CardSimple

import { Card, CardContent } from '@/components/ui/card';

export default function Component() {
  return (
    <Card className="w-[350px]">
      <CardContent className="pt-6">
        <p className="text-sm">Simple card with only body content.</p>
      </CardContent>
    </Card>
  );
}

Variants

outlined is the default. elevated keeps the border and adds the UX4G card shadow.

Outlined

The default. A 1px neutral-100 border, no shadow.

Elevated

Same border, plus the UX4G card shadow.

CardElevated

import { Button } from '@/components/ui/button';
import {
import { Body2 } from '@/components/ui/typography';

export default function Component() {
  return (
    <div className='grid w-full max-w-2xl gap-6 sm:grid-cols-2'>
      <Card variant='outlined'>
        <CardHeader>
          <CardTitle>Outlined</CardTitle>
        </CardHeader>
        <CardContent>
          <CardDescription>The default. A 1px neutral-100 border, no shadow.</CardDescription>
        </CardContent>
      </Card>
      <Card variant='elevated'>
        <CardHeader>
          <CardTitle>Elevated</CardTitle>
        </CardHeader>
        <CardContent>
          <CardDescription>Same border, plus the UX4G card shadow.</CardDescription>
        </CardContent>
      </Card>
    </div>
  );
}

Grid Layout

Cards arranged in a responsive grid.

Primary

Card description

Content for the primary card.

Secondary

Card description

Content for the secondary card.

Tertiary

Card description

Content for the tertiary card.

CardGrid

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';

export default function Component() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {['Primary', 'Secondary', 'Tertiary'].map((title) => (
        <Card key={title}>
          <CardHeader><CardTitle>{title}</CardTitle><CardDescription>Card description</CardDescription></CardHeader>
          <CardContent><p className="text-sm">Content for the card.</p></CardContent>
        </Card>
      ))}
    </div>
  );
}