@patternfly/patternfly 5.0.0-alpha.75 → 5.0.0-alpha.77

package/components/Masthead/masthead.css

@@ -89,6 +89,7 @@
   --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
+  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
   --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
   --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
   --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -96,8 +97,8 @@
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
+  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
   --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -162,6 +163,7 @@
   --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
 }
 .pf-v5-c-masthead .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
   --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -175,7 +177,17 @@
   flex-wrap: nowrap;
 }
 .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
-  border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
+  top: 100%;
+}
+.pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
+  box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
 }
 .pf-v5-c-masthead .pf-v5-c-menu-toggle {
   --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);

package/components/Masthead/masthead.scss

@@ -139,6 +139,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
 
   // Toolbar
+  --#{$masthead}--c-toolbar--BackgroundColor: var(--#{$masthead}--BackgroundColor);
   --#{$masthead}--c-toolbar--AlignItems--base: center;
   --#{$masthead}--c-toolbar__content--PaddingRight: 0;
   --#{$masthead}--c-toolbar__content--PaddingLeft: 0;
@@ -146,9 +147,8 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
   --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
   --#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
-  --#{$masthead}--c-toolbar__expandable-content--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$masthead}--c-toolbar__expandable-content--BorderTopColor: var(--#{$masthead}--item-border-color--base);
-
+  --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
 
   // Set layout to stack by default
   @include pf-v5-c-masthead--m-display-stack;
@@ -190,6 +190,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   }
 
   .#{$toolbar} {
+    --#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
     --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
     --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
     --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
@@ -206,7 +207,18 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   }
 
   .#{$toolbar}__expandable-content {
-    border-top: var(--#{$masthead}--c-toolbar__expandable-content--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--BorderTopColor);
+    top: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      border-top: var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor);
+      box-shadow: var(--#{$toolbar}__expandable-content--before--BoxShadow);
+    }
   }
 
   .#{$menu-toggle} {

package/components/Toolbar/toolbar.css

@@ -76,6 +76,7 @@
   --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar__expandable-content--Display: grid;
+  --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
   --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
   --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -415,7 +416,7 @@
   z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
+  padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
 }

package/components/Toolbar/toolbar.scss

@@ -48,6 +48,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Expandable content
   --#{$toolbar}__expandable-content--Display: grid;
+  --#{$toolbar}__expandable-content--PaddingTop: 0;
   --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__content--PaddingRight);
   --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
   --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$toolbar}__content--PaddingLeft);
@@ -445,7 +446,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   z-index: var(--#{$toolbar}__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: 0 var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
+  padding: var(--#{$toolbar}__expandable-content--PaddingTop) var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 

package/docs/components/Alert/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: pf-v5-c-alert
+cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
 ---## Alert examples
 
 ### Types

package/docs/components/AppLauncher/deprecated/application-launcher.css

@@ -0,0 +1,25 @@
+#ws-html-deprecated-c-application-launcher-aligned-right,
+#ws-html-deprecated-c-application-launcher-aligned-top,
+#ws-html-deprecated-c-application-launcher-expanded {
+  min-height: 216px;
+}
+
+#ws-html-deprecated-c-application-launcher-aligned-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#ws-html-deprecated-c-application-launcher-aligned-top {
+  display: flex;
+  align-items: flex-end;
+}
+
+#ws-html-deprecated-c-application-launcher-with-sections-and-dividers-between-sections,
+#ws-html-deprecated-c-application-launcher-with-sections-and-dividers-between-items,
+#ws-html-deprecated-c-application-launcher-with-sections-dividers-icons-and-external-links {
+  min-height: 424px;
+}
+
+#ws-html-deprecated-c-application-launcher-favorites {
+  min-height: 540px;
+}

package/docs/components/AppLauncher/{examples → deprecated}/application-launcher.md

@@ -3,6 +3,7 @@ id: Application launcher
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-app-launcher
+deprecated: true
 ---import './application-launcher.css'
 
 ## Examples

package/docs/components/Card/examples/Card.md

@@ -891,9 +891,9 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Hoverable raised (deprecated)
+### Hoverable raised
 
-```html
+```html isDeprecated
 <div class="pf-v5-c-card pf-m-hoverable-raised" id="card-hoverable-example">
   <div class="pf-v5-c-card__title">
     <h2 class="pf-v5-c-card__title-text">Title</h2>
@@ -904,9 +904,9 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Selectable raised (deprecated)
+### Selectable raised
 
-```html
+```html isDeprecated
 <div
   class="pf-v5-c-card pf-m-selectable-raised"
   tabindex="0"
@@ -921,9 +921,9 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Selected raised (deprecated)
+### Selected raised
 
-```html
+```html isDeprecated
 <div
   class="pf-v5-c-card pf-m-selectable-raised pf-m-selected-raised"
   tabindex="0"
@@ -938,9 +938,9 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Selectable raised with a hidden input for improved screen reader accessibility (deprecated)
+### Selectable raised with a hidden input for improved screen reader accessibility
 
-```html
+```html isDeprecated
 <input
   class="pf-v5-c-card__sr-input pf-v5-screen-reader"
   type="checkbox"
@@ -961,9 +961,9 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Non selectable raised (deprecated)
+### Non selectable raised
 
-```html
+```html isDeprecated
 <div
   class="pf-v5-c-card pf-m-non-selectable-raised"
   id="card-non-selectable-raised-example"

package/docs/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: pf-v5-c-chip
+cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 ---## Examples
 
 ### Chip variants

package/docs/components/ContextSelector/deprecated/context-selector.css

@@ -0,0 +1,7 @@
+#ws-html-deprecated-c-context-selector-basic, #ws-html-deprecated-c-context-selector-plain-with-text {
+  min-height: 380px;
+}
+
+#ws-html-deprecated-c-context-selector-with-footer {
+  min-height: 420px;
+}

package/docs/components/ContextSelector/{examples → deprecated}/context-selector.md

@@ -3,6 +3,7 @@ id: Context selector
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-context-selector
+deprecated: true
 ---import './context-selector.css'
 
 ## Examples

package/docs/components/Label/examples/Label.md

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: pf-v5-c-label
+cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
 ---import './Label.css'
 
 ## Examples

package/docs/components/Nav/examples/Navigation.md

@@ -592,9 +592,9 @@ cssPrefix: pf-v5-c-nav
 
 ```
 
-### Legacy tertiary
+### Tertiary
 
-```html
+```html isDeprecated
 <nav class="pf-v5-c-nav pf-m-tertiary" aria-label="Local">
   <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
     <i class="fas fa-angle-left" aria-hidden="true"></i>
@@ -621,9 +621,9 @@ cssPrefix: pf-v5-c-nav
 
 ```
 
-### Legacy tertiary overflow
+### Tertiary overflow
 
-```html
+```html isDeprecated
 <nav class="pf-v5-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local">
   <button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
     <i class="fas fa-angle-left" aria-hidden="true"></i>

package/docs/components/OptionsMenu/deprecated/options-menu.css

@@ -0,0 +1,25 @@
+#ws-html-deprecated-c-options-menu-single-option,
+#ws-html-deprecated-c-options-menu-plain,
+#ws-html-deprecated-c-options-menu-align-right,
+#ws-html-deprecated-c-options-menu-align-top {
+  min-height: 215px;
+}
+
+#ws-html-deprecated-c-options-menu-multiple-options {
+  min-height: 350px;
+}
+
+#ws-html-deprecated-c-options-menu-plain-with-text {
+  min-height: 280px;
+}
+
+#ws-html-deprecated-c-options-menu-align-top {
+  display: flex;
+  align-items: flex-end;
+}
+
+#ws-html-deprecated-c-options-menu-with-groups,
+#ws-html-deprecated-c-options-menu-with-groups-and-dividers-between-groups,
+#ws-html-deprecated-c-options-menu-with-groups-and-dividers-between-items {
+  min-height: 450px;
+}

package/docs/components/OptionsMenu/{examples → deprecated}/options-menu.md

@@ -3,6 +3,7 @@ id: Options menu
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-options-menu
+deprecated: true
 ---import './options-menu.css'
 
 ## Examples

package/docs/components/Page/deprecated/PageHeader.css

@@ -0,0 +1,17 @@
+.ws-html-deprecated-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
+  color: var(--pf-v5-global--Color--light-100);
+}
+
+.ws-html-deprecated-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
+  color: var(--pf-v5-global--Color--dark-100);
+}
+
+#ws-html-deprecated-c-page-with-or-without-fill .ws-preview-html,
+#ws-html-deprecated-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
+  height: 500px;
+}
+
+#ws-html-deprecated-c-page-multiple-sidebar-body-elements .ws-preview-html,
+#ws-html-deprecated-c-page-using-flex-layout .ws-preview-html {
+  height: 100%;
+}

package/docs/components/Page/deprecated/PageHeader.md

@@ -0,0 +1,261 @@
+---
+id: Page
+section: components
+wrapperTag: div
+deprecated: true
+---import './PageHeader.css'
+
+## Page header examples
+
+### Vertical nav
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-v5-c-page__sidebar">
+    <div class="pf-v5-c-page__sidebar-body">Navigation</div>
+  </div>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section class="pf-v5-c-page__main-section pf-m-dark-100">
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-dark-100</code>.
+    </section>
+    <section class="pf-v5-c-page__main-section pf-m-dark-200">
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-dark-200</code>.
+    </section>
+    <section class="pf-v5-c-page__main-section pf-m-light">
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-light</code>.
+    </section>
+    <section class="pf-v5-c-page__main-section">
+      This is a default
+      <code>.pf-v5-c-page__main-section</code>.
+    </section>
+  </main>
+</div>
+
+```
+
+### Horizontal nav
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-nav">Navigation</div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
+    <section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
+    <section class="pf-v5-c-page__main-section pf-m-light"></section>
+    <section class="pf-v5-c-page__main-section"></section>
+  </main>
+</div>
+
+```
+
+### Multiple sidebar body elements, padding, and fill
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-v5-c-page__sidebar">
+    <div class="pf-v5-c-page__sidebar-body">Navigation</div>
+    <div
+      class="pf-v5-c-page__sidebar-body pf-m-fill pf-m-page-insets"
+    >inset content</div>
+    <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
+  </div>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section class="pf-v5-c-page__main-section pf-m-light"></section>
+  </main>
+</div>
+
+```
+
+### With or without fill
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-nav">Navigation</div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section
+      class="pf-v5-c-page__main-section pf-m-light"
+    >A regular page section.</section>
+    <section class="pf-v5-c-page__main-section pf-m-fill">
+      This section uses
+      <code>.pf-m-fill</code> to fill the available space.
+    </section>
+    <section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
+      This section uses
+      <code>.pf-m-no-fill</code> to not fill the available space.
+    </section>
+  </main>
+</div>
+
+```
+
+### Main section padding
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-v5-c-page__sidebar">
+    <div class="pf-v5-c-page__sidebar-body">Navigation</div>
+  </div>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section class="pf-v5-c-page__main-section">
+      This
+      <code>.pf-v5-c-page__main-section</code> has default padding.
+    </section>
+    <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-no-padding</code> to remove all padding.
+    </section>
+    <section
+      class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
+    >
+      This
+      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
+      <code>md</code> breakpoint.
+    </section>
+  </main>
+</div>
+
+```
+
+### Main section variations
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-v5-c-page__sidebar">
+    <div class="pf-v5-c-page__sidebar-body">Navigation</div>
+  </div>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section class="pf-v5-c-page__main-subnav">
+      <code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
+    </section>
+    <section class="pf-v5-c-page__main-nav">
+      <code>.pf-v5-c-page__main-nav</code> for tertiary navigation
+    </section>
+    <section class="pf-v5-c-page__main-tabs">
+      <code>.pf-v5-c-page__main-tabs</code> for tabs
+    </section>
+    <div class="pf-v5-c-page__main-group">
+      <code>.pf-v5-c-page__main-group</code> for a group of page sections
+    </div>
+    <section class="pf-v5-c-page__main-breadcrumb">
+      <code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
+    </section>
+    <section class="pf-v5-c-page__main-section">
+      <code>.pf-v5-c-page__main-section</code> for main sections
+    </section>
+    <section class="pf-v5-c-page__main-wizard">
+      <code>.pf-v5-c-page__main-wizard</code> for wizards
+    </section>
+  </main>
+</div>
+
+```
+
+### Centered section
+
+```html
+<div class="pf-v5-c-page">
+  <header class="pf-v5-c-page__header">
+    <div class="pf-v5-c-page__header-brand">
+      <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-v5-c-page__header-tools">header-tools</div>
+  </header>
+  <main class="pf-v5-c-page__main" tabindex="-1">
+    <section
+      class="pf-v5-c-page__main-section pf-m-limit-width pf-m-align-center"
+    >
+      <div class="pf-v5-c-page__main-body">
+        <div class="pf-v5-c-card">
+          <div class="pf-v5-c-card__body">
+            When a width limited page section is wider than the value of
+            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+            <br />
+            <br />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.
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+
+```
+
+## Documentation
+
+### Overview
+
+The page header component is a deprecated approach to building a header on the page component. The recommended approach uses the masthead component instead.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="banner"` | `.pf-v5-c-page__header` | Identifies the element that serves as the banner region. |
+| `aria-expanded="true/false"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
+| `aria-controls="[id of nav]"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Identifies the element controlled by the toggle. **Required**
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v5-c-page__header` | `<header>` |   Declares the page header. |
+| `.pf-v5-c-page__header-brand` | `<div>` |   Creates a header container to nest the brand component. |
+| `.pf-v5-c-page__header-brand-toggle` | `<div>` |   Creates a container to nest the sidebar toggle. |
+| `.pf-v5-c-page__header-brand-link` | `<a>`, `<span>` |   Creates a link for the brand logo. Use a `<span>` if there is no link. |
+| `.pf-v5-c-page__header-selector` | `<div>` |   Creates a header container to nest the context selector component. |
+| `.pf-v5-c-page__header-nav` | `<div>` |   Creates a container to nest the navigation component in the header. |
+| `.pf-v5-c-page__header-tools` | `<div>` |   Creates a container to nest the icons and menus in header. |
+| `.pf-v5-c-page__header-tools-group` | `<div>` |  Creates a container for grouping sets of icons and menus in header. |
+| `.pf-v5-c-page__header-tools-item` | `<div>` |  Creates a container for an item in a header tools group. |
+| `.pf-m-selected` | `.pf-v5-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |