9.7k

Card

PreviousNext

Displays a card with header, content, and footer.

Growth Plan

A lightweight card composed from the internal UI-kit base pieces.

Monthly reporting

Priority support

Shared component governance

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VCard,
  VCardContent,
  VCardFooter,
  VCardHeader,
  VCardTitle,
} from '@ui-kit/src/components/Base/VCard'
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
</script>

<template>
  <VCard variant="secondary" class="w-full max-w-sm">
    <VCardHeader class="grid gap-2">
      <VCardTitle>Growth Plan</VCardTitle>
      <p>
        A lightweight card composed from the internal UI-kit base pieces.
      </p>
    </VCardHeader>
    <VCardContent class="grid gap-2">
      <p>Monthly reporting</p>
      <p>Priority support</p>
      <p>Shared component governance</p>
    </VCardContent>
    <VCardFooter class="flex flex-wrap gap-3">
      <VButton>
      Upgrade
    </VButton>
      <VButton variant="outlined">
      Details
    </VButton>
    </VCardFooter>
  </VCard>
</template>

Installation

pnpm dlx shadcn-vue@latest add card

Usage

<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Card Content</p>
    </CardContent>
    <CardFooter>
      <p>Card Footer</p>
    </CardFooter>
  </Card>
</template>
CalendarCarousel