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.

Min and max size

Card accepts the shared minWidth, maxWidth, minHeight, and maxHeight props (see min and max size). They clamp the card's Box, never the centring wrapper used with center. When an overlay Card.Header or Card.Footer adds its wrapper frame, the wrapper is clamped too, so overlay sections stay aligned with the clamped card.

<Card width="100%" maxWidth={480}>
    <Card.Body>
        <Text text="Fills its parent up to 480 pixels wide." />
    </Card.Body>
</Card>

Card.Body and Card.Footer also accept these props and apply them to their own section.