Card

A surface that groups related content, with slots for header, action, content and footer.

Data Display

Production deploy

main · 4f2c91a · 2 minutes ago

Ready

Build

38s

Region

cdg1

Size

412 kB

Playground

Tweak the props, the preview and the code follow.

Usage alerts

Get notified before you hit your limits.

Pro

We will email you at 80% and 100% of your monthly quota.

Props

interactive

action

footer

dividers

title

<Card interactive>
  <CardHeader>
    <CardTitle>Usage alerts</CardTitle>
    <CardDescription>Get notified before you hit your limits.</CardDescription>
    <CardAction><Badge variant="brand">Pro</Badge></CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button size="sm">Enable</Button>
  </CardFooter>
</Card>

Installation

npx @plumsydev/plum-ui add card

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction>…</CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>