Skip to main content

​
Card

The Card component is a flexible container for grouping related content with a subtle border and background.

​
Installation

yarn add @twilio-paste/card

​
Usage

import { Card } from '@twilio-paste/card';
import { Heading } from '@twilio-paste/heading';
import { Paragraph } from '@twilio-paste/paragraph';

<Card>
  <Heading as="h3" variant="heading30">
    Card Title
  </Heading>
  <Paragraph>This is the card content.</Paragraph>
</Card>

​
Props

​
Card

​
element
string
default:"CARD"
Overrides the default element name to apply unique styles with the Customization Provider.
​
padding
Space
default:"space100"
Sets padding for all sides of the card.
​
paddingTop
Space
Sets top padding, overriding the padding prop.
​
paddingRight
Space
Sets right padding, overriding the padding prop.
​
paddingBottom
Space
Sets bottom padding, overriding the padding prop.
​
paddingLeft
Space
Sets left padding, overriding the padding prop.
​
fillHeight
boolean
default:"false"
Force the height to take up the full height of the parent element.
​
fillWidth
boolean
default:"false"
Force the width to take up the full width of the parent element.

​
Examples

​
Custom Padding

<Card padding="space60">
  <Paragraph>Smaller padding</Paragraph>
</Card>

​
Full Width Card

<Card fillWidth>
  <Paragraph>This card fills the width of its container</Paragraph>
</Card>

​
Full Height Card

<Card fillHeight>
  <Paragraph>This card fills the height of its container</Paragraph>
</Card>

Build docs developers (and LLMs) love

Get started for freeTalk to us