Card

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/card
Copy

Usage#

Copy<script lang="ts">
  import * as Card from "@/svelte-ui/card/index.js";
</script>

Copy<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
    <Card.Action>Card Action</Card.Action>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Composition#

Use the following composition to build a Card:

CopyCard.Root
├── Card.Header
│   ├── Card.Title
│   ├── Card.Description
│   └── Card.Action
├── Card.Content
└── Card.Footer

Examples#

Size#

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Spacing#

In addition to the size prop, you can use the --card-spacing CSS variable to control the spacing between sections and the inset of card parts.

Use negative margins with -mx-(--card-spacing) to make content go edge to edge while keeping it aligned with the card inset. When the edge-to-edge content sits above a footer, use -mb-(--card-spacing) on Card.Content to remove the section gap.

Image#

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

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

Card.Root#

The Card.Root component is the root container for card content.

Card.Header#

The Card.Header component is used for a title, description, and optional action.

Card.Title#

The Card.Title component is used for the card title.

Card.Description#

The Card.Description component is used for helper text under the title.

Card.Action#

The Card.Action component places content in the top-right of the header (for example, a button or a badge).

Card.Content#

The Card.Content component is used for the main card body.

Card.Footer#

The Card.Footer component is used for actions and secondary content at the bottom of the card.