Skip to content
Patternfly Logo

Page

Examples

Vertical nav

toggle
Logo
header-tools
pf-c-nav

Horizontal nav

Logo
pf-c-nav
header-tools

With or without fill

Logo
pf-c-nav
header-tools
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
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 .pf-m-padding-on-md` to remove padding up to the `md` breakpoint.

Main section variations

toggle
Logo
header-tools
pf-c-nav
`.pf-c-page__main-nav` for tertiary navigation
`.pf-c-page__main-breadcrumb` for breadcrumbs
`.pf-c-page__main-section` for main sections
`.pf-c-page__main-tabs` for tabs
`.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-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
.pf-c-page__main-*
Modifies a section/group to be sticky to the top of its container.
.pf-m-sticky-bottom
.pf-c-page__main-*
Modifies a section/group to be sticky to the bottom of its container.
.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--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-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-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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines