Card

Cards are elevated containers of content, and are used in a variety of contexts. Card shares many of the utility props of <Box/>.

<Card marginBottom="large">
  <Text>Simple Card</Text>
</Card>
<Card padding="none" marginBottom="large">
  <Text>Card with no inset</Text>
</Card>
<Card title="Title" marginBottom="large">
  <Text>Card with Title</Text>
</Card>
<Card
  title="Title"
  buttonLabel="+ Add"
  onButtonPress={() => console.log("You've pressed me!")}
>
  <Text>Card with Title and Action</Text>
</Card>

Margin and Padding

This components mimics the Box component from our web design system for margin and padding. Margin and padding can be controlled in any direction, using shorthand utility props like padding, for padding in all directions, paddingX for horizontal padding, or paddingLeft for padding left. Margin follows the same rules.

<Card
  paddingLeft="xlarge"
  paddingTop="small"
  paddingBottom="medium"
  marginX="medium"
  marginY="large"
>
  <Text>Hello!</Text>
</Card>

The valid tokens for these props come from 'spacing'.

All Props