Card

A container for grouping related content with optional header, actions, and footer.

Basic Usage

Project status

Latest deployment and uptime.

All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.

Updated 2h ago

import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from "@epilot/volt-ui"

<Card className="max-w-lg">
  <CardHeader>
    <CardTitle>Project status</CardTitle>
    <CardDescription>Latest deployment and uptime.</CardDescription>
    <CardAction>
      <Button variant="tertiary" size="icon-sm"><IconDotsVertical /></Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <Text variant="body2">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>
  </CardContent>
  <CardFooter>
    <Text variant="helper1">Updated 2h ago</Text>
  </CardFooter>
</Card>

API Reference

Card

Container for the card.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the container.

CardHeader

Optional header region.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the header.

CardTitle

Title text.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the title.

CardDescription

Supporting text under the title.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the description.

CardAction

Right-aligned action slot within the header.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the action.

CardContent

Main body content.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the body.

CardFooter

Footer area for secondary info or actions.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the footer.

Card

On this page