Card

A rounded card component with a shadow.

West Coast IPA

American IPA - 7.2% ABV

Bold and bitter with pine and citrus hop character. Crisp, dry finish showcasing Cascade, Centennial, and Chinook hops.

IBU: 68

SRM: 8

Available in 16oz cans and on draft 
<Card title="West Coast IPA" subtitle="American IPA - 7.2% ABV">
    <CardBody>
        <p className="text-sm text-muted-foreground mb-4">
            Bold and bitter with pine and citrus hop character. Crisp, dry finish 
            showcasing Cascade, Centennial, and Chinook hops.
        </p>
        <div className="flex gap-4 text-sm">
            <div>
                <span className="font-medium">IBU:</span> 68
            </div>
            <div>
                <span className="font-medium">SRM:</span> 8
            </div>
        </div>
    </CardBody>
    <CardFooter>
        <span className="text-sm text-muted-foreground">
          Available in 16oz cans and on draft
        </span>
    </CardFooter>
</Card>

Overview

The Card component set provides a flexible container for displaying content in a clear and concise way. It consists of four components: Card (main container), CardHeader (for titles and subtitles), CardBody (for main content), and CardFooter (for actions or metadata). These components are designed to be used together to create beautiful, consistent card layouts throughout your application.

Card

Description

The main container component that wraps all card elements. It provides the card’s visual styling including borders, shadows, and rounded corners.

Card Title

Card description

Card content goes here

<Card title="Card Title" subtitle="Card description">
    <CardBody>
        Card content goes here
    </CardBody>
</Card>

Props

The Card component accepts the following props:

PropTypeDefaultDescription
titlestring-The card’s title
subtitlestring-Additional descriptive text for the card
bodybooleanfalseWhen true, adds padding to the card without needing a CardBody
fullbooleanfalseWhen true, removes spacing/border/shadow/rounded corners on mobile
classNamestring-Additional CSS class names
childrenReactNode-Content of the card

CardHeader

Description

A component for displaying a title and optional subtitle at the top of a card. Uses Heading5 component for consistent typography.

Card Title

Card description

Card content goes here

<Card>
    <CardHeader title="Card Title" subtitle="Card description" />
    <CardBody>
        Card content goes here
    </CardBody>
</Card>

Props

The CardHeader component accepts the following props:

PropTypeDefaultDescription
titlestring-The header’s title text
subtitlestring-Optional descriptive text
classNamestring-Additional CSS class names
childrenReactNode-Custom header content (used when not using title/subtitle)

CardBody

Description

A container for the main content of a card with appropriate padding.

Card Title

This is the main content area of the card. You can place any content here.

<Card title="Card Title">
    <CardBody>
        This is the main content area of the card.
        You can place any content here.
    </CardBody>
</Card>

Props

PropTypeDefaultDescription
classNamestring-Additional CSS class names
childrenReactNode-Content of the card body

CardFooter

Description

A component for displaying actions, metadata, or additional information at the bottom of a card.

Card Title

This is the main content area of the card.

Last updated: April 1, 2025
<Card title="Card Title">
    <CardBody>
        This is the main content area of the card.
    </CardBody>
    <CardFooter>
        <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">
              Last updated: April 1, 2025
            </span>
            <Button className="text-sm">Read more</Button>
        </div>
    </CardFooter>
</Card>

Props

PropTypeDefaultDescription
classNamestring-Additional CSS class names
childrenReactNode-Content of the card footer

Simple Card with Body Flag

Simple Card

This card has padding without needing a CardBody component. The body flag adds padding to the card container directly.

<Card title="Simple Card" body>
    This card has padding without needing a CardBody component.
    The body flag adds padding to the card container directly.
</Card>

Card with Custom Header

Custom Header

This card has a custom header with an action button.

<Card>
    <CardHeader>
        <div className="flex items-center justify-between">
            <Heading3>Custom Header</Heading3>
            <Button className="text-sm">Action</Button>
        </div>
    </CardHeader>
    <CardBody>
        This card has a custom header with an action button.
    </CardBody>
</Card>

Styling

The Card components use Tailwind CSS for styling. The default styles include:

  • Card: Rounded borders, subtle shadow, and border
  • CardHeader: Top padding with bottom border
  • CardBody: Standard padding with flexible growth
  • CardFooter: Standard padding with top border

You can customize the appearance by adding your own className prop to any of the Card components.

Accessibility

The Card component follows best practices for accessibility:

  • Use meaningful titles that clearly describe the card’s purpose
  • Ensure sufficient color contrast for all text within cards
  • When using cards as interactive elements (like links or buttons), ensure they have appropriate keyboard focus states
  • Use appropriate heading levels (h1-h6) within cards to maintain proper document hierarchy

Cards are primarily visual containers, so ensure that the content within them is accessible and properly structured.