Card

Card renders a responsive box-model layout component. Inherits props from Box component.

Usage Example

import {Card, Text, Icon, Button} from 'pipeline-ui'

Live Editor

<Card bg={"grey"} width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}> <Text caps fontSize={0} fontWeight={4} mb={3} display={"flex"} alignItems={"center"} > <Icon name={"AccountBalanceWallet"} mr={2} /> Your balance: </Text> <Button>Check</Button> </Card>

<Card bg={"grey"} width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>
  <Text
    caps
    fontSize={0}
    fontWeight={4}
    mb={3}
    display={"flex"}
    alignItems={"center"}
  >
  <Icon name={"AccountBalanceWallet"} mr={2} />
    Your balance:
  </Text>
  <Button>Check</Button>
</Card>

Result

Loading...

Props

Prop	Type	Default	Description
bg	string (optional)	'white'
border	integer (optional)	1
borderColor	string (optional)	'light-gray'
boxShadow	integer (optional)	2
p	integer (optional)	4
position	string (optional)	'relative'
theme	object (optional)

Box uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.