Card

Card groups related content into a structured surface. Compose its header, content, and footer regions, and select a visual treatment with variant.

#Default usage

<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,
  Text,
} from "@froggdesign/enter-ui-react";

#Patterns

#Live previews

Use variant="preview" for component examples or interactive tools. The header stays on the card surface, with a quiet divider above the sunken demo area. The content starts at 180px tall and grows with its children. Overflow stays visible so in-place suggestions and other floating controls can extend beyond the demo surface. It has no fixed height or vertical clipping. Nested cards retain their own variant.

<Card variant="preview">
  <CardHeader>
    <CardTitle>Notification preferences</CardTitle>
    <CardDescription>Choose whether to receive release updates.</CardDescription>
  </CardHeader>
  <CardContent>
    <VStack align="stretch" fullWidth gap={12}>
      <HStack gap={8}>
        <Checkbox id="card-preview-email" defaultChecked />
        <Label htmlFor="card-preview-email">Email me about new releases</Label>
      </HStack>
      <Text size="sm" tone="muted">Change the preference to try the control.</Text>
    </VStack>
  </CardContent>
</Card>

Import Checkbox, HStack, Label, and VStack from @froggdesign/enter-ui-react alongside the card primitives. Preview padding reduces on small screens. Use Grid and GridItem colSpan="full" when a table or multi-column example needs a wider area. Tables already own their horizontal scrolling. For other intentionally wide static demos, wrap only that content in ScrollArea orientation="horizontal". Keep controls with in-place floating menus outside a scroll container.

#Variants

#Media galleries

Use variant="media" for product, template, or article galleries. Place Media first, followed by the header, content, and footer. The preview reaches the card edges, content grows to fill the grid row, and footer actions stay aligned even when descriptions wrap differently. The card adds no tab stop or hover animation; its link remains the keyboard target. Text is never clipped to force a height.

<Card variant="media">
  <Media src="/workspace.png" alt="Workspace preview" aspectRatio={1.6} rounded={false} />
  <CardHeader>
    <CardTitle>Team workspace</CardTitle>
    <CardDescription>Projects and tasks</CardDescription>
  </CardHeader>
  <CardContent><Text size="sm" tone="muted">Plan a release and follow progress.</Text></CardContent>
  <CardFooter><Link href="/workspace" variant="button">Explore workspace</Link></CardFooter>
</Card>

Import Grid, Media, and Link from the package root alongside the card primitives. Use matching Media aspect ratios across a gallery. The footer makes its direct Link fill the available width; other footer children keep their sizing. The existing default, plain, and preview variants keep their original layout.

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

Interactive children keep their own keyboard behavior. A preview card does not add a tab stop. For an independently scrollable demo, give its ScrollArea tabIndex={0}, role="region", and an accessible name so keyboard users can focus and scroll that region.

#API

• Card.variant: "default" (bordered with soft elevation), "plain" (transparent, without a border or shadow), or "preview" (separate header and demo surface with visible overflow), or "media" (edge-to-edge media, flexible content, and aligned footer actions). Defaults to "default".
• Card, CardHeader, CardContent, and CardFooter extend div props.
• CardTitle extends heading props.
• CardDescription extends paragraph props.

#Styling

Select presentation through variant and compose layout with EnterUI primitives. Card owns its padding, surfaces, border, and responsive preview behavior through .eui-* classes and --eui-* theme tokens; consumers do not need custom styles.