# Card

A styled container that groups related content and actions.

Tabs: [Guidelines](/components/web/card/card.guidelines.md) · [Code](/components/web/card/card.code.md)

## Features

- Enables easy construction of the Card's content with subcomponents.

- Provides a Divider for strong visual separation between sections.

- Features a built-in spacing system for the subcomponents.

## When to use

Use a Card when you have a collection of related content and actions that you want to group together and visually separate from the rest of the page.

## Examples

### Spacing

The Card's subcomponents have built-in spacing. This means you don't need to add or remove spacing when using the subcomponents in their intended order:

1. Header
2. Body
3. Footer

```tsx
<Card>
    <Card.Header>
        <Inline space={8} alignY={'center'}>
            <Card.Title headingLevel="h4">Team Review</Card.Title>
            <Badge variant="discover">New</Badge>
        </Inline>
    </Card.Header>
    <Card.Body>
        <Text>Assign reviewers to approve the team's expenses.</Text>
    </Card.Body>
    <Card.Footer>
        <Card.FooterActions>
            <Button variant="secondary" href="#">
                Learn more
            </Button>
            <Button variant="primary">Add Reviewer</Button>
        </Card.FooterActions>
    </Card.Footer>
</Card>
```

When deviating from this order, you may need to adjust the subcomponents' spacing. This can be done with the `hasSpacingTop` and `hasSpacingBottom` props.

If you're not using the subcomponents to create content for a Card, you can still align with the Card's spacing system. This is enabled through the `cardHorizontalSpacing` and `cardVerticalSpacing` component tokens, which can be imported like this:

```tsx
import {cardHorizontalSpacing, cardVerticalSpacing} from '@pleo-io/telescope'
```

### Custom content and layout

The Card is intended to be a versatile container. This means that you can include any type of content. It also means that you can customise the layout supplied by the subcomponents.

```tsx
<Card>
    <Card.Header>
        <Inline alignX={'space-between'} alignY={'center'} space={16}>
            <Card.Title headingLevel="h4" id="switch-label">
                Company review
            </Card.Title>
            <Switch aria-labelledby="switch-label" />
        </Inline>
    </Card.Header>
    <Card.Body>
        <Text>
            Set up Company Review if you want all card and out-of-pocket expenses to be approved by
            Admins or Bookkeepers. If you have Team Review enabled as well as Company Review,
            expenses will need to be approved by both teams.
        </Text>
    </Card.Body>
</Card>
```

You can also omit the subcomponents and only use the Card as a container if an entirely custom content and layout best suits your use case.

```tsx
<Card padding={16} space={8} css={{maxWidth: '320px'}}>
    <Inline alignItems="baseline" space={4}>
        <Text variant="body-l">15,000.00</Text>
        <Text>DKK</Text>
    </Inline>
    <Inline space={4} alignItems="baseline">
        <Text variant="body-s" color="colorContentStaticQuiet">
            Available balance
        </Text>
        <HelpPopover aria-label="Learn more about: Available balance">
            Available balance = Current balance + Pleo Reserve limit - Pending purchases.
        </HelpPopover>
    </Inline>
</Card>
```

### Divider

The vertical spacing of the Card's subcomponents does not always create sufficient visual separation. The `Card.Divider` subcomponent can help create a stronger separation.

```tsx
<Card>
    <Card.Header hasSpacingBottom>
        <Inline space={16} alignY={'center'}>
            <Avatar icon={<UserPlus />} />
            <Stack stretch>
                <Inline alignX={'space-between'} alignY={'baseline'}>
                    <Card.Title headingLevel="h4">Invite new user</Card.Title>
                    <Text variant="body-s" color="colorContentStaticQuiet">
                        14:36, 02 Apr 2024
                    </Text>
                </Inline>
                <Card.Subtitle>By Olga Radzikowska • Product designer</Card.Subtitle>
            </Stack>
        </Inline>
    </Card.Header>
    <Card.Divider />
    <Card.Body>
        <Stack space={24}>
            <Text color="colorContentStaticQuiet">
                Could you please add our new team member to the Engineering team? They joined last
                month and need access to add their client related expenses.
            </Text>
            <Stack space={8} stretch>
                <Text as="h3" variant="heading-s">
                    Requested invite
                </Text>
                <Inline alignX={'space-between'}>
                    <Text>Email</Text>
                    <Text color="colorContentStaticQuiet">olga.radzikowska@pleo.io</Text>
                </Inline>
                <Select
                    label="Access"
                    placeholder="Choose access level..."
                    options={[{label: 'Card and reimbursments', value: 'cards and reimbursements'}]}
                />
            </Stack>
        </Stack>
    </Card.Body>
    <Card.Divider />
    <Card.Footer>
        <Card.FooterActions>
            <Button variant="secondary">Decline</Button>
            <Button variant="primary">Approve</Button>
        </Card.FooterActions>
    </Card.Footer>
</Card>
```

## Best practices

**Do:** Put interactive elements inside the Card.

**Don't:** Make the Card itself interactive.

**Do:** Add a heading, so assististive technology users are provided with a clear document outline and form of navigation.

**Don't:** Forget to use the [Visually Hidden](/utils/visually-hidden/visually-hidden.guidelines) component to hide the heading visually when it's not required or even redundant to sighted users.

**Do:** Keep cards as simple as possible.

**Don't:** Overload cards with lots of detailed content.

**Do:** Limit the number of buttons and links.

**Don't:** Include more than a single primary button.

**Do:** Use the Card.Divider to create clear sections.

**Don't:** Put Cards inside a Card to create sections.

## Related components

- [Accordion](/components/web/accordion/accordion.guidelines): A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.
- [Drawer](/components/web/drawer/drawer.guidelines): A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.
- [Modal](/components/web/modal/modal.guidelines): A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.