Card

Card is the foundational layout component in the PDL design system. It is used to group related content, display status information, and create structured sections across documentation and product interfaces.

Basic Usage

<Card title="System Status" variant="success">
  All services are operating normally.
</Card>

System Status

All services are operating normally.

All Appearances

<Card appearance="flat" title="Flat">Minimal visual weight</Card>
<Card appearance="outlined" title="Outlined">Default bordered style</Card>
<Card appearance="filled" title="Filled" variant="info">Subtle background</Card>
<Card appearance="elevated" title="Elevated">Stronger separation</Card>
<Card appearance="ghost" title="Ghost">Very subtle</Card>

Flat

Minimal visual weight

Outlined

Default bordered style

Filled

Subtle background

Elevated

Stronger separation

Ghost

Very subtle

All Semantic Variants

<Card variant="default" title="Default">Neutral information</Card>
<Card variant="info" title="Info">Informational content</Card>
<Card variant="success" title="Success">Positive status</Card>
<Card variant="warning" title="Warning">Caution needed</Card>
<Card variant="danger" title="Danger">Critical issue</Card>
<Card variant="neutral" title="Neutral">Muted state</Card>

Default

Neutral information

Info

Informational content

Success

Positive status

Warning

Caution needed

Danger

Critical issue

Neutral

Muted state

Compound Component Example

<Card>
  <Card.Header>
    <Card.Icon>🔒</Card.Icon>
    <Card.Title>Security Scan Complete</Card.Title>
    <Card.Badge variant="success">Passed</Card.Badge>
  </Card.Header>
  <Card.Body>
    No critical vulnerabilities were found in the latest scan.
  </Card.Body>
  <Card.Footer>
    Scanned 2 minutes ago
  </Card.Footer>
</Card>

Props

Prop	Type	Default	Description
title	string	—	Title shown in header
variant	'default' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'	'default'	Semantic color
appearance	'flat' | 'outlined' | 'filled' | 'elevated' | 'ghost'	'outlined'	Visual style
href	string	—	Makes the card a link
loading	boolean	false	Shows skeleton state
collapsible	boolean	false	Makes body collapsible
disabled	boolean	false	Disables interaction

Accessibility

• Proper semantic structure when using compound components
• Keyboard focus visible when href or onClick is provided
• aria-busy when in loading state

Best Practices

• Use elevated for dashboard-style cards
• Prefer compound API for complex cards
• Keep titles concise (1 line)

Related Components

• InfoBlock — For more structured reference content
• Banner — For page-level announcements