Get Started
Core ComponentsUpdated May 3, 2026

Card

A structured surface for grouped product content.

#Default usage

Card anatomyCompose header, content, and footer only when each region has a job.

Release candidate

Ready for final review.

Stable base

#Usage

Code
import {
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <Card className="docs-preview-card">
      <CardHeader>
        <CardTitle>Release candidate</CardTitle>
        <CardDescription>Ready for final review.</CardDescription>
      </CardHeader>
      <CardContent>
        <Badge variant="success">Stable base</Badge>
      </CardContent>
      <CardFooter>
        <Button size="sm" variant="secondary">Review</Button>
        <Button size="sm">Publish</Button>
      </CardFooter>
    </Card>
  );
}

#Patterns

Compact contentCard can also be a simple neutral container.

Use the smallest card anatomy that communicates the content clearly.

#Accessibility

Card renders semantic-neutral div regions. Choose meaningful headings in CardTitle and avoid using cards as buttons unless you compose an accessible interactive element inside.

#API

  • Card, CardHeader, CardContent, and CardFooter extend div props.
  • CardTitle extends heading props.
  • CardDescription extends paragraph props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page