Card

---
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<Card class="w-full max-w-md">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">Manage</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter class="border-t">
    <Button size="sm">Continue</Button>
  </CardFooter>
</Card>

Installation

Command

npx shadcn@latest add @fulldev/card

Manual

Copy and paste the card component files into your project.
Update the import paths to match your project setup.

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Polymorphic

Card and CardTitle are polymorphic via as. Pass as to render another element and use the attributes for that element. Both render a div by default. A dl card holds dt and dd pairs, optionally wrapped in a div.

<Card as="article">...</Card>
<Card as="section" aria-labelledby="plan-title">...</Card>
<Card as="a" href="/pricing">...</Card>
<Card as="li">...</Card>
<Card as="dl">
  <div><dt>Plan</dt><dd>Pro</dd></div>
</Card>

<CardTitle as="h3">Card Title</CardTitle>

Composition

Use the following composition to build a Card:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Examples

Image

Add an image before the card header to create a card with an image.

---
import { Image } from "astro:assets"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import image from "@/assets/placeholder.svg"
---

<Card class="max-w-md">
  <Image
    src={image}
    alt="Card image"
    class="aspect-video w-full object-cover"
  />
  <CardHeader>
    <CardTitle>Image Card</CardTitle>
    <CardDescription>Card with media in the top slot.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>The first child image automatically gets top rounding behavior.</p>
  </CardContent>
</Card>

Article

Render the card as an article with a heading as its title.

---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<Card as="article" class="w-full max-w-md">
  <CardHeader>
    <CardTitle as="h3">Release notes</CardTitle>
    <CardDescription>What changed in this version.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>An article card is a self-contained piece of content.</p>
  </CardContent>
</Card>

Link

Render the whole card as a link. Keep other links and buttons out of a link card.

---
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<Card
  as="a"
  href="/components/button/"
  class="hover:bg-muted/50 w-full max-w-md transition-colors"
>
  <CardHeader>
    <CardTitle as="h3">Button</CardTitle>
    <CardDescription>
      Displays a button or a component that looks like a button.
    </CardDescription>
  </CardHeader>
</Card>

List

Render cards as list items inside a ul.

---
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<ul class="grid w-full max-w-md gap-4">
  <Card as="li" size="sm">
    <CardHeader>
      <CardTitle as="h3">Design</CardTitle>
      <CardDescription>Tokens, styles, and components.</CardDescription>
    </CardHeader>
  </Card>
  <Card as="li" size="sm">
    <CardHeader>
      <CardTitle as="h3">Build</CardTitle>
      <CardDescription>Astro pages and content collections.</CardDescription>
    </CardHeader>
  </Card>
</ul>

API Reference

See the GitHub source code for more information on props.

Sidebar

Search