Page

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

Demos

Basic

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

Sticky horizontal subnav

Sticky section group

Sticky section bottom

Overflow scroll

Centered section

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH