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

Details

Cluster API Address
https://api1.devcluster.openshift.com
Cluster ID
63b97ac1-b850-41d9-8820-239becde9e86
Provider
AWS
OpenShift Version
4.5.0.ci-2020-06-16-015028
Update Channel
stable-4.5
View Settings

Details

Cluster API Address
https://api2.devcluster.openshift.com
Cluster ID
08908908-b850-41d9-8820-239becde9e86
Provider
Azure
OpenShift Version
4.5.0.ci-2020-06-16-015026
Update Channel
stable-4.4
View Settings

Aggregiate status card

5 Clusters
15 Clusters
3 Clusters
10 Hosts
2
1
50 Hosts
5
12
12 Hosts
2
7
13 Hosts
2 errors subtitle
1 warnings subtitle
3 Hosts
2 successes subtitle
3 warnings subtitle
50 Hosts
7 warnings subtitle
1 error subtitle

Status, tabbed card

Status

Running
Resource name that is long and can wrap
121 systems

Ready
Resource name
121 systems

Running
Resource name that is long and can wrap
121 systems

Ready
Resource name that is long and can wrap
121 systems

Status card

Status

Cluster
Control Panel
Operators
1 degraged
Image Vulnerabilities
0 vulnerable images

Status card expanded notifications

Status

Cluster
Control Panel
Operators
1 degraged
Image Vulnerabilities
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
Operators
1 degraged
Image Vulnerabilities
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

Top Utilized Clusters

Cluster-1204 27.3 cores available
Line Chart
View details
Abcdef-1204 50.6 cores available
Line Chart
View details
View all clusters

Utilization card 2

Top Utilized Clusters

Cluster-1204 27.3 cores available
Line Chart
Abcdef-1204 50.6 cores available
Line Chart
View all clusters

Utilization card 3

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

Recommendations

System
25 incidents detected
Stack chart
See details

Utilization card 4

CPU Usage

Threshold chart
See details

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.

1,050,765 IOPS

Workload
Line Chart

Trend card 2

842 TB

Storage capacity
Line Chart
Action 1 Action 2

Log view

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

Activity

Readiness probe failed
Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused
Successful assignment
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
Pulling image
Pulling image "openshift/hello-openshift"
Created container
Created container hello-openshift
View all activity

Events view

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

Events

Readiness probe failed
Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused
Successful assignment
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
Pulling image
Pulling image "openshift/hello-openshift"
Created container
Created container hello-openshift
View all events

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines