Cards
Examples of combining @theme-ui/components
to create and style cards.
Vertical Stack
Vertical stacked card content.
![](https://images.unsplash.com/photo-1495954484750-af469f2f9be5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80)
The Beach Front
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
<Card sx={{ borderRadius: '3', boxShadow: '0 8px 16px -4px rgba(0,0,0,.1), 0 0 8px -3px rgba(0,0,0,.1)', }}>
<Image src={beach} sx={{ borderTopLeftRadius: '3', borderTopRightRadius: '3' }} />
<Box sx={{ p: '3' }}>
<Heading as='h2' mb={2} >The Beach Front</Heading>
<Text mb={3}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</Text>
<Flex>
<Badge mr={1}>summer</Badge><Badge mr={1}>photography</Badge><Badge mr={1}>travel</Badge>
</Flex>
</Box>
</Card>
Horizontal Stack
Left aligned content in a wider displyed card.
![](https://images.unsplash.com/photo-1495954484750-af469f2f9be5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80)
The Beach Front
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
<Card sx={{ borderRadius: '3', display: 'grid', gridTemplateColumns: '1fr 2fr', border: '1px solid', borderColor: 'border', boxShadow: '0 8px 16px -4px rgba(0,0,0,.1)' }}>
<Image src={beach} sx={{ height: '100%', objectFit: 'cover', borderTopLeftRadius: '3', borderBottomLeftRadius: '3' }}/>
<Box sx={{ p: '3' }}>
<Heading as='h2' mb={2} >The Beach Front</Heading>
<Text mb={3}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</Text>
<Flex>
<Badge mr={1}>summer</Badge><Badge mr={1}>photography</Badge><Badge mr={1}>travel</Badge>
</Flex>
</Box>
</Card>