Skip to content
Patternfly Logo

Card

Demos

Horizontal card grid

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

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

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