Skip to content
Patternfly Logo

Card

A card is a square or rectangular container that can contain any kind of content. Cards symbolize units of information, and each one acts as an entry point for users to access more details. For example, in dashboards and catalog views, cards function as a preview of a detailed page. Cards may also be used in data displays like card views, or for positioning content on a page.

Demos

Horizontal card grid

The following demo shows how you may use a <Grid> within a card for scenarios that require multiple subsections.

Getting Started
  • Set up your cluster
  • Guided tours
  • Quick starts

Horizontal split

The following demo shows how you may utilize <Grid> to split a card into two halves, one with an image, and one with text content.

Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.

Details card

Aggregate status card

Status

Status

Cluster
1 degraded
0 vulnerabilities

Utilization card 1

Utilization card 2

Utilization card 3

Note: Custom CSS is used in this demo to align the card title and select toggle text to baseline alignment.

Utilization card 4

Nested cards

Hardware Monitor

CPU 1
Temperature

64C
100C
50C
0C
Mock CPU temperature sparkline chartMock CPU temperature

Speed

2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
Mock CPU speed sparkline chartMock CPU speed
CPU 2
CPU 3

With accordion

Hardware Monitor

Temperature

64C
100C
50C
0C
Mock CPU temperature sparkline chartMock CPU temperature

Speed

2.3Ghz
3.6Ghz
1.5Ghz
0GHZ
Mock CPU speed sparkline chartMock CPU speed

Trend card 1

Note: Custom CSS is used in this demo to align the card title and select toggle text to baseline alignment.

Trend card 2

Log view

Note: Custom CSS is used in this demo to align the card title and select toggle text to baseline alignment.

Events view

Note: Custom CSS is used in this demo to align the card title and select toggle text to baseline alignment.


View source on GitHub