Overview
Getting Started
Installation
About
Changelog
Core Concepts
Iconography
Layout
Responsive
Theming
Layout Components
Box
Alpha
Container
Alpha
Grid
Alpha
Flex
Alpha
Components
Avatar
Alpha
Button
Alpha
ButtonIcon
Alpha
ButtonLink
Alpha
Card
Alpha
Checkbox
Alpha
Collapsible
Alpha
Header
Alpha
HeaderPage
Alpha
Icon
Alpha
Link
Alpha
Menu
Alpha
RadioGroup
Alpha
SearchField
Alpha
Select
Alpha
Skeleton
Alpha
Switch
Alpha
Table
Alpha
Tabs
Alpha
TagGroup
Alpha
Text
Alpha
TextField
Alpha
Tooltip
Alpha
Version 0.7.0 - Alpha
Card
component

Card

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

Header
Body
Footer

Usage

import { card } 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
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
className
string
-No
style
CSSProperties
-No

CardBody

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

PropTypeDefaultResponsive
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
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
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
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>

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.

Changelog