Card

The Paste cards are specifically-styled containers that group relatable content and actions.

Status
production
Version
1.3.55
Sources
Abstract
Install
yarn add @twilio-paste/card — or — yarn add @twilio-paste/core

Guidelines#

About Cards#

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.

Card vs. Box#

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.

Examples#

Basic Card#

An example of a Card with default padding.

Parable of the Talents

Choose your leaders with wisdom and forethought. To be led by a coward is to be controlled by all that the coward fears. To be led by a fool is to be led by the opportunists who control the fool. To be led by a thief is to offer up your most precious treasures to be stolen. To be led by a liar is to ask to be lied to. To be led by a tyrant is to sell yourself and those you love into slavery.

Octavia Butler

Card with Title, Body and Button#

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.

This is a card with a primary action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui tellus, tristique in tincidunt cursus, efficitur at felis. Phasellus imperdiet, lorem et commodo egestas, arcu.

Card with Centered Content#

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.

Let's verify your integration

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Composing a Card#

When to use a Card#

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.

Anatomy#

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

Usage Guide#

Installation#

yarn add @twilio-paste/card - or - yarn add @twilio-paste/core

API#

PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the cardundefined
paddingSpacingInternal spacing of the cardspace60
globalHtmlAttrsstringAny html attrs like aria, data etc.undefined

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.