HTML

Page

ExamplesDocumentationCSS Variables

Examples

Page component, nav vertical example

pf-c-nav
Copied to clipboard

Page component, nav horizontal example

Copied to clipboard

Page component, fill/no fill example

This section uses pf-m-fill to fill the available space.
This section uses pf-m-no-fill to not fill the available space.
Copied to clipboard

Page component main section padding modifiers

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.
Copied to clipboard

Documentation

Overview

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

Accessibility

Attribute Applied to Outcome
role="banner" .pf-c-page__header Identifies the element that serves as the banner region. Required
role="main" .pf-c-page__main Identifies the element that serves as the main region. Required
aria-expanded="true/false" .pf-c-page__header-brand-toggle > .pf-c-button Indicates 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-button Identifies the element controlled by the toggle. Required

Usage

Class Applied to Outcome
.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-m-icons .pf-c-page__header-tools div Modifier for responsive behavior of header icons list.
.pf-m-mobile .pf-c-page__header-tools .pf-c-button Modifier for responsive behavior of mobile menu.
.pf-m-user .pf-c-page__header-tools div Modifier for responsive behavior of user menu.
.pf-m-expanded .pf-c-page__sidebar Modifies the sidebar for the expanded state.
.pf-m-collapsed .pf-c-page__sidebar Modifies the sidebar for the collapsed state.
.pf-m-light .pf-c-page__main-section Modifies a main page section to have a light theme.
.pf-m-dark-200 .pf-c-page__main-section Modifies a main page section to have a dark theme and a dark transparent background.
.pf-m-dark-100 .pf-c-page__main-section Modifies a main page section to have a dark theme and a darker transparent background.
.pf-m-no-padding .pf-c-page__main-section Modifies a main page section to have no padding.
.pf-m-no-padding-mobile .pf-c-page__main-section Modifies a main page section to have no padding on mobile.
.pf-m-fill .pf-c-page__main-section Modifies a main page section to grow to fill the available vertical space.
.pf-m-no-fill .pf-c-page__main-section Modifies a main page section to not grow to fill the available vertical space.

CSS Variables

--pf-c-page--BackgroundColorc_page_BackgroundColor#151515
--pf-c-page__header--MinHeightc_page__header_MinHeight4.75rem
--pf-c-page__header--ZIndexc_page__header_ZIndex300
--pf-c-page__header-brand--PaddingLeftc_page__header_brand_PaddingLeft1rem
--pf-c-page__header-brand-link--c-brand--MaxHeightc_page__header_brand_link_c_brand_MaxHeight3.75rem
--pf-c-page__header-brand--md--PaddingLeftc_page__header_brand_md_PaddingLeft1.5rem
--pf-c-page__header-brand--md--PaddingRightc_page__header_brand_md_PaddingRight2rem
--pf-c-page__header-nav--BackgroundColorc_page__header_nav_BackgroundColorrgba(3,3,3,.62)
--pf-c-page__header-nav--PaddingLeftc_page__header_nav_PaddingLeft1rem
--pf-c-page__header-nav--lg--BackgroundColorc_page__header_nav_lg_BackgroundColortransparent
--pf-c-page__header-nav--lg--MarginLeftc_page__header_nav_lg_MarginLeft2rem
--pf-c-page__header-nav--lg--MarginRightc_page__header_nav_lg_MarginRight2rem
--pf-c-page__header-nav--lg--PaddingLeftc_page__header_nav_lg_PaddingLeft0
--pf-c-page__header-nav--md--PaddingLeftc_page__header_nav_md_PaddingLeft2rem
--pf-c-page__header-sidebar-toggle__c-button--FontSizec_page__header_sidebar_toggle__c_button_FontSize1.5rem
--pf-c-page__header-sidebar-toggle__c-button--MarginLeftc_page__header_sidebar_toggle__c_button_MarginLeftcalc(0.25rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--MarginRightc_page__header_sidebar_toggle__c_button_MarginRight1rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottomc_page__header_sidebar_toggle__c_button_PaddingBottom0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeftc_page__header_sidebar_toggle__c_button_PaddingLeft0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRightc_page__header_sidebar_toggle__c_button_PaddingRight0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTopc_page__header_sidebar_toggle__c_button_PaddingTop0.5rem
--pf-c-page__header-sidebar-toggle__c-button--md--MarginLeftc_page__header_sidebar_toggle__c_button_md_MarginLeftcalc(0.5rem * -1)
--pf-c-page__header-tools--MarginBottomc_page__header_tools_MarginBottom0.5rem
--pf-c-page__header-tools--MarginRightc_page__header_tools_MarginRight1rem
--pf-c-page__header-tools--MarginTopc_page__header_tools_MarginTop0.5rem
--pf-c-page__header-tools--c-avatar--MarginLeftc_page__header_tools_c_avatar_MarginLeft1rem
--pf-c-page__header-tools-group--MarginLeftc_page__header_tools_group_MarginLeft2rem
--pf-c-page__header-tools--md--MarginRightc_page__header_tools_md_MarginRight1.5rem
--pf-c-page__main--ZIndexc_page__main_ZIndex100
--pf-c-page__main-breadcrumb--BackgroundColorc_page__main_breadcrumb_BackgroundColor#fff
--pf-c-page__main-breadcrumb--PaddingBottomc_page__main_breadcrumb_PaddingBottom0
--pf-c-page__main-breadcrumb--PaddingLeftc_page__main_breadcrumb_PaddingLeft1rem
--pf-c-page__main-breadcrumb--PaddingRightc_page__main_breadcrumb_PaddingRight1rem
--pf-c-page__main-breadcrumb--PaddingTopc_page__main_breadcrumb_PaddingTop0
--pf-c-page__main-breadcrumb--md--PaddingLeftc_page__main_breadcrumb_md_PaddingLeft1.5rem
--pf-c-page__main-breadcrumb--md--PaddingRightc_page__main_breadcrumb_md_PaddingRight1.5rem
--pf-c-page__main-breadcrumb--md--PaddingTopc_page__main_breadcrumb_md_PaddingTop1.5rem
--pf-c-page__main-nav--BackgroundColorc_page__main_nav_BackgroundColor#fff
--pf-c-page__main-nav--PaddingBottomc_page__main_nav_PaddingBottom1rem
--pf-c-page__main-nav--PaddingLeftc_page__main_nav_PaddingLeft1rem
--pf-c-page__main-nav--PaddingRightc_page__main_nav_PaddingRight1rem
--pf-c-page__main-nav--PaddingTopc_page__main_nav_PaddingTop0.5rem
--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_Leftcalc(-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_Leftcalc(-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_Rightcalc(-1 * (1.5rem - 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_Rightcalc(-1 * (1rem - 0.25rem))
--pf-c-page__main-nav--main-breadcrumb--PaddingTopc_page__main_nav_main_breadcrumb_PaddingTop0
--pf-c-page__main-nav--md--PaddingLeftc_page__main_nav_md_PaddingLeft1.5rem
--pf-c-page__main-nav--md--PaddingRightc_page__main_nav_md_PaddingRight1.5rem
--pf-c-page__main-section--BackgroundColorc_page__main_section_BackgroundColorrgba(3,3,3,.32)
--pf-c-page__main-section--PaddingBottomc_page__main_section_PaddingBottom1rem
--pf-c-page__main-section--PaddingLeftc_page__main_section_PaddingLeft1rem
--pf-c-page__main-section--PaddingRightc_page__main_section_PaddingRight1rem
--pf-c-page__main-section--PaddingTopc_page__main_section_PaddingTop1rem
--pf-c-page__main-section--m-dark-100--BackgroundColorc_page__main_section_m_dark_100_BackgroundColorrgba(3,3,3,.62)
--pf-c-page__main-section--m-dark-200--BackgroundColorc_page__main_section_m_dark_200_BackgroundColorrgba(3,3,3,.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_PaddingBottom0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingLeftc_page__main_section_m_no_padding_mobile_md_PaddingLeft0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingRightc_page__main_section_m_no_padding_mobile_md_PaddingRight0
--pf-c-page__main-section--m-no-padding-mobile--md--PaddingTopc_page__main_section_m_no_padding_mobile_md_PaddingTop0
--pf-c-page__main-section--md--PaddingBottomc_page__main_section_md_PaddingBottom1.5rem
--pf-c-page__main-section--md--PaddingLeftc_page__main_section_md_PaddingLeft1.5rem
--pf-c-page__main-section--md--PaddingRightc_page__main_section_md_PaddingRight1.5rem
--pf-c-page__main-section--md--PaddingTopc_page__main_section_md_PaddingTop1.5rem
--pf-c-page__sidebar--BackgroundColorc_page__sidebar_BackgroundColor#fff
--pf-c-page__sidebar--BoxShadowc_page__sidebar_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.07)
--pf-c-page__sidebar--Transformc_page__sidebar_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--Transitionc_page__sidebar_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-page__sidebar--Widthc_page__sidebar_Width80%
--pf-c-page__sidebar--ZIndexc_page__sidebar_ZIndex200
--pf-c-page__sidebar-body--PaddingBottomc_page__sidebar_body_PaddingBottom1rem
--pf-c-page__sidebar-body--PaddingTopc_page__sidebar_body_PaddingTop0.5rem
--pf-c-page__sidebar--m-expanded--Transformc_page__sidebar_m_expanded_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--md--Transformc_page__sidebar_md_Transformtranslate3d(0,0,0)
--pf-c-page__sidebar--md--Widthc_page__sidebar_md_Width18.125rem