Preview

Installation

npx sigma-ui@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>
      Card Content
    </CardContent>
    <CardFooter>
      Card Footer
    </CardFooter>
  </Card>
</template>

Examples

Basic

Notifications

API Reference

Card

Slots

Slot	Scope
default The content of the component.	-

CardHeader

Slots

Slot	Scope
default The content of the component.	-

CardTitle

Slots

Slot	Scope
default The content of the component.	-

CardDescription

Slots

Slot	Scope
default The content of the component.	-

CardContent

Slots

Slot	Scope
default The content of the component.	-

CardFooter

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders plain div and heading elements with no role. It has no keyboard interactions of its own.

Key	Description
Tab	Moves focus to the next focusable element inside the card, such as an input or button.