Docs
Card

Card

Displays a card with header, content, and footer.

Component Source

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Installation

	npx shadcn-svelte add card

	npx shadcn-svelte add card

Usage

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

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

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

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

Modify the heading level

By default, the <CardTitle> component renders an <h3> element. You can change this by passing a tag prop to the component.

For example:

	<CardTitle tag={"h2"}>This will render an H2</CardTitle>

	<CardTitle tag={"h2"}>This will render an H2</CardTitle>

	<CardTitle tag={"h5"}>This will render an H5</CardTitle>

	<CardTitle tag={"h5"}>This will render an H5</CardTitle>

	<CardTitle tag={"p"}>This will render a P tag</CardTitle>

	<CardTitle tag={"p"}>This will render a P tag</CardTitle>

Examples

Coming soon

Button Checkbox