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 grid collapsed

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

Horizontal grid expanded

Getting started
Set up your cluster

Continue setting up your cluster to access all you cain in the Console

View all set up cluster steps
Guided tours

Tour some of the key features around the console

View all guided tours
Quick starts

Get started with features using our step-by-step documentation

View all quick starts
Learning resources

Learn about new features within the Console and get started with demo apps

View all learning resources

Horizontal split

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

Aggregiate status card

Status, tabbed card

Status

Status card

Status

Cluster
1 degraged
0 vulnerable images

Status card expanded notifications

Status

Cluster
1 degraged
0 vulnerable images

  • Danger notification: Critical alert regarding control plane

    This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
  • Warning notification: Warning alert

    This is a warning notification description.

Status card expanded with popover

Status

Cluster
Control Panel
1 degraged
0 vulnerable images

  • Danger notification: Critical alert regarding control plane

    This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
  • Warning notification: Warning alert

    This is a warning notification description.

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 with expand toggle on the right

Hardware Monitor

CPU 1
Temperature

64C
100C
50C
0C
Line chart

Speed

2.3Ghz
36hz
1.5Ghz
0Ghz
Line chart
CPU 2
CPU 3

Nested cards with expand toggle

Hardware Monitor

CPU 1
Temperature

64C
100C
50C
0C
Line chart

Speed

2.3Ghz
36hz
1.5Ghz
0Ghz
Line chart
CPU 2
CPU 3

With accordion

Hardware Monitor

Temperature

64C
100C
50C
0C
Line chart

Speed

2.3Ghz
36hz
1.5Ghz
0Ghz
Line chart

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