Page

The page component is used to create the basic structure of a page with either vertical or horizontal navigation. Related design guidelines: Navigation system

Examples Documentation CSS Variables

Examples

Vertical 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

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.

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.
`role="main"`	`.pf-c-page__main`	Identifies the element that serves as the main region.
`tabindex="-1"`	`.pf-c-page__main`	Allows the main region to receive programmatic focus. Required
`id="[id]"`	`.pf-c-page__main`	Provides a hook for sending focus to new content. 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-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 div`	Modifier for responsive behavior of header icons list.
`.pf-m-selected`	`.pf-c-page__header-tools .pf-c-button`	Modifies the button in the masthead for the selected state.
`.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__sidebar`	Modifies the sidebar the light variation. Note: for use with a light themed nav component
`.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-m-no-padding{-on-[breakpoint]}`	`.pf-c-page__main-section`	Removes padding from the main page section at an optional breakpoint
`.pf-m-padding{-on-[breakpoint]}`	`.pf-c-page__main-section`	Modifies 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-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__sidebar.pf-m-light	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-page__sidebar.pf-m-light	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-page__sidebar.pf-m-light	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-page__sidebar.pf-m-light	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-page__sidebar.pf-m-light	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-page__sidebar.pf-m-light	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-page__sidebar.pf-m-light	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__sidebar.pf-m-light	--pf-c-page__sidebar--BackgroundColor	#fff
--pf-c-page__sidebar--BackgroundColor --pf-c-page__sidebar--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__header	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-page__header	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-page__header	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-page__header	--pf-global--link--Color	#73bcf7
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-page__header	--pf-global--link--Color--hover	#73bcf7
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-page__header	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-page__header .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page__header .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page__header .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page--BackgroundColor	#f0f0f0
--pf-c-page--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-page__header--BackgroundColor	#151515
--pf-c-page__header--BackgroundColor --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-page	--pf-c-page__header--ZIndex	300
--pf-c-page__header--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-page	--pf-c-page__header--MinHeight	4.75rem
	.pf-c-page	--pf-c-page__header-brand--PaddingLeft	1rem
--pf-c-page__header-brand--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-brand--xl--PaddingRight	2rem
--pf-c-page__header-brand--xl--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-brand--xl--PaddingLeft	1.5rem
--pf-c-page__header-brand--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingTop	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingRight	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft	0.5rem
--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--MarginRight	1rem
--pf-c-page__header-sidebar-toggle__c-button--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--MarginLeft	calc(0.5rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--MarginLeft calc(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--xl--MarginLeft	calc(0.5rem * -1)
--pf-c-page__header-sidebar-toggle__c-button--xl--MarginLeft calc(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-page	--pf-c-page__header-sidebar-toggle__c-button--FontSize	1.5rem
--pf-c-page__header-sidebar-toggle__c-button--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 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__header-nav--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #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__header-nav--xl--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-nav--xl--PaddingLeft	2rem
--pf-c-page__header-nav--xl--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-tools--MarginRight	1rem
--pf-c-page__header-tools--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-tools--xl--MarginRight	1.5rem
--pf-c-page__header-tools--xl--MarginRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__header-tools--c-avatar--MarginLeft	1rem
--pf-c-page__header-tools--c-avatar--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__header-tools-group--MarginLeft	2rem
--pf-c-page__header-tools-group--MarginLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--Width	2.25rem
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--Height	2.25rem
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor	#3c3f42
--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius	30em
--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-page	--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor	#3c3f42
--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-page	--pf-c-page__sidebar--ZIndex	200
--pf-c-page__sidebar--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-page	--pf-c-page__sidebar--Width	18.125rem
	.pf-c-page	--pf-c-page__sidebar--BackgroundColor	#212427
--pf-c-page__sidebar--BackgroundColor --pf-global--BackgroundColor--dark-300 $pf-global--BackgroundColor--dark-300 $pf-color-black-850 #212427
	.pf-c-page	--pf-c-page__sidebar--m-light--BackgroundColor	#fff
--pf-c-page__sidebar--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__sidebar--BoxShadow --pf-global--BoxShadow--lg-right $pf-global--BoxShadow--lg-right pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 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__sidebar--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-page	--pf-c-page__sidebar--Transform	translate3d(-100%, 0, 0)
	.pf-c-page	--pf-c-page__sidebar--m-expanded--Transform	translate3d(0, 0, 0)
	.pf-c-page	--pf-c-page__sidebar--xl--Transform	translate3d(0, 0, 0)
	.pf-c-page	--pf-c-page__sidebar-body--PaddingTop	0.5rem
--pf-c-page__sidebar-body--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__sidebar-body--PaddingBottom	1rem
--pf-c-page__sidebar-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingTop	1rem
--pf-c-page__main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingRight	1rem
--pf-c-page__main-section--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingBottom	1rem
--pf-c-page__main-section--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--PaddingLeft	1rem
--pf-c-page__main-section--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingTop	1.5rem
--pf-c-page__main-section--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingRight	1.5rem
--pf-c-page__main-section--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingBottom	1.5rem
--pf-c-page__main-section--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--xl--PaddingLeft	1.5rem
--pf-c-page__main-section--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--BackgroundColor	#f0f0f0
--pf-c-page__main-section--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-page__main--ZIndex	100
--pf-c-page__main--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-page	--pf-c-page__main-breadcrumb--main-section--PaddingTop	1rem
--pf-c-page__main-breadcrumb--main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-nav--BackgroundColor	#fff
--pf-c-page__main-nav--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-nav--PaddingTop	1rem
--pf-c-page__main-nav--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__main-nav--xl--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-page__main-nav--xl--PaddingLeft	0.5rem
--pf-c-page__main-nav--xl--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--Color	#151515
--pf-c-nav__main-nav--c-nav__scroll-button--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--hover--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--focus--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--active--Color	#06c
--pf-c-nav__main-nav--c-nav__scroll-button--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--disabled--Color	#d2d2d2
--pf-c-nav__main-nav--c-nav__scroll-button--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-nav__main-nav--c-nav__scroll-button--disabled--before--BorderColor	#f0f0f0
--pf-c-nav__main-nav--c-nav__scroll-button--disabled--before--BorderColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-page	--pf-c-page__main-breadcrumb--BackgroundColor	#fff
--pf-c-page__main-breadcrumb--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingTop	1rem
--pf-c-page__main-breadcrumb--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingRight	1rem
--pf-c-page__main-breadcrumb--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingBottom	0
	.pf-c-page	--pf-c-page__main-breadcrumb--PaddingLeft	1rem
--pf-c-page__main-breadcrumb--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page	--pf-c-page__main-breadcrumb--xl--PaddingRight	1.5rem
--pf-c-page__main-breadcrumb--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-breadcrumb--xl--PaddingLeft	1.5rem
--pf-c-page__main-breadcrumb--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-page	--pf-c-page__main-section--m-light--BackgroundColor	#fff
--pf-c-page__main-section--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page	--pf-c-page__main-section--m-dark-100--BackgroundColor	rgba(#030303, .62)
--pf-c-page__main-section--m-dark-100--BackgroundColor --pf-global--BackgroundColor--dark-transparent-100 $pf-global--BackgroundColor--dark-transparent-100 rgba($pf-color-black-1000, .62) rgba(#030303, .62)
	.pf-c-page	--pf-c-page__main-section--m-dark-200--BackgroundColor	rgba(#030303, .32)
--pf-c-page__main-section--m-dark-200--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-page	--pf-c-page__main-wizard--BorderTopColor	#d2d2d2
--pf-c-page__main-wizard--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-page	--pf-c-page__main-wizard--BorderTopWidth	1px
--pf-c-page__main-wizard--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-page__sidebar.pf-m-expanded	--pf-c-page__sidebar--Transform	translate3d(0, 0, 0)
--pf-c-page__sidebar--Transform --pf-c-page__sidebar--m-expanded--Transform translate3d(0, 0, 0)
	.pf-c-page__main-nav .pf-c-nav__scroll-button	--pf-c-nav__scroll-button--Color	#151515
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-page__main-nav .pf-c-nav__scroll-button::before	--pf-c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__scroll-button--before--BorderColor --pf-c-nav__main-nav--c-nav__scroll-button--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-page__main-nav .pf-c-nav__scroll-button:hover	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:focus	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:active	--pf-c-nav__scroll-button--Color	#06c
--pf-c-nav__scroll-button--Color --pf-c-nav__main-nav--c-nav__scroll-button--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-page__main-nav .pf-c-nav__scroll-button:disabled	--pf-c-nav__scroll-button--Color	#d2d2d2
--pf-c-nav__scroll-button--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-page__main-nav .pf-c-nav__scroll-button:disabled	--pf-c-nav__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav__scroll-button--before--BorderColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-page__main-breadcrumb + .pf-c-page__main-section	--pf-c-page__main-section--PaddingTop	1rem
--pf-c-page__main-section--PaddingTop --pf-c-page__main-breadcrumb--main-section--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-page__main-section.pf-m-light	--pf-c-page__main-section--BackgroundColor	#fff
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-light--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-page__main-section.pf-m-dark-100	--pf-c-page__main-section--BackgroundColor	rgba(#030303, .62)
--pf-c-page__main-section--BackgroundColor --pf-c-page__main-section--m-dark-100--BackgroundColor --pf-global--BackgroundColor--dark-transparent-100 $pf-global--BackgroundColor--dark-transparent-100 rgba($pf-color-black-1000, .62) 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--BackgroundColor --pf-c-page__main-section--m-dark-200--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)