ComponentsCard
Version 0.10.0

Card

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

Header
Body
Footer

Usage#

import { Card, CardHeader, CardBody, CardFooter } from '@backstage/ui';

<Card>
  <CardHeader>Header</CardHeader>
  <CardBody>Body</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>

API reference#

Card#

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

PropTypeDefaultResponsive
children
ReactNode
-No
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.

PropTypeDefaultResponsive
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

CardBody#

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

PropTypeDefaultResponsive
children
ReactNode
-No
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.

PropTypeDefaultResponsive
children
ReactNode
-No
className
string
-No
style
CSSProperties
-No

Examples#

Custom size#

Here's a view when card has a custom size.

Header
Body
Footer
<Card style={{ width: '300px', height: '200px' }}>
  <CardHeader>Header</CardHeader>
  <CardBody>Body</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>

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.
    </Text>
    <Text>
      Here's a second paragraph that adds more content to our card body.
    </Text>
    <Text>
      This third paragraph continues to add more text to ensure we have a
      proper demonstration of a card with significant content.
    </Text>
  </CardBody>
  <CardFooter>
    <Text>Footer</Text>
  </CardFooter>
</Card>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-Card
  • bui-CardHeader
  • bui-CardBody
  • bui-CardFooter

Changelog#

  • 0.8.0 - Cleaning up Backstage UI props definitions as well as removing ScrollArea in Card to improve accessibility. #31404
  • 0.7.0 - Export CardHeader, CardBody and CardFooter from Card component index #30882
  • 0.6.0 - New Card component. #30467