Card

Card defines how EnterUI handles a structured surface for grouped product content, including default structure, accessible states, and token-driven styling.

#Default usage

<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>

#Import

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

#Patterns

#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.