Card

Installation#

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

Usage#

Copyimport {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/ember-ui/card';

Copy<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>

Composition#

Use the following composition to build a Card:

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

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 CardContent 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#

The Card component is the root container for card content.

CardHeader#

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

CardTitle#

The CardTitle component is used for the card title.

CardDescription#

The CardDescription component is used for helper text under the title.

CardAction#

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

CardContent#

The CardContent component is used for the main card body.

CardFooter#

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