Cards

Examples of combining @theme-ui/components to create and style cards.

Vertical Stack

Vertical stacked card content.

The Beach Front

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

summer

photography

travel

<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>
<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.

The Beach Front

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

summer

photography

travel

<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>
<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>