HTML

Page

ExamplesDocumentationCSS Variables

Examples

Vertical nav

pf-c-nav

Horizontal nav

With or without fill

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

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-mobile` to remove padding on mobile only.

Documentation

Overiew

This component provides the basic chrome for a page, including sidebar, header, and main areas.

Accessibility

AttributeApplied toOutcome
role="banner".pf-c-page__headerIdentifies the element that serves as the banner region. Required
role="main".pf-c-page__mainIdentifies the element that serves as the main region. Required
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>Creates a link for the brand logo.
.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__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__drawer<div>Creates a container for the drawer component when placing the main page element in the drawer body.
.pf-m-icons.pf-c-page__header-tools divModifier for responsive behavior of header icons list.
.pf-m-mobile.pf-c-page__header-tools .pf-c-buttonModifier for responsive behavior of mobile menu.
.pf-m-user.pf-c-page__header-tools divModifier for responsive behavior of user menu.
.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-dark.pf-c-page__sidebarModifies the sidebar the dark variation. Note: for use with a dark 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-c-page__main-sectionModifies a main page section to have no padding.
.pf-m-no-padding-mobile.pf-c-page__main-sectionModifies a main page section to have no padding on mobile.
.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.

CSS Variables

--pf-c-page__header-brand-link--c-brand--MaxHeightc_page__header_brand_link_c_brand_MaxHeight
3.75rem
--pf-c-page__header-brand--md--PaddingLeftc_page__header_brand_md_PaddingLeft
1.5rem
--pf-c-page__header-brand--md--PaddingRightc_page__header_brand_md_PaddingRight
2rem
--pf-c-page__header-brand--PaddingLeftc_page__header_brand_PaddingLeft
1rem
--pf-c-page__header--MinHeightc_page__header_MinHeight
4.75rem
--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColor
#212427
--pf-c-page__header-nav--c-nav__scroll-button--lg--BackgroundColorc_page__header_nav_c_nav__scroll_button_lg_BackgroundColor
#212427
--pf-c-page__header-nav--c-nav__scroll-button--lg--Topc_page__header_nav_c_nav__scroll_button_lg_Top
0
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_Left
calc(-1*(1rem - 0.25rem))
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--lg--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_lg_Left
0
--pf-c-page__header-nav--c-nav__scroll-button--nth-of-type-1--md--Leftc_page__header_nav_c_nav__scroll_button_nth_of_type_1_md_Left
calc(-1*(1rem - 0.25rem))
--pf-c-page__header-nav--lg--BackgroundColorc_page__header_nav_lg_BackgroundColor
transparent
--pf-c-page__header-nav--lg--MarginLeftc_page__header_nav_lg_MarginLeft
2rem
--pf-c-page__header-nav--lg--MarginRightc_page__header_nav_lg_MarginRight
2rem
--pf-c-page__header-nav--lg--PaddingLeftc_page__header_nav_lg_PaddingLeft
0
--pf-c-page__header-nav--md--PaddingLeftc_page__header_nav_md_PaddingLeft
1.5rem
--pf-c-page__header-nav--PaddingLeftc_page__header_nav_PaddingLeft
1rem
--pf-c-page__header-sidebar-toggle__c-button--FontSizec_page__header_sidebar_toggle__c_button_FontSize
1.5rem
--pf-c-page__header-sidebar-toggle__c-button--MarginLeftc_page__header_sidebar_toggle__c_button_MarginLeft
calc(0.5rem*-1)
--pf-c-page__header-sidebar-toggle__c-button--MarginRightc_page__header_sidebar_toggle__c_button_MarginRight
1rem
--pf-c-page__header-sidebar-toggle__c-button--md--MarginLeftc_page__header_sidebar_toggle__c_button_md_MarginLeft
calc(0.5rem*-1)
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottomc_page__header_sidebar_toggle__c_button_PaddingBottom
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeftc_page__header_sidebar_toggle__c_button_PaddingLeft
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRightc_page__header_sidebar_toggle__c_button_PaddingRight
0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTopc_page__header_sidebar_toggle__c_button_PaddingTop
0.5rem
--pf-c-page__header-tools--c-avatar--MarginLeftc_page__header_tools_c_avatar_MarginLeft
1rem
--pf-c-page__header-tools-group--MarginLeftc_page__header_tools_group_MarginLeft
2rem
--pf-c-page__header-tools--MarginBottomc_page__header_tools_MarginBottom
0.5rem
--pf-c-page__header-tools--MarginRightc_page__header_tools_MarginRight
1rem
--pf-c-page__header-tools--MarginTopc_page__header_tools_MarginTop
0.5rem
--pf-c-page__header-tools--md--MarginRightc_page__header_tools_md_MarginRight
1.5rem
--pf-c-page__header--ZIndexc_page__header_ZIndex
300
--pf-c-page__main-breadcrumb--BackgroundColorc_page__main_breadcrumb_BackgroundColor
#fff
--pf-c-page__main-breadcrumb--md--PaddingLeftc_page__main_breadcrumb_md_PaddingLeft
1.5rem
--pf-c-page__main-breadcrumb--md--PaddingRightc_page__main_breadcrumb_md_PaddingRight
1.5rem
--pf-c-page__main-breadcrumb--md--PaddingTopc_page__main_breadcrumb_md_PaddingTop
1.5rem
--pf-c-page__main-breadcrumb--PaddingBottomc_page__main_breadcrumb_PaddingBottom
0
--pf-c-page__main-breadcrumb--PaddingLeftc_page__main_breadcrumb_PaddingLeft
1rem
--pf-c-page__main-breadcrumb--PaddingRightc_page__main_breadcrumb_PaddingRight
1rem
--pf-c-page__main-breadcrumb--PaddingTopc_page__main_breadcrumb_PaddingTop
0
--pf-c-page__main-nav--BackgroundColorc_page__main_nav_BackgroundColor
#fff
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-1--Leftc_page__main_nav_c_nav__scroll_button_nth_of_type_1_Left
calc(-1*(1.5rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-1--md--Leftc_page__main_nav_c_nav__scroll_button_nth_of_type_1_md_Left
calc(-1*(1rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-2--md--Rightc_page__main_nav_c_nav__scroll_button_nth_of_type_2_md_Right
calc(-1*(1rem - 0.25rem))
--pf-c-page__main-nav--c-nav__scroll-button--nth-of-type-2--Rightc_page__main_nav_c_nav__scroll_button_nth_of_type_2_Right
calc(-1*(1.5rem - 0.25rem))
--pf-c-page__main-nav--main-breadcrumb--PaddingTopc_page__main_nav_main_breadcrumb_PaddingTop
0
--pf-c-page__main-nav--md--PaddingLeftc_page__main_nav_md_PaddingLeft
1.5rem
--pf-c-page__main-nav--md--PaddingRightc_page__main_nav_md_PaddingRight
1.5rem
--pf-c-page__main-nav--PaddingBottomc_page__main_nav_PaddingBottom
1rem
--pf-c-page__main-nav--PaddingLeftc_page__main_nav_PaddingLeft
1rem
--pf-c-page__main-nav--PaddingRightc_page__main_nav_PaddingRight
1rem
--pf-c-page__main-nav--PaddingTopc_page__main_nav_PaddingTop
0.5rem
--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColor
rgba(3,3,3,0.32)
--pf-c-page__main-section--m-dark-100--BackgroundColorc_page__main_section_m_dark_100_BackgroundColor
rgba(3,3,3,0.62)
--pf-c-page__main-section--m-dark-200--BackgroundColorc_page__main_section_m_dark_200_BackgroundColor
rgba(3,3,3,0.32)
--pf-c-page__main-section--m-light--BackgroundColorc_page__main_section_m_light_BackgroundColor
#fff
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingBottomc_page__main_section_m_no_padding_mobile_md_PaddingBottom
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingLeftc_page__main_section_m_no_padding_mobile_md_PaddingLeft
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingRightc_page__main_section_m_no_padding_mobile_md_PaddingRight
0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingTopc_page__main_section_m_no_padding_mobile_md_PaddingTop
0
--pf-c-page__main-section--md--PaddingBottomc_page__main_section_md_PaddingBottom
1.5rem
--pf-c-page__main-section--md--PaddingLeftc_page__main_section_md_PaddingLeft
1.5rem
--pf-c-page__main-section--md--PaddingRightc_page__main_section_md_PaddingRight
1.5rem
--pf-c-page__main-section--md--PaddingTopc_page__main_section_md_PaddingTop
1.5rem
--pf-c-page__main-section--PaddingBottomc_page__main_section_PaddingBottom
1rem
--pf-c-page__main-section--PaddingLeftc_page__main_section_PaddingLeft
1rem
--pf-c-page__main-section--PaddingRightc_page__main_section_PaddingRight
1rem
--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop
1rem
--pf-c-page__main-wizard--BorderTopColorc_page__main_wizard_BorderTopColor
#d2d2d2
--pf-c-page__main-wizard--BorderTopWidthc_page__main_wizard_BorderTopWidth
1px
--pf-c-page__main--ZIndexc_page__main_ZIndex
auto
--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor
#212427
--pf-c-page__sidebar-body--PaddingBottomc_page__sidebar_body_PaddingBottom
1rem
--pf-c-page__sidebar-body--PaddingTopc_page__sidebar_body_PaddingTop
0.5rem
--pf-c-page__sidebar--BoxShadowc_page__sidebar_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-page__sidebar--m-dark--BackgroundColorc_page__sidebar_m_dark_BackgroundColor
#212427
--pf-c-page__sidebar--m-expanded--Transformc_page__sidebar_m_expanded_Transform
translateZ(0)
--pf-c-page__sidebar--md--Transformc_page__sidebar_md_Transform
translateZ(0)
--pf-c-page__sidebar--md--Widthc_page__sidebar_md_Width
18.125rem
--pf-c-page__sidebar--Transformc_page__sidebar_Transform
translateZ(0)
--pf-c-page__sidebar--Transitionc_page__sidebar_Transition
all 250ms ease-in-out
--pf-c-page__sidebar--Widthc_page__sidebar_Width
80%
--pf-c-page__sidebar--ZIndexc_page__sidebar_ZIndex
200
--pf-c-page--BackgroundColorc_page_BackgroundColor
#151515