Card

Card groups related content and actions for a single subject in a contained, bordered surface. Use to visually separate a distinct item from surrounding content.

Code

<Card>
  <CardHeader>
    <CardTitle>Green Valley Farm</CardTitle>
    <CardDescription>Preferred account · 12 open orders</CardDescription>

    <CardAction>
      <Button variant="outline" size="sm">
        View account
      </Button>
    </CardAction>
  </CardHeader>

  <CardContent>
    <p className="tw:text-sm tw:text-muted-foreground">
      Current balance is $12,450. Last order was updated 2 hours ago.
    </p>
  </CardContent>

  <CardFooter>
    <Button className="tw:w-full">Create order</Button>
  </CardFooter>
</Card>

API

Card

Name	Type/Description
size = "default"	"default" | "sm" | undefined

CardAction

No documented props

CardContent

No documented props

CardDescription

No documented props

CardFooter

No documented props

CardHeader

No documented props

CardTitle

No documented props