Skip to content
Patternfly Logo


The page component is used to define the basic layout of a page with either vertical or horizontal navigation.



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


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