Skip to content
Telescope

CardNew

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

Team Review

New
Assign reviewers to approve the team's expenses.
Learn more

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.

Keep your tokens safe

  • Save them in a secure location
  • Treat them like a password
  • Use a separate token for each app and environment
  • If security has been compromised, regenerate them
  • Do NOT store them in public places or shared docs

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.

Company review

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.

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.

15,000.00
DKK
Available balance

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.

Invite new user

14:36, 02 Apr 2024

By Olga Radzikowska • Product designer

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.

Requested invite

Email
olga.radzikowska@pleo.io
Choose access level...

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.