Version 0.11.2

Card

A container with header, body, and footer sections for grouped content.

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#

All Card components extend HTMLDivElement attributes.

Card#

PropTypeDefaultDescription
children
ReactNode
-Content to display inside the component.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

CardHeader#

Fixed at the top of the card.

PropTypeDefaultDescription
children
ReactNode
-Content to display inside the component.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

CardBody#

Scrollable content area that fills available space.

PropTypeDefaultDescription
children
ReactNode
-Content to display inside the component.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

CardFooter#

Fixed at the bottom of the card.

PropTypeDefaultDescription
children
ReactNode
-Content to display inside the component.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

Examples#

Header and body only#

Cards can omit the footer section.

<Card style={{ width: '300px', height: '200px' }}>
  <CardHeader>Header</CardHeader>
  <CardBody>Body content without a footer</CardBody>
</Card>
Header
Body content without a footer

Scrollable body#

When body content exceeds the available height, CardBody scrolls while header and footer remain fixed.

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

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

Changelog#