Patternfly Logo

Examples

Vertical nav

toggle
Logo
header-tools
pf-c-nav

Horizontal nav

pf-c-nav
header-tools

With or without fill

pf-c-nav
header-tools
This section uses pf-m-fill to fill the available space.
This section uses pf-m-no-fill to not fill the available space.

Main section padding

toggle
Logo
header-tools
pf-c-nav
This `.pf-c-page__main-section` has default padding.
This `.pf-c-page__main-section` uses `.pf-m-no-padding` to remove all padding.
This `.pf-c-page__main-section` uses `.pf-m-no-padding .pf-m-padding-on-md` to remove padding up to the `md` breakpoint.

Main section variations

toggle
Logo
header-tools
pf-c-nav
`.pf-c-page__main-nav` for tertiary navigation
`.pf-c-page__main-breadcrumb` for breadcrumbs
`.pf-c-page__main-section` for main sections
`.pf-c-page__main-wizard` for wizards

Documentation

Overview

This component provides the basic chrome for a page, including sidebar, header, and main areas. To make the page component take up the full height of the viewport, it is recommended to add height: 100%; to all ancestor elements of the page component.

Accessibility

AttributeApplied toOutcome
role="banner".pf-c-page__headerIdentifies the element that serves as the banner region.
role="main".pf-c-page__mainIdentifies the element that serves as the main region.
tabindex="-1".pf-c-page__mainAllows the main region to receive programmatic focus. Required
id="[id]".pf-c-page__mainProvides a hook for sending focus to new content. Required
aria-expanded="true/false".pf-c-page__header-brand-toggle > .pf-c-buttonIndicates that the expandable content is visible and the current state of the contents. Required
aria-controls="[id of nav]".pf-c-page__header-brand-toggle > .pf-c-buttonIdentifies the element controlled by the toggle. Required

Usage

ClassApplied toOutcome
.pf-c-page<div>Declares the page component.
.pf-c-page__header<header>Declares the page header.
.pf-c-page__header-brand<div>Creates a header container to nest the brand component.
.pf-c-page__header-brand-toggle<div>Creates a container to nest the sidebar toggle.
.pf-c-page__header-brand-link<a>, <span>Creates a link for the brand logo. Use a <span> if there is no link.
.pf-c-page__header-selector<div>Creates a header container to nest the context selector component.
.pf-c-page__header-nav<div>Creates a container to nest the navigation component in the header.
.pf-c-page__header-tools<div>Creates a container to nest the icons and menus in header.
.pf-c-page__header-tools-group<div>Creates a container for grouping sets of icons and menus in header.
.pf-c-page__header-tools-item<div>Creates a container for an item in a header tools group.
.pf-c-page__sidebar<aside>Declares the page sidebar.
.pf-c-page__sidebar-body<div>Creates a wrapper within the sidebar to hold content.
.pf-c-page__main<main>Declares the main page area.
.pf-c-page__main-nav<section>Creates a container to nest the navigation component in the main page area.
.pf-c-page__main-breadcrumb<section>Creates a container to nest the breadcrumb component in the main page area.
.pf-c-page__main-section<section>Creates a section container in the main page area. Note: The last/only .pf-c-page__main-section element will grow to fill the availble vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below.
.pf-c-page__main-wizard<section>Creates a container to nest the wizard component in the mian page area.
.pf-c-page__main-body<div>Creates the body section for a page section. Required when using .pf-m-limit-width on .pf-c-page__main-section
.pf-c-page__main-group<div>Creates the group of .pf-c-page__main-* sections. Can be used in combination with .pf-m-sticky-[top/bottom] to make multiple sections sticky.
.pf-c-page__drawer<div>Creates a container for the drawer component when placing the main page element in the drawer body.
.pf-m-selected.pf-c-page__header-tools-itemModifies a header tools item to indicate that the button inside is in the selected state.
.pf-m-expanded.pf-c-page__sidebarModifies the sidebar for the expanded state.
.pf-m-collapsed.pf-c-page__sidebarModifies the sidebar for the collapsed state.
.pf-m-light.pf-c-page__sidebarModifies the sidebar the light variation. Note: for use with a light themed nav component
.pf-m-light.pf-c-page__main-sectionModifies a main page section to have a light theme.
.pf-m-dark-200.pf-c-page__main-sectionModifies a main page section to have a dark theme and a dark transparent background.
.pf-m-dark-100.pf-c-page__main-sectionModifies a main page section to have a dark theme and a darker transparent background.
.pf-m-no-padding, .pf-m-no-padding{-on-[breakpoint]}.pf-c-page__main-sectionRemoves padding from the main page section at an optional breakpoint
.pf-m-padding{-on-[breakpoint]}.pf-c-page__main-sectionModifies the main page section to add padding back in at a specified breakpoint. Should be used with pf-m-no-padding.
.pf-m-fill.pf-c-page__main-sectionModifies a main page section to grow to fill the available vertical space.
.pf-m-no-fill.pf-c-page__main-sectionModifies a main page section to not grow to fill the available vertical space.
.pf-m-hidden{-on-[breakpoint]}.pf-c-page__header-tools-group, .pf-c-page__header-tools-itemHides a header tools group or item at a specified breakpoint, or hides it at all breakpoints with .pf-m-hidden.
.pf-m-visible{-on-[breakpoint]}.pf-c-page__header-tools-group, .pf-c-page__header-tools-itemShows a header tools group or item at a specified breakpoint.
.pf-m-limit-width.pf-c-page__main-sectionModifies a page section to limit the max-width of the content inside.
.pf-m-sticky-top.pf-c-page__main-*Modifies a section/group to be sticky to the top of its container.
.pf-m-sticky-bottom.pf-c-page__main-*Modifies a section/group to be sticky to the bottom of its container.
.pf-m-shadow-bottom.pf-c-page__main-*Modifies a section/group to have a bottom shadow.
.pf-m-shadow-top.pf-c-page__main-*Modifies a section/group to have a top shadow.
.pf-m-overflow-scroll.pf-c-page__main-*Modifies a section/group to show a scrollbar if it has overflow content.

CSS variables

.pf-c-page__sidebar.pf-m-light--pf-global--Color--100
#151515
.pf-c-page__sidebar.pf-m-light--pf-global--Color--200
#6a6e73
.pf-c-page__sidebar.pf-m-light--pf-global--BorderColor--100
#d2d2d2
.pf-c-page__sidebar.pf-m-light--pf-global--primary-color--100
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color
#06c
.pf-c-page__sidebar.pf-m-light--pf-global--link--Color--hover
#004080
.pf-c-page__sidebar.pf-m-light--pf-global--BackgroundColor--100
#fff
.pf-c-page__sidebar.pf-m-light--pf-c-page__sidebar--BackgroundColor
#fff
.pf-c-page__header--pf-global--Color--100
#fff
.pf-c-page__header--pf-global--Color--200
#f0f0f0
.pf-c-page__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-page__header--pf-global--primary-color--100
#73bcf7
.pf-c-page__header--pf-global--link--Color
#73bcf7
.pf-c-page__header--pf-global--link--Color--hover
#73bcf7
.pf-c-page__header--pf-global--BackgroundColor--100
#151515
.pf-c-page__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-page__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Display
none
.pf-c-page__header-tools-group--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-page__header-tools-group--pf-hidden-visible--Display
flex
.pf-c-page__header-tools-group--pf-hidden-visible--Visibility
visible
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-page__header-tools-group--pf-hidden-visible--Visibility
hidden
.pf-c-page--pf-c-page--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__header--BackgroundColor
#151515
.pf-c-page--pf-c-page__header--ZIndex
300
.pf-c-page--pf-c-page__header--MinHeight
4.75rem
.pf-c-page--pf-c-page__header-brand--PaddingLeft
1rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-brand--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingTop
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingRight
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginRight
1rem
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--MarginLeft
calc(0.5rem * -1)
.pf-c-page--pf-c-page__header-sidebar-toggle__c-button--FontSize
1.5rem
.pf-c-page--pf-c-page__header-brand-link--c-brand--MaxHeight
3.75rem
.pf-c-page--pf-c-page__header-nav--BackgroundColor
#212427
.pf-c-page--pf-c-page__header-nav--xl--BackgroundColor
transparent
.pf-c-page--pf-c-page__header-nav--xl--PaddingRight
2rem
.pf-c-page--pf-c-page__header-nav--xl--PaddingLeft
2rem
.pf-c-page--pf-c-page__header-tools--MarginRight
1rem
.pf-c-page--pf-c-page__header-tools--xl--MarginRight
1.5rem
.pf-c-page--pf-c-page__header-tools--c-avatar--MarginLeft
1rem
.pf-c-page--pf-c-page__header-tools-group--MarginLeft
2rem
.pf-c-page--pf-c-page__header-tools-group--Display
flex
.pf-c-page--pf-c-page__header-tools-item--Display
block
.pf-c-page--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor
#3c3f42
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--Width
auto
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--Height
auto
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor
#3c3f42
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius
3px
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor
transparent
.pf-c-page--pf-c-page__sidebar--ZIndex
200
.pf-c-page--pf-c-page__sidebar--Width
18.125rem
.pf-c-page--pf-c-page__sidebar--BackgroundColor
#212427
.pf-c-page--pf-c-page__sidebar--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__sidebar--BoxShadow
0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
.pf-c-page--pf-c-page__sidebar--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-page--pf-c-page__sidebar--TranslateX
-100%
.pf-c-page--pf-c-page__sidebar--TranslateZ
0
.pf-c-page--pf-c-page__sidebar--m-expanded--TranslateX
0
.pf-c-page--pf-c-page__sidebar--xl--TranslateX
0
.pf-c-page--pf-c-page__sidebar-body--PaddingTop
0.5rem
.pf-c-page--pf-c-page__sidebar-body--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--PaddingRight
1rem
.pf-c-page--pf-c-page__main-section--PaddingBottom
1rem
.pf-c-page--pf-c-page__main-section--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-section--xl--PaddingTop
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingBottom
1.5rem
.pf-c-page--pf-c-page__main-section--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-section--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__main--ZIndex
100
.pf-c-page--pf-c-page__main-breadcrumb--main-section--PaddingTop
1rem
.pf-c-page--pf-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
.pf-c-page--pf-c-page__main-nav--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-nav--PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--PaddingRight
0
.pf-c-page--pf-c-page__main-nav--PaddingLeft
0
.pf-c-page--pf-c-page__main-nav--xl--PaddingRight
0.5rem
.pf-c-page--pf-c-page__main-nav--xl--PaddingLeft
0.5rem
.pf-c-page--pf-c-page__main-breadcrumb--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-breadcrumb--PaddingTop
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingRight
1rem
.pf-c-page--pf-c-page__main-breadcrumb--PaddingBottom
0
.pf-c-page--pf-c-page__main-breadcrumb--PaddingLeft
1rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingRight
1.5rem
.pf-c-page--pf-c-page__main-breadcrumb--xl--PaddingLeft
1.5rem
.pf-c-page--pf-c-page__main-section--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-section--m-dark-100--BackgroundColor
rgba(#030303, .62)
.pf-c-page--pf-c-page__main-section--m-dark-200--BackgroundColor
rgba(#030303, .32)
.pf-c-page--pf-c-page__main-wizard--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-wizard--BorderTopColor
#d2d2d2
.pf-c-page--pf-c-page__main-wizard--BorderTopWidth
1px
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Display
block
.pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover--pf-c-notification-badge--after--BackgroundColor
#3c3f42
.pf-c-page__sidebar.pf-m-expanded--pf-c-page__sidebar--TranslateX
0
.pf-c-page__main-breadcrumb + .pf-c-page__main-section--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page__main-section.pf-m-light--pf-c-page__main-section--BackgroundColor
#fff
.pf-c-page__main-section.pf-m-dark-100--pf-c-page__main-section--BackgroundColor
rgba(#030303, .62)
.pf-c-page__main-section.pf-m-dark-200--pf-c-page__main-section--BackgroundColor
rgba(#030303, .32)
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingTop
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingRight
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingBottom
0
.pf-c-page__main-section.pf-m-no-padding--pf-c-page__main-section--PaddingLeft
0

View source on Github