Compass

This demo populates the main Compass section with a card view, which is one of the more common page types used within a Compass layout. In this demo, the page includes:

• A .pf-v6-c-compass__main-header that contains the page title and toolbar with action items.
• A .pf-v6-c-compass__content, which contains a glass panel component to create a rounded-rectangle container that serves as the main content background.

This demo populates the main Compass section with a dashboard, which is often used as the landing page within a Compass layout. This demo page includes:

• A .pf-v6-c-hero component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs.
• A .pf-v6-c-compass__content without a glass panel component wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card has a glass modifier.

This demo places multiple sections within the main Compass section, with each section containing a card view.

Without a glass panel component wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the .pf-v6-c-compass__content is a grid with 2 independently scrollable glass panel components.

This demo showcases how you can position a side-panel drawer on top of the other Compass elements.