Components

CardNew: New

A styled container that groups related content and actions.

Basic usage

First, import the component.

import {Card} from '@pleo-io/telescope'

Then use it like so:

API reference

Card

The main container for the Card component, which visually groups the Card's content. It can contain both the Card's subcomponents and/or other content.

Prop	Type	Default
`align`	enum
`children`	any
`m`	enum
`margin`	enum
`marginBottom`	enum
`marginLeft`	enum
`marginRight`	enum
`marginTop`	enum
`marginX`	enum
`marginY`	enum
`mb`	enum
`ml`	enum
`mr`	enum
`mt`	enum
`mx`	enum
`my`	enum
`p`	enum
`padding`	enum
`paddingBottom`	enum
`paddingLeft`	enum
`paddingRight`	enum
`paddingTop`	enum
`paddingX`	enum
`paddingY`	enum
`pb`	enum
`pl`	enum
`pr`	enum
`pt`	enum
`px`	enum
`py`	enum
`space`	enum
`stretch`	boolean

This component also accepts the following styled system props:

Prop	Type	Default
`alignContent`	enum
`alignItems`	enum
`alignSelf`	enum
`flex`	enum
`flexBasis`	enum
`flexDirection`	enum
`flexGrow`	enum
`flexShrink`	enum
`flexWrap`	enum
`justifyContent`	enum
`justifyItems`	enum
`justifySelf`	enum
`order`	enum

Card.Pictogram

Use this subcomponent to provide the Card with an pictogram. It adds appropriate spacing and ensures the nested pictogram has the correct size.

Prop	Type	Default
`children`	any
`hasSpacingBottom`	boolean	true
`hasSpacingTop`	boolean	true

Card.Header

Use this subcomponent to provide the Card with a header with correct spacing. It can contain both the Card.Title and Card.Subtitle subcomponents and/or other content.

Prop	Type	Default
`children`	any
`hasSpacingBottom`	boolean	true
`hasSpacingTop`	boolean	true

Card.Title

Use this subcomponent to provide the Card with a title. It should be used within the Card.Header subcomponent. Additionally, make sure to set the headingLevel prop to the appropriate level.

Prop	Type	Default
`children`	any
`headingLevel`*	enum

Card.Subtitle

Use this subcomponent to provide the Card with a subtitle. It should provide additional information or clarification to the title or content. It should be used within the Card.Header subcomponent and follow the Card.Title subcomponent.

Prop	Type	Default
`children`	any

Card.Body

Use this subcomponent to group the main content of the Card and provide it with correct spacing. You can use multiple Card.Body subcomponents within a Card.

Prop	Type	Default
`children`	any
`hasSpacingBottom`	boolean	true
`hasSpacingTop`	boolean	true

Card.Divider

The vertical spacing of the Card's subcomponents may not always provide sufficient visual separation. For instance, some cards may contain complex content that makes it difficult to scan if the header, body and footer are not clearly separated. In such cases, we recommend using a divider to help create a stronger separation.

This component doesn't accept any custom props.

Card.Footer

Use this subcomponent to provide the Card with a footer with correct spacing. It can contain both the Card.FooterActions subcomponent and/or other content.

Prop	Type	Default
`children`	any
`hasSpacingBottom`	boolean	true
`hasSpacingTop`	boolean	true

Card.FooterActions

Use this subcomponent to group the main actions of the Card. It is a styled wrapper for the Button group component. As a result, it should only contain Buttons. It also means the buttons are right-aligned, which mirrors the button alignment in the Modal and Drawer components.

This component doesn't accept any custom props.

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

On this page