Components / Display

Card

A composable surface for related content and actions.

Preview

default

Card variant

Card content

outline

Card variant

Card content

muted

Card variant

Card content

Use cases

Settings summary

Group an account setting, its explanation, and an edit action in one surface.

Dashboard metric

Give a small set of related figures a clear title and supporting context.

Usage example

Vue

<script setup lang="ts">
import Card from './components/ui/card/Card.vue'
import CardHeader from './components/ui/card/CardHeader.vue'
import CardTitle from './components/ui/card/CardTitle.vue'
import CardDescription from './components/ui/card/CardDescription.vue'
import CardContent from './components/ui/card/CardContent.vue'
</script>

<template>
  <Card as="article">
    <CardHeader>
      <CardTitle>Workspace</CardTitle>
      <CardDescription>Updated just now</CardDescription>
    </CardHeader>
    <CardContent>Your content</CardContent>
  </Card>
</template>

More examples

Settings card

Put the action in the footer so the content remains easy to scan.

Settings card

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
import Card from './components/ui/card/Card.vue'
import CardContent from './components/ui/card/CardContent.vue'
import CardDescription from './components/ui/card/CardDescription.vue'
import CardFooter from './components/ui/card/CardFooter.vue'
import CardHeader from './components/ui/card/CardHeader.vue'
import CardTitle from './components/ui/card/CardTitle.vue'
</script>

<template>
  <Card as="section" variant="outline">
    <CardHeader><CardTitle as="h2">Email notifications</CardTitle><CardDescription>Choose which updates reach your inbox.</CardDescription></CardHeader>
    <CardContent>Weekly summaries are enabled.</CardContent>
    <CardFooter><Button variant="outline">Edit preferences</Button></CardFooter>
  </Card>
</template>

Compact metric

A smaller card can show a single measure without another nested container.

Compact metric

<script setup lang="ts">
import Card from './components/ui/card/Card.vue'
import CardContent from './components/ui/card/CardContent.vue'
import CardDescription from './components/ui/card/CardDescription.vue'
import CardHeader from './components/ui/card/CardHeader.vue'
import CardTitle from './components/ui/card/CardTitle.vue'
</script>

<template>
  <Card as="article" size="sm" variant="muted">
    <CardHeader><CardTitle as="h2">Open issues</CardTitle><CardDescription>Across active projects</CardDescription></CardHeader>
    <CardContent><strong>12</strong></CardContent>
  </Card>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Card
Name	Type	Default or requirement
`as`	div \| section \| article	div
`variant`	default \| outline \| muted	default
`size`	sm \| md \| lg	md
`CardTitle as`	h2 ... h6	h3

Compose CardHeader, CardTitle, CardDescription, CardContent, and CardFooter as needed.

Implementation notes

Choose section or article for a meaningful document region; the default div is suitable for purely visual grouping.
Use one card per related subject, and keep actions next to the content they affect.

Accessibility and localization

Use CardTitle with a heading level that fits the surrounding page outline.