--- id: Page section: components wrapperTag: div ---import './Page.css' ## Demos ### Basic ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Multiple sidebar body elements ```html isFullscreen

Custom sidebar content

Custom sidebar content

© Copyright

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Sticky horizontal subnav ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Sticky breadcrumb ```html isFullscreen ``` ### Sticky breadcrumb on medium ```html isFullscreen ``` ### Sticky section group ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Sticky section bottom ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

``` ### Overflow scroll ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

``` ### Centered section ```html isFullscreen

Centering page sections

When a width limited page section is wider than the value of --pf-v6-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.

All of the page sections on this page are centered.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

The content in this section is also centered using the .pf-v6-u-text-align-center utility class.

``` ### Context selector in sidebar ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Context selector expanded in sidebar ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Sidebar collapsed ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### Sidebar expanded ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### No sidebar ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

``` ### No sidebar or masthead ```html isFullscreen

Main title

This is a full page demo.

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

This is a card

```