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.
  • Applies correct sizing to pictograms with a subcomponent.
  • 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. Pictogram
  2. Header
  3. Body
  4. Footer

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'

Pictogram

When using an pictogram inside a Card, it should be nested inside of a Card.Pictogram subcomponent, which should be the first child of the Card.

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.

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.

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.

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.
On this page