Card

Flexible content containers

DisplayStable

Preview

Interactive preview of the Card component with different variants.

Default Card

This is a default card with subtle border and shadow.

Elevated Card

This card has a stronger shadow for emphasis.

Outlined Card

This card emphasizes the border without shadow.

Installation

Install the package via npm:

bash

npm install apex-design-system

Import

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'apex-design-system';

Basic Usage

tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Variants

The component supports multiple visual variants:

tsx

<Card variant="default">Default Card</Card>
<Card variant="elevated">Elevated Card</Card>
<Card variant="outlined">Outlined Card</Card>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in Storybook View source