Card

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

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

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.