Card

A container with optional header, body, and footer. Use interactive for clickable cards.

Import

import { Card, CardHeader, CardBody, CardFooter } from '@aspect/react';

Compound components

| Part | Purpose | | ------------ | -------------------------------------- | | Card | Container | | CardHeader | Title + description with bottom border | | CardBody | Main content area | | CardFooter | Actions area with top border |

Interactive

<Card interactive>
  <CardHeader title="Click me" />
</Card>

Props

| Prop | Type | Default | Description | | ------------- | --------- | ------- | -------------------------------- | | interactive | boolean | false | Hover effect for clickable cards |

CardHeader accepts title and description props.

Guidelines

Do:

• Use cards to group related content
• Keep card titles short

Don't:

• Don't nest cards inside cards
• Don't use interactive cards without an action destination