Skip to content
Telescope
Components

Card

A styled container that groups related content and actions.

Title of the card

Subtitle that provides extra information or clarification.

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.

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
Show code
<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:

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.

Show code
<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.

Show code
<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.

Show code
<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 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: 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: 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: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page