--- id: Card section: components wrapperTag: div ---import './Card.css' ## Demos ### Horizontal grid collapsed ```html

Getting started

  • Set up your cluster
  • Guided tours
  • Quick starts
``` ### Horizontal grid expanded ```html

Getting started

Set up your cluster

Continue setting up your cluster to access all you can 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 ```html

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 ```html

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
``` ### Aggregate status card ```html

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 ```html

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 ```html

Status

Cluster
Control Panel
Operators
1 degraged
Image Vulnerabilities
0 vulnerable images
``` ### Status card expanded notifications ```html

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 ```html

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 ```html

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 ```html

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 ```html 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 ```html

CPU Usage

Threshold chart
See details
``` ### Nested cards with expand toggle on the right ```html

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 ```html

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 ```html

Hardware Monitor

``` ### Trend card 1 ```html 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 ```html

842 TB

Storage capacity
Line Chart
Action 1 Action 2
``` ### Log view ```html 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 ```html 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
```