Card
A Card is a styled container that groups related content and actions.
<Card><Heading as="h2" variant="heading20">Parable of the Talents</Heading><Paragraph>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 ledby 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 belied to. To be led by a tyrant is to sell yourself and those you love into slavery.</Paragraph><Paragraph marginBottom="space0">— <Anchor href="https://www.goodreads.com/book/show/60932.Parable_of_the_Talents">Octavia Butler</Anchor></Paragraph></Card>
Cards are specifically-styled containers that group related content and actions. Cards are a great tool for placing a concise amount of related information together in one object, much like a business card or baseball card in real life.
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.
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.
<Card><Heading as="h2" variant="heading20">Parable of the Talents</Heading><Paragraph>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 ledby 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 belied to. To be led by a tyrant is to sell yourself and those you love into slavery.</Paragraph><Paragraph marginBottom="space0">— <Anchor href="https://www.goodreads.com/book/show/60932.Parable_of_the_Talents">Octavia Butler</Anchor></Paragraph></Card>
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.
<Stack orientation="vertical" spacing="space40"><Card padding="space120"><Heading as="h2" variant="heading20">The Transgender District</Heading><Paragraph>The mission of the Transgender District is to create an urban environment that fosters the rich history, culture, legacy, and empowerment of transgenderpeople and its deep roots in the southeastern Tenderloin neighborhood. The transgender district aims to stabilize and economically empower the transgendercommunity through ownership of homes, businesses, historic and cultural sites, and safe community spaces.</Paragraph><Button variant="primary" as="a" href="https://www.transgenderdistrictsf.com/">Support The Transgender District</Button></Card><Card padding="space120"><Heading as="h2" variant="heading20">Inside Out</Heading><Paragraph>Inside Out empowers, educates, and advocates for LGBTQ+ of youth from the Pikes Peak Region in Southern Colorado. Inside Out does this by creating safe spaces,support systems and teaching life skills to all youth in the community and working to make the community safer and more accepting of gender and sexual orientationdiversity.</Paragraph><Button variant="primary" as="a" href="https://insideoutys.org/">Support Inside Out</Button></Card><Card padding="space120"><Heading as="h2" variant="heading20">The Audre Lorde Project</Heading><Paragraph>The Audre Lorde Project is a Lesbian, Gay, Bisexual, Two Spirit, Trans and Gender Non Conforming People of Color center for community organizing, focusing onthe New York City area. Through mobilization, education and capacity-building, they work for community wellness and progressive social and economic justice. Committedto struggling across differences, they seek to responsibly reflect, represent and serve their various communities.</Paragraph><Button variant="primary" as="a" href="https://alp.org/">Support The Audre Lorde Project</Button></Card></Stack>
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.
<Card padding="space200"><Text as="div" textAlign="center"><Paragraph>We want a world where boys can feel, girls can lead, and the rest of us can not only exist but thrive. This is notabout erasing men and women but rather acknowledging that man and woman are two of many—stars in a constellation thatdo not compete but amplify one another’s shine.</Paragraph><Paragraph marginBottom="space0">— <Anchor href="https://www.goodreads.com/book/show/51794301-beyond-the-gender-binary">Alok Vaid-Menon</Anchor></Paragraph></Text></Card>;
When a Card contains text content, use the following guidelines:
- Use a Heading to highlight the most important information.
- Use a Paragraph to add additional context. Do not repeat the information in the header. Front-load the most critical information.
- When presenting multiple Cards of equal weight on a single page, structure each Card's content similarly.

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.
yarn add @twilio-paste/card - or - yarn add @twilio-paste/core
import {Card} from '@twilio-paste/core/card';
const Card = () => <Card>Hello world</Card>;
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 |
element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'CARD' |
Changelog
733709127
#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnode
tobrowser
to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
- Updated dependencies [
733709127
]:- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0
4d1f7c65e
#3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.Existing blocked component properties include:
className
style
color
3ab2bb6f4
#3114 Thanks @SiTaggart! - ### Breaking changeWe have moved
@types/react
and@types/react-dom
to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.
Action needed
Ensure
@types/react
and@types/react-dom
are installed as dependencies of your application.
- Updated dependencies [
bce889344
,3ab2bb6f4
,3ab2bb6f4
]:- @twilio-paste/theme@10.0.0
- @twilio-paste/box@9.0.0
- @twilio-paste/customization@7.0.0
- @twilio-paste/style-props@8.0.0
- @twilio-paste/types@5.0.0
d97098846
#3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.
- Updated dependencies [
dbd9bf992
,3c89fd83d
,d97098846
,0acdf3486
,ef094db4a
,0acdf3486
]:- @twilio-paste/design-tokens@9.0.0
- @twilio-paste/box@8.0.0
- @twilio-paste/customization@6.0.0
- @twilio-paste/animation-library@1.0.0
- @twilio-paste/styling-library@2.0.0
- @twilio-paste/style-props@7.0.0
- @twilio-paste/theme@9.0.0
- @twilio-paste/types@4.0.0
- @twilio-paste/color-contrast-utils@4.0.0
a4c9e70b0
#2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.
- Updated dependencies [
12c4ba22a
,364083627
,364083627
,364083627
,364083627
]:- @twilio-paste/box@7.0.0
- @twilio-paste/style-props@6.0.0
- @twilio-paste/design-tokens@8.0.0
- @twilio-paste/theme@8.0.0
ae9dd50f
#2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.
- Updated dependencies [
09762f0f
,09762f0f1
,09762f0f1
]:- @twilio-paste/box@6.0.0
- @twilio-paste/styling-library@1.0.0
- @twilio-paste/theme@7.0.0
- @twilio-paste/style-props@5.0.0
73c596919
#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
c867e3f48
#2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.
- Updated dependencies [
0a52eeee
,0a52eeee
,04de0d1d
,04de0d1d
,04de0d1d
]:- @twilio-paste/design-tokens@7.0.0
- @twilio-paste/theme@6.0.0
- @twilio-paste/style-props@4.0.0
- @twilio-paste/box@5.0.0
b7675915
#1985 Thanks @TheSisb! - For debugging purposes we now ship afilename.debug.js
unminified version of each component or library in Paste.
ed5c0a49c
#1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.
d387eda8
#1860 Thanks @gloriliale! - [Card]: updated the props to include variant to help with customizing dependent components.
53e9583f
#1726 Thanks @richbachman! - [Card] Enable Card to respect element customizations set on the customization provider. Card now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
25a1f632
#1404 Thanks @SiTaggart! - update internal usage of design tokens to reflect new strong / weak nomenclature
0eded1fd
#1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbers
- Updated dependencies [
514bd5aa
]:- @twilio-paste/theme@5.0.1
- @twilio-paste/box@4.0.2
- @twilio-paste/style-props@3.0.1
- Updated dependencies [
4c9ed5ca
,26c828d8
]:- @twilio-paste/design-tokens@6.6.0
- @twilio-paste/theme@5.0.0
- @twilio-paste/box@4.0.0
- @twilio-paste/style-props@3.0.0
- Updated dependencies [
944c3407
]:- @twilio-paste/design-tokens@6.5.2
- @twilio-paste/box@3.0.1
- @twilio-paste/style-props@2.0.1
- @twilio-paste/theme@4.3.1
- Updated dependencies [
f1675586
]:- @twilio-paste/theme@4.3.0
- @twilio-paste/box@3.0.0
- @twilio-paste/style-props@2.0.0
a12acb61
#1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.Updated dependencies [
a12acb61
,a12acb61
,a12acb61
]:- @twilio-paste/theme@4.2.2
- @twilio-paste/style-props@1.9.2
- @twilio-paste/box@2.13.2
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
1.5.1 (2021-01-25)
Note: Version bump only for package @twilio-paste/card
1.4.7 (2021-01-15)
Note: Version bump only for package @twilio-paste/card
1.4.6 (2021-01-07)
Note: Version bump only for package @twilio-paste/card
1.4.5 (2020-12-17)
Note: Version bump only for package @twilio-paste/card
1.4.4 (2020-12-15)
Note: Version bump only for package @twilio-paste/card
1.4.3 (2020-12-11)
Note: Version bump only for package @twilio-paste/card
1.4.2 (2020-12-11)
Note: Version bump only for package @twilio-paste/card
1.4.1 (2020-12-09)
Note: Version bump only for package @twilio-paste/card
- card: wrapping with forwardRefs (05996a5)
1.3.76 (2020-11-11)
Note: Version bump only for package @twilio-paste/card
1.3.75 (2020-11-06)
Note: Version bump only for package @twilio-paste/card
1.3.74 (2020-11-05)
Note: Version bump only for package @twilio-paste/card
1.3.73 (2020-10-23)
Note: Version bump only for package @twilio-paste/card
1.3.72 (2020-10-15)
Note: Version bump only for package @twilio-paste/card
1.3.71 (2020-10-13)
Note: Version bump only for package @twilio-paste/card
1.3.70 (2020-10-07)
Note: Version bump only for package @twilio-paste/card
1.3.69 (2020-10-07)
Note: Version bump only for package @twilio-paste/card
1.3.68 (2020-10-07)
Note: Version bump only for package @twilio-paste/card
1.3.67 (2020-10-07)
Note: Version bump only for package @twilio-paste/card
1.3.66 (2020-09-22)
Note: Version bump only for package @twilio-paste/card
1.3.65 (2020-09-21)
Note: Version bump only for package @twilio-paste/card
1.3.64 (2020-09-15)
Note: Version bump only for package @twilio-paste/card
1.3.63 (2020-09-15)
Note: Version bump only for package @twilio-paste/card
1.3.62 (2020-09-08)
Note: Version bump only for package @twilio-paste/card
1.3.61 (2020-09-08)
Note: Version bump only for package @twilio-paste/card
1.3.60 (2020-09-03)
Note: Version bump only for package @twilio-paste/card
1.3.59 (2020-08-31)
Note: Version bump only for package @twilio-paste/card
1.3.58 (2020-08-31)
Note: Version bump only for package @twilio-paste/card
1.3.57 (2020-08-24)
Note: Version bump only for package @twilio-paste/card
1.3.56 (2020-08-19)
Note: Version bump only for package @twilio-paste/card
1.3.55 (2020-08-12)
Note: Version bump only for package @twilio-paste/card
1.3.54 (2020-08-12)
Note: Version bump only for package @twilio-paste/card
1.3.53 (2020-08-06)
Note: Version bump only for package @twilio-paste/card
1.3.52 (2020-08-04)
Note: Version bump only for package @twilio-paste/card
1.3.51 (2020-08-04)
Note: Version bump only for package @twilio-paste/card
1.3.50 (2020-07-31)
Note: Version bump only for package @twilio-paste/card
1.3.49 (2020-07-30)
Note: Version bump only for package @twilio-paste/card
1.3.48 (2020-07-29)
Note: Version bump only for package @twilio-paste/card
1.3.47 (2020-07-22)
Note: Version bump only for package @twilio-paste/card
1.3.46 (2020-07-15)
Note: Version bump only for package @twilio-paste/card
1.3.45 (2020-07-14)
Note: Version bump only for package @twilio-paste/card
1.3.44 (2020-07-14)
Note: Version bump only for package @twilio-paste/card
1.3.43 (2020-07-01)
Note: Version bump only for package @twilio-paste/card
1.3.42 (2020-06-29)
Note: Version bump only for package @twilio-paste/card
1.3.41 (2020-06-25)
Note: Version bump only for package @twilio-paste/card
1.3.40 (2020-06-22)
Note: Version bump only for package @twilio-paste/card
1.3.39 (2020-06-18)
Note: Version bump only for package @twilio-paste/card
1.3.38 (2020-06-16)
Note: Version bump only for package @twilio-paste/card
1.3.37 (2020-06-12)
Note: Version bump only for package @twilio-paste/card
1.3.36 (2020-06-10)
Note: Version bump only for package @twilio-paste/card
1.3.35 (2020-06-05)
Note: Version bump only for package @twilio-paste/card
1.3.34 (2020-06-01)
Note: Version bump only for package @twilio-paste/card
1.3.33 (2020-06-01)
Note: Version bump only for package @twilio-paste/card
1.3.32 (2020-05-27)
Note: Version bump only for package @twilio-paste/card
1.3.31 (2020-05-20)
Note: Version bump only for package @twilio-paste/card
1.3.30 (2020-05-07)
Note: Version bump only for package @twilio-paste/card
1.3.29 (2020-05-07)
Note: Version bump only for package @twilio-paste/card
1.3.28 (2020-05-04)
- card: switch to new spacing prop validators (9822a99)
1.3.27 (2020-05-01)
Note: Version bump only for package @twilio-paste/card
1.3.26 (2020-04-25)
Note: Version bump only for package @twilio-paste/card
1.3.25 (2020-04-22)
Note: Version bump only for package @twilio-paste/card
1.3.24 (2020-04-17)
Note: Version bump only for package @twilio-paste/card
1.3.23 (2020-04-15)
Note: Version bump only for package @twilio-paste/card
1.3.22 (2020-04-08)
- card: package dependencies updated to be correct (78c6b36)
1.3.21 (2020-04-07)
Note: Version bump only for package @twilio-paste/card
1.3.20 (2020-04-07)
Note: Version bump only for package @twilio-paste/card
1.3.19 (2020-04-02)
Note: Version bump only for package @twilio-paste/card
1.3.18 (2020-03-28)
Note: Version bump only for package @twilio-paste/card
1.3.17 (2020-03-24)
- card: switch from theme-tokens to theme package dep (9529fc8)
1.3.16 (2020-03-17)
Note: Version bump only for package @twilio-paste/card
1.3.15 (2020-03-17)
Note: Version bump only for package @twilio-paste/card
1.3.14 (2020-03-11)
Note: Version bump only for package @twilio-paste/card
1.3.13 (2020-03-06)
- add missing transitive peerDep on '@styled-system/css' (fdbb813)
1.3.12 (2020-03-02)
Note: Version bump only for package @twilio-paste/card
1.3.11 (2020-02-28)
Note: Version bump only for package @twilio-paste/card
1.3.10 (2020-02-26)
1.3.9 (2020-02-14)
- card: add missing peer deps (2529927)
1.3.8 (2020-02-13)
Note: Version bump only for package @twilio-paste/card
1.3.7 (2020-02-11)
Note: Version bump only for package @twilio-paste/card
1.3.6 (2020-02-11)
Note: Version bump only for package @twilio-paste/card
1.3.5 (2020-02-11)
Note: Version bump only for package @twilio-paste/card
1.3.4 (2020-02-07)
Note: Version bump only for package @twilio-paste/card
1.3.3 (2020-02-03)
Note: Version bump only for package @twilio-paste/card
1.3.2 (2020-01-24)
Note: Version bump only for package @twilio-paste/card
1.3.1 (2020-01-17)
Note: Version bump only for package @twilio-paste/card
- card: use style-props package and use new safelySpreadProps method (132173f)
1.1.2 (2019-12-05)
Note: Version bump only for package @twilio-paste/card
1.1.1 (2019-11-20)
Note: Version bump only for package @twilio-paste/card
icons: removed all the inherited icons since we're moving to a new system
chore(icons): update icon list for storybook
fix(spinner): use new icon
fix(storybook): use new icon for story
fix(story): button icons should be 24px
fix: adjust icon size tokens
feat: add iconSizes as separate key in theme-tokens
feat(icons): icons package to use tokens and update icons
fix(spinner): update to use tokens and new icons
fix(button): use correct spinner size
fix(icons): major icons package fixes
- huge overhaul to build process
- now uses rollup
- builds into cjs and esm directories
- made the package publishable to npm
- moved svg folder out of src, now src only holds react stuff
- updated scripts to use new paths and cleaned up the code
- programmatically generates rollup config from the icon-list command
chore: add new icons dist folders to gitignore
fix: spinner and button icon usage
feat(icons): add rollup icon list cache file
fix(core-bundle): sort packages for consistent builds
chore: use
esm
instead ofes
in rollup for correctnesschore: yarn.lock
fix(spinner): lint error
chore(icons): move rollup icon list
chore(spinner): use types package in story
fix(spinner): swap out destructured props for explicit props
0.0.3 (2019-10-29)
Note: Version bump only for package @twilio-paste/card
0.0.2 (2019-09-16)
Note: Version bump only for package @twilio-paste/card
- change @paste scope to @twilio-paste (#2) (1d8d2ff)