Card

The <Card> component groups related content inside a bordered container. Cards can contain a header, body, and footer, with each section automatically using the configured card spacing and theme styles.

Usage

Sections

Card.Header

Displays content at the top of the card. It includes themed background, border, padding, and rounded top corners.

The header inherits the card's intent, but it can be overridden:

<Card intent="primary">
    <Card.Header intent="success">
        <Text>Completed</Text>
    </Card.Header>
</Card>

Card.Body

Displays the main card content. The body automatically fills the card width and grows vertically to fit its children.

<Card>
    <Card.Body>
        <Text>This is the main card content.</Text>
    </Card.Body>
</Card>

Card.Footer

Displays content at the bottom of the card. It includes themed background, border, padding, and rounded bottom corners.

<Card>
    <Card.Footer>
        <Button text="Continue" />
    </Card.Footer>
</Card>

Intent

Set intent on the card to apply a shared visual intent to its header and footer.

An intent set directly on Card.Header or Card.Footer takes priority over the card-level intent.