Examples
With or without fill
Content
A regular page section.
This section uses
.pf-m-fill to fill the available space.
This section uses
.pf-m-no-fill not to fill the available space.
Main section padding
Content
This
.pf-v6-c-page__main-section has default padding.
This
.pf-v6-c-page__main-section uses
.pf-m-no-padding to remove all padding.
This
.pf-v6-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
Content
.pf-v6-c-page__main-tabs for tabs
.pf-v6-c-page__main-group for a group of page sections
.pf-v6-c-page__main-section for main sections
.pf-v6-c-page__main-wizard for wizards
Centered section
Content
When a width limited page section is wider than the value of
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.
--pf-v6-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 and main areas.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="main" | .pf-v6-c-page__main | Identifies the element that serves as the main region. |
tabindex="-1" | .pf-v6-c-page__main | Allows the main region to receive programmatic focus. Required |
id="[id]" | .pf-v6-c-page__main | Provides a hook for sending focus to new content. Required |
tabindex="0" | .pf-v6-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-v6-c-page | <div> | Declares the page component. |
.pf-v6-c-page__sidebar | <aside> | Declares the page sidebar. |
.pf-v6-c-page__sidebar-body | <div> | Creates a wrapper within the sidebar to hold content. Note: The last/only .pf-v6-c-page__sidebar-body element will grow to fill the available vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below. |
.pf-v6-c-page__main | <main> | Declares the main page area. |
.pf-v6-c-page__main-subnav | <section> | Creates a container to nest the horizontal subnav navigation component in the main page area. |
.pf-v6-c-page__main-breadcrumb | <section> | Creates a container to nest the breadcrumb component in the main page area. |
.pf-v6-c-page__main-section | <section> | Creates a section container in the main page area. Note: This section will not fill the vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below. |
.pf-v6-c-page__main-tabs | <section> | Creates a container to nest the tabs component in the main page area. |
.pf-v6-c-page__main-wizard | <section> | Creates a container to nest the wizard component in the main page area. |
.pf-v6-c-page__main-body | <div> | Creates the body section for a page section. Required |
.pf-v6-c-page__main-group | <div> | Creates the group of .pf-v6-c-page__main-* sections. Can be used in combination with .pf-m-sticky-[top/bottom] to make multiple sections sticky. |
.pf-v6-c-page__drawer | <div> | Creates a container for the drawer component when placing the main page element in the drawer body. |
.pf-m-expanded | .pf-v6-c-page__sidebar | Modifies the sidebar for the expanded state. |
.pf-m-collapsed | .pf-v6-c-page__sidebar | Modifies the sidebar for the collapsed state. |
.pf-m-page-insets | .pf-v6-c-page__sidebar-body | Modifies a sidebar body padding/inset to visually match padding of page elements. |
.pf-m-context-selector | .pf-v6-c-page__sidebar-body | Modifies a sidebar body to contain a context selector. |
.pf-m-inset-none | .pf-v6-c-page__sidebar-body | Removes a sidebar body left/right inset. |
.pf-m-padding{-on-[breakpoint]} | .pf-v6-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-no-padding{-on-[breakpoint]} | .pf-v6-c-page__main-section | Removes padding from the main page section at an optional breakpoint. |
.pf-m-fill | .pf-v6-c-page__main-container, .pf-v6-c-page__main-section, .pf-v6-c-page__main-group, .pf-v6-c-page__main-wizard, .pf-v6-c-page__sidebar-body | Modifies the element to grow to fill the available space. |
.pf-m-no-fill | .pf-v6-c-page__main-section, .pf-v6-c-page__main-group, .pf-v6-c-page__main-wizard, .pf-v6-c-page__sidebar-body | Modifies the element not to grow to fill the available vertical space. |
.pf-m-limit-width | .pf-v6-c-page__main-section | Modifies a page section to limit the max-width of the content inside. |
.pf-m-align-center | .pf-v6-c-page__main-section.pf-m-limit-width | Modifies a page section body to align center. |
.pf-m-sticky-top{-on-[breakpoint]-height} | .pf-v6-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-v6-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-v6-c-page__main-* | Modifies a section/group to have a bottom shadow. |
.pf-m-shadow-top | .pf-v6-c-page__main-* | Modifies a section/group to have a top shadow. |
.pf-m-overflow-scroll | .pf-v6-c-page__main-* | Modifies a section/group to show a scrollbar if it has overflow content. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--inset | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--c-masthead--ZIndex | 300 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--ZIndex | 200 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--Width | 18.125rem | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--BoxShadow | none | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--TranslateX | -100% | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--TranslateZ | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--m-expanded--TranslateX | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--xl--TranslateX | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--MarginInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--PaddingBlockEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--PaddingInlineStart | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar--PaddingInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-header--BorderBlockEndWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-header--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-header--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-header--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-title--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-title--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-title--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-title--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-title--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--GridArea | main | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--masthead--main-container--GridArea | sidebar / sidebar / main / main | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--MaxHeight | calc(100% - 1.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--MarginInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--MarginInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--BorderRadius | 24px | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--BorderWidth | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-container--BorderColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--RowGap | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-section--m-secondary--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-limit-width--MaxWidth | calc(125rem - 18.125rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-sticky-top--ZIndex | 300 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-sticky-top--BoxShadow | 0px
1px
4px
0px
rgba(0, 0, 0, 0.1600) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-sticky-bottom--ZIndex | 300 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-sticky-bottom--BoxShadow | 0px
-1px
4px
0px
rgba(0, 0, 0, 0.1600) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-shadow-bottom--BoxShadow | 0px
1px
4px
0px
rgba(0, 0, 0, 0.1600) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-shadow-bottom--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-shadow-top--BoxShadow | 0px
-1px
4px
0px
rgba(0, 0, 0, 0.1600) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page--section--m-shadow-top--ZIndex | 100 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-subnav--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-subnav--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-subnav--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-subnav--PaddingInlineStart | calc(1.5rem - 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-subnav--PaddingInlineEnd | calc(1.5rem - 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--PaddingBlockStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd | calc(1.5rem - 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--PaddingInlineStart | calc(1.5rem - 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-breadcrumb--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-tabs--PaddingBlockStart | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-tabs--PaddingInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-tabs--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-tabs--PaddingInlineStart | 0 | ||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-tabs--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-wizard--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-wizard--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-page) | --pf-v6-c-page__main-wizard--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-page__sidebar.pf-m-expanded | --pf-v6-c-page__sidebar--TranslateX | 0 | ||
| ||||
| .pf-v6-c-page__sidebar-body.pf-m-page-insets | --pf-v6-c-page__sidebar-body--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-page__sidebar-body.pf-m-page-insets | --pf-v6-c-page__sidebar-body--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-page__sidebar-body.pf-m-context-selector | --pf-v6-c-page__sidebar-body--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-page__sidebar-body.pf-m-context-selector | --pf-v6-c-page__sidebar-body--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-page__sidebar-body.pf-m-inset-none | --pf-v6-c-page__sidebar-body--PaddingInlineEnd | 0 | ||
| .pf-v6-c-page__sidebar-body.pf-m-inset-none | --pf-v6-c-page__sidebar-body--PaddingInlineStart | 0 | ||
| .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-section | --pf-v6-c-page__main-section--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top | --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd | undefined | ||
| ||||
| .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs | --pf-v6-c-page__main-tabs--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-page__main-section.pf-m-secondary | --pf-v6-c-page__main-section--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-page__main-wizard:first-child | --pf-v6-c-page__main-wizard--BorderBlockStartWidth | 0 | ||
