Skip to main content

Card

A container that groups related content and actions.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <Card>
    <CardBody>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Typography>
    </CardBody>
  </Card>
</Box>

Usage​

Use a header to provide more context of the cards purpose.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <Card>
    <CardHeader>Title</CardHeader>
    <CardBody>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Typography>
    </CardBody>
  </Card>
</Box>

Cards can contain actions for a user to perform.

http://localhost:3000
<Box css={{ maxWidth: 400 }}>
  <Card>
    <CardHeader>Title</CardHeader>
    <CardBody>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Typography>
    </CardBody>
    <CardFooter>
      <ButtonGroup>
        <Button variant="secondary">Cancel</Button>
        <Button variant="primary">Submit</Button>
      </ButtonGroup>
    </CardFooter>
  </Card>
</Box>

Props​

Card Props​

as?The root element to be rendered

CardBody Props​

as?The root element to be rendered

CardFooter Props​

as?The root element to be rendered

CardHeader Props​

as?The root element to be rendered