Card

Overview

Card is a compound component for grouping related content into a surfaced container. It is built from a set of composable parts — Card (the wrapper) plus CardHeader, CardTitle, CardDescription, CardContent, and CardFooter — so you only include the sections you need. A content-only card is the most common usage.

Cards sit on the elevation scale via the elevation prop (defaulting to raised). Passing an onClick handler makes the card clickable and adds a hover gradient.

Usage

Import the parts you need:

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter,
} from "@eqtylab/equality";

A minimal, content-only card:

<Card>
  <CardContent>Card content</CardContent>
</Card>

Variants

Content only (most used)

Header only

Basic card

With footer

Usage

<Card>
  <CardHeader className="border-border border-b">
    <CardTitle>Card with Footer</CardTitle>
    <CardDescription>Includes footer actions</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm">This is the main content area of the card.</p>
  </CardContent>
  <CardFooter>
    <Button variant="primary" size="sm">
      Primary Action
    </Button>
  </CardFooter>
</Card>

Interactive (hover)

Passing an onClick handler makes the card clickable and adds a hover gradient. This works with any composition, including content-only cards.

Usage

<Card onClick={() => handleSelect()}>
  <CardContent>This card is clickable.</CardContent>
</Card>

The hover gradient can be restyled with the hoverGradientClassName prop.

Elevations

Use the elevation prop with the ELEVATION constant to place the card on the elevation scale. raised is the default.

Sunken

Base

Raised (default)

Overlay

Usage

import { Card, CardContent, ELEVATION } from "@eqtylab/equality";

<Card elevation={ELEVATION.SUNKEN}>
  <CardContent>Sunken card</CardContent>
</Card>;

Slots

Compose a card from the following parts. All are optional except that content generally lives inside CardContent.

Props

These props apply to the top-level Card. The subcomponents accept standard div attributes (including className).