Card is used to contain information together. There are multiple ways to customize the content within the card. Cards are 100% wide unless otherwise stated.

For information on Card style and usage guidelines, check out Card Design Guidelines.

Example

This example includes all Card components, which are: Image, Content, Overline, Title, Subtitle, Body, Footer. Unless it's media, put all content under Card.Content to have the correct spacing within the Card.

 
Optional Overline
Card Title
Optional Subtitle
Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
Action 1Action 2
 
<Box width="324px">
    <Card>
        <Card.Image src="/docs-content/design/cards/BlueRectangle.svg"/>
        <Card.Content>
            <Card.Overline>Optional Overline</Card.Overline>
            <Card.Title>Card Title</Card.Title>
            <Card.Subtitle>Optional Subtitle</Card.Subtitle>
            <Card.Body>
                Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
            </Card.Body>
            <Card.Footer>
                <Button.Group>
                    <Button>Action 1</Button>
                    <Button outline>Action 2</Button>
                </Button.Group>
            </Card.Footer>
        </Card.Content>
    </Card>
</Box>
<Box width="324px">
    <Card>
        <Card.Image src="/docs-content/design/cards/BlueRectangle.svg"/>
        <Card.Content>
            <Card.Overline>Optional Overline</Card.Overline>
            <Card.Title>Card Title</Card.Title>
            <Card.Subtitle>Optional Subtitle</Card.Subtitle>
            <Card.Body>
                Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
            </Card.Body>
            <Card.Footer>
                <Button.Group>
                    <Button>Action 1</Button>
                    <Button outline>Action 2</Button>
                </Button.Group>
            </Card.Footer>
        </Card.Content>
    </Card>
</Box>

A Card without Media but with 2 Links

You may pick and choose what elements may be inside the Card.

 
Card Title
Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
Link 1Link 2
 
<Card width="324px">
    <Card.Content>
        <Card.Title>Card Title</Card.Title>
        <Card.Body>
            Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
        </Card.Body>
        <Card.Footer>
            <Link href="#" mr="12px">Link 1</Link>
            <Link href="#">Link 2</Link>
        </Card.Footer>
    </Card.Content>
</Card>
<Card width="324px">
    <Card.Content>
        <Card.Title>Card Title</Card.Title>
        <Card.Body>
            Here is some optional text that you can include in the card’s body so you can learn more about what the card is supposed to be for.
        </Card.Body>
        <Card.Footer>
            <Link href="#" mr="12px">Link 1</Link>
            <Link href="#">Link 2</Link>
        </Card.Footer>
    </Card.Content>
</Card>

Common Props

Card, Card.Content, Card.Footer includes COMMON, BORDER, FLEX common props since they wrap around the Box component.

Card.Body, Card.Title, Card.Overline, Card.Subtitle includes COMMON and TYPOGRAPHY common props.

Read Common Props for details and API. These common props will override component props such as the color.

Component Props

All Card components include these props.