Card

Displays a card with header, content, and footer.

Examples

Default

Create project

Deploy your new project in one-click.

Name

<script setup>
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Button,
  Input,
  Label
} from '@empathyds/vue'
</script>

<Card class="w-87.5">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <form>
      <div class="grid w-full items-center gap-4">
        <div class="flex flex-col space-y-1.5">
          <Label for="name">Name</Label>
          <Input id="name" placeholder="Name of your project" />
        </div>
      </div>
    </form>
  </CardContent>
  <CardFooter class="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Slots

Card

Slot	Description
default	The content of the card (Header, Content, Footer).

CardHeader

Slot	Description
default	The header content (Title, Description).

CardTitle

Slot	Description
default	The title content.

CardDescription

Slot	Description
default	The description content.

CardContent

Slot	Description
default	The main content of the card.

CardFooter

Slot	Description
default	The footer content.