The Paste cards are specifically-styled containers that group relatable content and actions.
@twilio-paste/core/card — or — @twilio-paste/cardCards 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.
An example of a Card with default padding.
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
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Have a clear call to action when including Buttons. Avoid including more than one primary and one secondary button.
Don’t put multiple primary actions in a Card
Use a Heading in your Card that appropriately reflects the information architecture of the page.
Don’t use Cards to highlight multiple primary actions on a single page.
Use a Heading to set a clear expectation on the Card’s purpose.
Don’t place multiple Heading components in a single Card.
Use a consistent location on the bottom of the Card for primary actions or next steps.
| Property | Default token | Modifiable? |
|---|---|---|
| background-color | color-background-body | No |
| border-width | border-width-20 | No |
| border-radius | border-radius-20 | No |
| border-color | color-border-lighter | No |
| padding | space-60 | Yes |
yarn add @twilio-paste/card - or - yarn add @twilio-paste/core| Prop | Type | Description | Default |
|---|---|---|---|
| children? | React.ReactNode | Child components to render into the card | undefined |
| padding | Spacing | Internal spacing of the card | space60 |
| globalHtmlAttrs | string | Any html attrs like aria, data etc. | undefined |