@patternfly/patternfly 6.1.0-prerelease.2 → 6.1.0-prerelease.4

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

@@ -7785,6 +7785,133 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ```
 
+### Labels with truncation
+
+```html
+<div class="pf-v6-c-label-truncate--example">
+  <strong>Label</strong>
+  <br />
+  <br />
+  <span class="pf-v6-c-label">
+    <span class="pf-v6-c-label__content">
+      <span
+        class="pf-v6-c-label__text"
+        id="-truncated-with-icon-text"
+        style="--pf-v6-c-label__text--MaxWidth: 38ch"
+      >Label with set max-width truncation</span>
+    </span>
+    <span class="pf-v6-c-label__actions">
+      <button
+        class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+        type="button"
+        id="-truncated-with-icon-button"
+        aria-label="Remove"
+        aria-labelledby="-truncated-with-icon-button -truncated-with-icon-text"
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+    </span>
+  </span>
+  <br />
+  <br />
+  <strong>Label group</strong>
+  <br />
+  <br />
+  <div class="pf-v6-c-label-group">
+    <div class="pf-v6-c-label-group__main">
+      <ul
+        class="pf-v6-c-label-group__list"
+        role="list"
+        aria-label="Group of labels"
+      >
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label pf-m-blue">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span class="pf-v6-c-label__text">Label 1</span>
+            </span>
+          </span>
+        </li>
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label pf-m-green">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span class="pf-v6-c-label__text">Label 2</span>
+            </span>
+          </span>
+        </li>
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span
+                class="pf-v6-c-label__text"
+              >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>
+            </span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <br />
+  <br />
+  <strong>Label group vertical</strong>
+  <br />
+  <br />
+  <div class="pf-v6-c-label-group pf-m-vertical">
+    <div class="pf-v6-c-label-group__main">
+      <ul
+        class="pf-v6-c-label-group__list"
+        role="list"
+        aria-label="Group of labels"
+      >
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span class="pf-v6-c-label__text">Label 1</span>
+            </span>
+          </span>
+        </li>
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label pf-m-blue">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span class="pf-v6-c-label__text">Label 2</span>
+            </span>
+          </span>
+        </li>
+        <li class="pf-v6-c-label-group__list-item">
+          <span class="pf-v6-c-label pf-m-green">
+            <span class="pf-v6-c-label__content">
+              <span class="pf-v6-c-label__icon">
+                <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+              </span>
+              <span
+                class="pf-v6-c-label__text"
+              >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>
+            </span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Label usage

package/docs/components/Table/examples/Table.md

@@ -20908,9 +20908,9 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ## Draggable rows
 
-### Draggable rows example isBeta
+### Draggable rows example
 
-```html
+```html isBeta
 <div
   id="table-draggable-rows-help"
 >Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>

package/docs/components/Title/examples/Title.md

@@ -28,6 +28,15 @@ cssPrefix: pf-v6-c-title
 
 ```
 
+### Page title
+
+```html
+<h1 class="pf-v6-c-title pf-m-2xl pf-m-page-title">2xl page title</h1>
+
+<div class="pf-v6-c-title pf-m-h1 pf-m-page-title">H1 page title</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -62,3 +71,4 @@ The content component defines margin on headers. To regain the same spacing use,
 | `.pf-m-h4` | `.pf-v6-c-title` | Modifies for default h4 size |
 | `.pf-m-h5` | `.pf-v6-c-title` | Modifies for default h5 size |
 | `.pf-m-h6` | `.pf-v6-c-title` | Modifies for default h6 size |
+| `.pf-m-page-title` | `.pf-v6-c-title` | Applies page title styles. **Note:** `.pf-m-page-title` should only apply to the heading that serves as the title for the current page. |

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -261,10 +261,8 @@ This demo implements the about modal, including the backdrop.
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">

package/docs/demos/Alert/examples/Alert.md

@@ -259,10 +259,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -640,10 +638,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">
@@ -1121,10 +1117,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -260,10 +260,8 @@ cssPrefix: pf-d-back-to-top
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">

package/docs/demos/Banner/examples/Banner.md

@@ -279,10 +279,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -728,10 +726,8 @@ wrapperTag: div
           </section>
           <section class="pf-v6-c-page__main-section pf-m-limit-width">
             <div class="pf-v6-c-page__main-body">
-              <div class="pf-v6-c-content">
-                <h1>Main title</h1>
-                <p>This is a full page demo.</p>
-              </div>
+              <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+              <p class="pf-v6-c-content--p">This is a full page demo.</p>
             </div>
           </section>
           <section class="pf-v6-c-page__main-section pf-m-limit-width">

package/docs/demos/CardView/examples/CardView.md

@@ -349,10 +349,8 @@ section: patterns
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -257,10 +257,8 @@ cssPrefix: pf-d-dashboard
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">

package/docs/demos/DataList/examples/DataList.md

@@ -260,10 +260,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">
@@ -1089,10 +1087,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">
@@ -1928,10 +1924,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">
@@ -3452,10 +3446,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section">

package/docs/demos/DescriptionList/examples/DescriptionList.md

@@ -260,10 +260,8 @@ cssPrefix: pf-d-description-list
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -643,10 +641,8 @@ cssPrefix: pf-d-description-list
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
                   <div class="pf-v6-c-page__main-body">
-                    <div class="pf-v6-c-content">
-                      <h1>Main title</h1>
-                      <p>This is a full page demo.</p>
-                    </div>
+                    <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+                    <p class="pf-v6-c-content--p">This is a full page demo.</p>
                   </div>
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1267,10 +1263,8 @@ cssPrefix: pf-d-description-list
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <hr class="pf-v6-c-divider" />

package/docs/demos/Drawer/examples/Drawer.md

@@ -274,10 +274,8 @@ wrapperTag: div
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
                   <div class="pf-v6-c-page__main-body">
-                    <div class="pf-v6-c-content">
-                      <h1>Main title</h1>
-                      <p>This is a full page demo.</p>
-                    </div>
+                    <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+                    <p class="pf-v6-c-content--p">This is a full page demo.</p>
                   </div>
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -745,10 +743,8 @@ wrapperTag: div
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
                   <div class="pf-v6-c-page__main-body">
-                    <div class="pf-v6-c-content">
-                      <h1>Main title</h1>
-                      <p>This is a full page demo.</p>
-                    </div>
+                    <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+                    <p class="pf-v6-c-content--p">This is a full page demo.</p>
                   </div>
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1071,10 +1067,8 @@ wrapperTag: div
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">
                   <div class="pf-v6-c-page__main-body">
-                    <div class="pf-v6-c-content">
-                      <h1>Main title</h1>
-                      <p>This is a full page demo.</p>
-                    </div>
+                    <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+                    <p class="pf-v6-c-content--p">This is a full page demo.</p>
                   </div>
                 </section>
                 <section class="pf-v6-c-page__main-section pf-m-limit-width">

package/docs/demos/JumpLinks/examples/JumpLinks.md

@@ -262,10 +262,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-no-padding">
@@ -679,10 +677,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-no-padding">
@@ -1096,10 +1092,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-no-padding">
@@ -1510,10 +1504,8 @@ section: components
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-sticky-top">

package/docs/demos/Masthead/examples/Masthead.md

@@ -217,10 +217,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -510,10 +508,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -840,10 +836,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1170,10 +1164,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1437,10 +1429,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1722,10 +1712,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2029,10 +2017,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2346,10 +2332,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2681,10 +2665,8 @@ wrapperTag: div
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">
         <div class="pf-v6-c-page__main-body">
-          <div class="pf-v6-c-content">
-            <h1>Main title</h1>
-            <p>This is a full page demo.</p>
-          </div>
+          <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
+          <p class="pf-v6-c-content--p">This is a full page demo.</p>
         </div>
       </section>
       <section class="pf-v6-c-page__main-section pf-m-limit-width">