Card

A card component that can be used to display content in a box.

Header

Body

Footer

API reference

Card

A card component that can be used to display content in a box.

Prop	Type	Default	Responsive
className	string	-	No
style	CSSProperties	-	No

CardHeader

To display a header in a card, use the CardHeader component. This will be fixed at the top of the card.

Prop	Type	Default	Responsive
className	string	-	No
style	CSSProperties	-	No

CardBody

To display content in a card, use the CardBody component. This will automatically fill the card.

Prop	Type	Default	Responsive
className	string	-	No
style	CSSProperties	-	No

CardFooter

To display a footer in a card, use the CardFooter component. This will be fixed at the bottom of the card.

Prop	Type	Default	Responsive
className	string	-	No
style	CSSProperties	-	No

Examples

With long body

Here's a view when card has a long body.

Header

This is the first paragraph of a long body text that demonstrates how the Card component handles extensive content. The card should adjust accordingly to display all the text properly while maintaining its structure.

Here's a second paragraph that adds more content to our card body. Having multiple paragraphs helps to visualize how spacing works within the card component.

This third paragraph continues to add more text to ensure we have a proper demonstration of a card with significant content. This makes it easier to test scrolling behavior and overall layout when content exceeds the initial view.

Footer

<Card style={{ width: '300px', height: '200px' }}>
  <CardHeader>
    <Text>Header</Text>
  </CardHeader>
  <CardBody>
    <Text>
      This is the first paragraph of a long body text that demonstrates how
      the Card component handles extensive content. The card should adjust
      accordingly to display all the text properly while maintaining its
      structure.
    </Text>
    <Text>
      Here's a second paragraph that adds more content to our card body.
      Having multiple paragraphs helps to visualize how spacing works within
      the card component.
    </Text>
    <Text>
      This third paragraph continues to add more text to ensure we have a
      proper demonstration of a card with significant content. This makes it
      easier to test scrolling behavior and overall layout when content
      exceeds the initial view.
    </Text>
  </CardBody>
  <CardFooter>
    <Text>Footer</Text>
  </CardFooter>
</Card>

With list

Here's a view when card has a list.

Header

Hello world

Footer

<Card style={{ width: '300px', height: '200px' }}>
  <CardHeader>
    <Text>Header</Text>
  </CardHeader>
  <CardBody>
    <ListRow>Hello world</ListRow>
    <ListRow>Hello world</ListRow>
    <ListRow>Hello world</ListRow>
    <ListRow>Hello world</ListRow>
    ...
  </CardBody>
  <CardFooter>
    <Text>Footer</Text>
  </CardFooter>
</Card>