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

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

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

``` ### Aggregate status card ```html

5 Clusters

15 Clusters

3 Clusters

10 Hosts

50 Hosts

12 Hosts

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

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

Cluster

Operators

1 degraged

Image Vulnerabilities

0 vulnerable images

``` ### Status card expanded notifications ```html

Cluster

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

Cluster

Control Panel

	Components	Response rate
	API Servers	20%
Danger alert: This is a critical alert that can be associated with the control panel.
	Controller Managers	100%
This is message
	Schedulers	100%
This is the message
	etcd	91%
This is the message

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

View details

Abcdef-1204 50.6 cores available

View details

``` ### Utilization card 2 ```html

Top Utilized Clusters

Cluster-1204 27.3 cores available

Abcdef-1204 50.6 cores available

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

``` ### Utilization card 4 ```html

CPU Usage

``` ### Nested cards with expand toggle on the right ```html

Temperature

64C

100C

50C

Speed

2.3Ghz

36hz

1.5Ghz

0Ghz

``` ### Nested cards with expand toggle ```html

Temperature

64C

100C

50C

Speed

2.3Ghz

36hz

1.5Ghz

0Ghz

``` ### With accordion ```html

Temperature

64C

100C

50C

Speed

2.3Ghz

36hz

1.5Ghz

0Ghz

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

``` ### Trend card 2 ```html

``` ### 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; Jun 17, 11:02 am
Successful assignment: Successfully assigned default/example to ip-10-0-130-149.ec2.internal; Jun 17, 11:13 am
Pulling image: Pulling image "openshift/hello-openshift"; Jun 17, 10:59 am
Created container: Created container hello-openshift; Jun 17, 10:45 am

``` ### 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; Jun 17, 11:02 am
Successful assignment: Successfully assigned default/example to ip-10-0-130-149.ec2.internal; Jun 17, 11:13 am
Pulling image: Pulling image "openshift/hello-openshift"; Jun 17, 10:59 am
Created container: Created container hello-openshift; Jun 17, 10:45 am

```

Getting started

Getting started

Headline

Details

Details

5 Clusters

15 Clusters

3 Clusters

10 Hosts

50 Hosts

12 Hosts

13 Hosts

3 Hosts

50 Hosts

Status

Running

Ready

Running

Ready

Status

Danger notification: Critical alert regarding control plane

Warning notification: Warning alert

Status

Danger notification: Critical alert regarding control plane

Warning notification: Warning alert

Status

Danger notification: Critical alert regarding control plane

Warning notification: Warning alert

Top Utilized Clusters

Top Utilized Clusters

Recommendations

CPU Usage

Hardware Monitor

CPU 1

CPU 2

CPU 3

Hardware Monitor

CPU 1

CPU 2

CPU 3

Hardware Monitor

CPU 1

CPU 2

CPU 3

1,050,765 IOPS

842 TB

Activity

Events