Card

​

Introduction

The <Card> component is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

​

Usage

To use the <Card> component, simply add the component to your template and pass the content you want to display as children.

There are three main parts to the card component: the header, the body, and the footer. You can use any combination of these parts to create the card you need.

Here’s a basic example of a card with a header, body, and footer:

<Card.Root>
  <Card.Header>
    <Text.H2 class='font-bold'>Card title</Text.H2>
  </Card.Header>
  <Card.Content>
    <Text>The content of the card can be anything. Here's some arbitrary text.</Text>
  </Card.Content>
  <Card.Footer class='px-6 py-2'>
    <Text color='text-muted'>This is a card footer with a long explainer</Text>
  </Card.Footer>
</Card.Root>