Card

The Card component provides a container for grouping related content with optional header and footer sections.

Preview

System Status

Current operational parameters

All systems nominal. No anomalies detected.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from 'meridian';

Components

The Card is composed of multiple sub-components:

Component	Description
`Card`	The main container
`CardHeader`	Container for title and description
`CardTitle`	The card’s heading
`CardDescription`	Secondary text in the header
`CardContent`	Main content area
`CardFooter`	Footer with actions

Usage

Basic Card

<Card>
  <CardContent>
    Simple card with just content.
  </CardContent>
</Card>

With Header

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Optional description text</CardDescription>
  </CardHeader>
  <CardContent>
    Main content goes here.
  </CardContent>
</Card>

<Card>
  <CardHeader>
    <CardTitle>Confirm Action</CardTitle>
    <CardDescription>This action cannot be undone.</CardDescription>
  </CardHeader>
  <CardContent>
    Are you sure you want to proceed?
  </CardContent>
  <CardFooter>
    <Button intent="danger">Confirm</Button>
    <Button intent="ghost">Cancel</Button>
  </CardFooter>
</Card>

With Actions

Confirm Action

This action cannot be undone.

Are you sure you want to proceed?

Status Card

<Card>
  <CardHeader>
    <CardTitle>Server Health</CardTitle>
  </CardHeader>
  <CardContent>
    <Badge variant="success">Online</Badge>
    <Text size="sm">Response time: 42ms</Text>
  </CardContent>
</Card>