Skip to content
Change the site theme
Figma
(information)

Card

A Card is a styled container that groups related content and actions.


Guidelines

Guidelines page anchor

About Cards

About Cards page anchor

Cards are specifically-styled containers that group relatable content and actions. Card is an extremely flexible container that does not require specific components inside of it. You can compose a Card to support your use case, but elements such as Heading, Paragraph, and Button or Anchor are commonly used. See When to use a Card and Examples for common Card patterns and dos/donts.

A Card does not handle any interactive events such as hover, click, or focus, though children composed inside of it may commonly have event handlers.

Acknowledging the flexibility of Card component, there are several non-negotiable properties of a Card that differentiate it from a more basic page-layout element, such as Box including background color, border width, border radius, and border color.

At its core, Card is a Box with specific styling attributes and more explicit use cases that you can find in Examples. If you find yourself limited by the default styling and constraints of a Card, you may consider using a Box instead, but first consider bringing the problem you are trying to solve to Design System Office Hours to see if another component or pattern could fit your needs.

Basic Card

Basic Card page anchor

An example of a Card with default padding.

Card with Title, Body and Button

Card with Title, Body and Button page anchor

One of the most common use cases for a Card is to relate a title (Heading), supporting body copy (Paragraph), and primary action (Button) together. Relating these three elements together with a Card makes it easy for a user to digest and provides a clear call to action. Padding surrounding the inner content of a Card can be adjusted to suit the needs of your implementation.

Card with Centered Content

Card with Centered Content page anchor

Your implementation use case may call for a Card with centered content. You can accommodate this by using the alignment props available on some components, or by creating a custom layout inside your Card using Box or Flex.

Cards are a great tool for relating a concise amount of related information together in one object, much like a business card or baseball card in real life.

For example, you might use a single Card as a summary for a feature whose call to action encourages a user to dive deeper. Alternatively, multiple Cards on a single page with hierarchy of equal weights could be used to highlight multiple choices or paths a user can take.

Ultimately, Card is a very flexible component that can fit a variety of needs. If you feel that you have a unique use case or are limited by the Card implementation, please visit Design System Office Hours to see how we can help address your needs.

Do

Have a clear call to action when including Buttons. Avoid including more than one primary and one secondary button.

Don't

Don’t put multiple primary actions in a Card

Do

Use a Heading in your Card that appropriately reflects the information architecture of the page.

Don't

Don’t use Cards to highlight multiple primary actions on a single page.

Do

Use a Heading to set a clear expectation on the Card’s purpose.

Don't

Don’t place multiple Heading components in a single Card.

Do

Use a consistent location on the bottom of the Card for primary actions or next steps.

PropertyDefault tokenModifiable?
background-colorcolor-background-bodyNo
border-widthborder-width-20No
border-radiusborder-radius-20No
border-colorcolor-border-weakerNo
paddingspace-60Yes

yarn add @twilio-paste/card - or - yarn add @twilio-paste/core
import {Card} from '@twilio-paste/core/card';
const Card = () => <Card>Hello world</Card>;
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the cardundefined
paddingSpacingInternal spacing of the cardspace60
globalHtmlAttrsstringAny html attrs like aria, data etc.undefined
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CARD'

Black lives matter.