Skip to content
PatternFly logo

Page

Demos

Basic

Basic screenshot

Full height page Beta

Using the .pf-m-full-height modifier class on the page component eliminates the need to ensure that the <html> and <body> tags, and any other ancestors of .pf-c-page, have height set to 100%.

Full height page screenshot

Sticky horizontal subnav

Sticky horizontal subnav screenshot
Sticky breadcrumb screenshot
Sticky breadcrumb on medium screenshot

Sticky section group

Sticky section group screenshot

Sticky section bottom

Sticky section bottom screenshot

Overflow scroll

Overflow scroll screenshot

Centered section

Centered section screenshot

Documentation

To make the page component fill the full height of the viewport, it is recommended to add height: 100%; to all ancestor elements of the page component. Alternatively, use the .pf-m-full-height modifier class on the page component.


View source on GitHub