Card

Cards contain content and actions about a single subject.

Basic usage

The Card comes with two variants: filled, outlined.

Some content

<Card class="p-5">Some content</Card>
<Card variant="outlined" class="p-5">
  Some content
</Card>

Composition

Add buttons to Card:

Some content

<Card class="p-5">
  Some content
  <div class="mt-2 flex items-center gap-x-2 text-right">
    <Button variant="text">Cancel</Button>
    <Button variant="outlined">Cool</Button>
  </div>
</Card>