Skip to content
PatternFly logo

Page

Examples

Vertical nav

toggle
Logo
header-tools
Navigation
This .pf-c-page__main-section uses .pf-m-dark-100.
This .pf-c-page__main-section uses .pf-m-dark-200.
This .pf-c-page__main-section uses .pf-m-light.
This is a default .pf-c-page__main-section.

Horizontal nav

Logo
Navigation
header-tools

With or without fill

Logo
Navigation
header-tools
A regular page section.
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
Navigation
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
Navigation
.pf-c-page__main-subnav for horizontal subnav navigation
.pf-c-page__main-nav for tertiary navigation
.pf-c-page__main-tabs for tabs
.pf-c-page__main-group for a group of page sections
.pf-c-page__main-breadcrumb for breadcrumbs
.pf-c-page__main-section for main sections
.pf-c-page__main-wizard for wizards

Centered section

toggle
Logo
header-tools
When a width limited page section is wider than the value of --pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.

The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.

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

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
tabindex="0"
.pf-c-page__main-section.pf-m-overflow-scroll
If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding tabindex="0".

Usage

Class
Applied to
Outcome
.pf-c-page
<div>
Declares the page component.
.pf-m-full-height
.pf-c-page
Sets the page to be full height. Eliminates the need to ensure that all ancestors of .pf-c-page have height of 100% set.
.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-tabs
<section>
Creates a container to nest the tabs component in the main page area.
.pf-c-page__main-wizard
<section>
Creates a container to nest the wizard component in the main 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-item
Modifies a header tools item to indicate that the button inside is in the selected state.
.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-light-200
.pf-c-page__main-wizard
Modifies a wizard page section to have a light 200 theme.
.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 an optional 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.
.pf-m-hidden{-on-[breakpoint]}
.pf-c-page__header-tools-group, .pf-c-page__header-tools-item
Hides a header tools group or item at an optional 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-item
Shows a header tools group or item at an optional breakpoint.
.pf-m-limit-width
.pf-c-page__main-section
Modifies a page section to limit the max-width of the content inside.
.pf-m-align-center
.pf-c-page__main-section.pf-m-limit-width
Modifies a page section body to align center.
.pf-m-sticky-top{-on-[breakpoint]-height}
.pf-c-page__main-*
Modifies a section/group to be sticky to the top of its container at an optional height breakpoint.
.pf-m-sticky-bottom{-on-[breakpoint]-height}
.pf-c-page__main-*
Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint.
.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__main-section[class*=pf-m-dark-]--pf-global--Color--100
#fff
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--Color--200
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--BorderColor--100
#b8bbbe
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--primary-color--100
#73bcf7
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--link--Color
#2b9af3
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--link--Color--hover
#2b9af3
.pf-c-page__main-section[class*=pf-m-dark-]--pf-global--BackgroundColor--100
#151515
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Visibility
visible
.pf-c-page__header-tools-item--pf-hidden-visible--hidden--Display
none
.pf-c-page__header-tools-item--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-page__header-tools-item--pf-hidden-visible--Display
block
.pf-c-page__header-tools-item--pf-hidden-visible--Visibility
visible
.pf-c-page__header-tools-item--pf-hidden-visible--visible--Display
block
.pf-m-hidden.pf-c-page__header-tools-item--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-page__header-tools-item--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--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor
#a30000
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor
#004080
.pf-c-page--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor
#a30000
.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--m-light--BorderRightWidth
1px
.pf-c-page--pf-c-page__sidebar--m-light--BorderRightColor
#d2d2d2
.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__sidebar-body--m-menu--PaddingTop
0
.pf-c-page--pf-c-page__sidebar-body--m-menu--PaddingBottom
0
.pf-c-page--pf-c-page__sidebar-body--m-menu--BorderTopColor
#3c3f42
.pf-c-page--pf-c-page__sidebar-body--m-menu--BorderTopWidth
1px
.pf-c-page--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor
#3c3f42
.pf-c-page--pf-c-page__main--ZIndex
100
.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-breadcrumb--main-section--PaddingTop
1rem
.pf-c-page--pf-c-page__main-section--BackgroundColor
#f0f0f0
.pf-c-page--pf-c-page__main-section--m-light--BackgroundColor
#fff
.pf-c-page--pf-c-page__main-section--m-light-100--BackgroundColor
#fafafa
.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-breadcrumb--page__main-tabs--PaddingTop
1rem
.pf-c-page--pf-c-page__main-nav--page__main-tabs--PaddingTop
1rem
.pf-c-page--pf-c-page--section--m-limit-width--MaxWidth
calc(125rem - 18.125rem)
.pf-c-page--pf-c-page--section--m-sticky-top--ZIndex
300
.pf-c-page--pf-c-page--section--m-sticky-top--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-sticky-bottom--ZIndex
300
.pf-c-page--pf-c-page--section--m-sticky-bottom--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-bottom--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-bottom--ZIndex
100
.pf-c-page--pf-c-page--section--m-shadow-top--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-page--pf-c-page--section--m-shadow-top--ZIndex
100
.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--m-sticky-top--PaddingBottom
1rem
.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-subnav--BackgroundColor
#212427
.pf-c-page--pf-c-page__main-subnav--BorderTopWidth
1px
.pf-c-page--pf-c-page__main-subnav--BorderTopColor
#3c3f42
.pf-c-page--pf-c-page__main-subnav--BorderLeftWidth
0
.pf-c-page--pf-c-page__main-subnav--BorderLeftColor
#3c3f42
.pf-c-page--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth
1px
.pf-c-page--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth
0
.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--m-sticky-top--PaddingBottom
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-tabs--PaddingTop
0
.pf-c-page--pf-c-page__main-tabs--PaddingRight
0
.pf-c-page--pf-c-page__main-tabs--PaddingBottom
0
.pf-c-page--pf-c-page__main-tabs--PaddingLeft
0
.pf-c-page--pf-c-page__main-tabs--BackgroundColor
#fff
.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--pf-c-page__main-wizard--m-light-200--BackgroundColor
#f0f0f0
.pf-c-page__header-tools-group--pf-hidden-visible--visible--Display
flex
.pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover--pf-c-notification-badge--after--BackgroundColor
#3c3f42
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#a30000
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread--pf-c-notification-badge--after--BackgroundColor
#004080
.pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention--pf-c-notification-badge--after--BackgroundColor
#a30000
.pf-c-page__sidebar.pf-m-expanded--pf-c-page__sidebar--TranslateX
0
.pf-c-page__sidebar-body.pf-m-menu--pf-c-page__sidebar-body--PaddingTop
0
.pf-c-page__sidebar-body.pf-m-menu--pf-c-page__sidebar-body--PaddingBottom
0
.pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu--pf-c-page__sidebar-body--m-menu--BorderTopWidth
0
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector--pf-c-context-selector__toggle--BorderTopColor
transparent
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector--pf-c-context-selector__toggle--BorderRightColor
transparent
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector--pf-c-context-selector__toggle--BorderBottomColor
#3c3f42
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector--pf-c-context-selector__toggle--BorderLeftColor
transparent
.pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector--pf-c-context-selector__menu--Top
100%
.pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main--pf-c-page__main-subnav--BorderLeftWidth
0
.pf-c-page__main-breadcrumb + .pf-c-page__main-section--pf-c-page__main-section--PaddingTop
1rem
.pf-c-page__main-breadcrumb.pf-m-sticky-top--pf-c-page__main-breadcrumb--PaddingBottom
1rem
.pf-c-page__main-nav + .pf-c-page__main-tabs--pf-c-page__main-tabs--PaddingTop
1rem
.pf-c-page__main-breadcrumb + .pf-c-page__main-tabs--pf-c-page__main-tabs--PaddingTop
1rem
.pf-c-page__main-section.pf-m-light--pf-c-page__main-section--BackgroundColor
#fff
.pf-c-page__main-section.pf-m-light-100--pf-c-page__main-section--BackgroundColor
#fafafa
.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-wizard:first-child--pf-c-page__main-wizard--BorderTopWidth
0
.pf-c-page__main-wizard.pf-m-light-200--pf-c-page__main-wizard--BackgroundColor
#f0f0f0

View source on GitHub