@patternfly/patternfly 6.0.0 → 6.1.0-prerelease.10

package/docs/components/Button/examples/Button.md

@@ -2046,7 +2046,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-start` | `.pf-v6-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
 | `.pf-m-end` | `.pf-v6-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
 | `.pf-m-active` | `.pf-v6-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
-| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button so that it has small font size. |
+| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button for small/compact styles. |
 | `.pf-m-aria-disabled` | `.pf-v6-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
 | `.pf-m-display-lg` | `.pf-v6-c-button`, `pf-v6-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
 | `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |

package/docs/components/CodeEditor/examples/CodeEditor.css

@@ -0,0 +1,3 @@
+#ws-core-c-code-editor-with-full-height-modifier .ws-preview-html {
+  height: 400px;
+}

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -2,7 +2,9 @@
 id: Code editor
 section: components
 cssPrefix: pf-v6-c-code-editor
----## Examples
+---import './CodeEditor.css';
+
+## Examples
 
 ### Default
 
@@ -49,11 +51,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -104,11 +106,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -267,11 +269,158 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
+  </div>
+</div>
+
+```
+
+### With optional code editor container
+
+This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
+
+```html
+<div class="pf-v6-c-code-editor">
+  <div role="presentation" tabindex="0" class="pf-v6-c-code-editor__container">
+    <div class="pf-v6-c-code-editor__header">
+      <div class="pf-v6-c-code-editor__header-content">
+        <div class="pf-v6-c-code-editor__controls">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Copy to clipboard"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-copy" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Download code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-download" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Upload code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-upload" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="pf-v6-c-code-editor__tab">
+        <span class="pf-v6-c-code-editor__tab-icon">
+          <i class="fas fa-code"></i>
+        </span>
+        <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__main">
+      <div class="pf-v6-c-code-editor__upload">
+        <div class="pf-v6-c-empty-state">
+          <div class="pf-v6-c-empty-state__content">
+            <div class="pf-v6-c-empty-state__header">
+              <div class="pf-v6-c-empty-state__icon">
+                <i class="fas fa- fa-code" aria-hidden="true"></i>
+              </div>
+              <div class="pf-v6-c-empty-state__title">
+                <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+              </div>
+            </div>
+
+            <div
+              class="pf-v6-c-empty-state__body"
+            >Drag a file here or browse to upload.</div>
+
+            <div class="pf-v6-c-empty-state__footer">
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-primary" type="button">
+                  <span class="pf-v6-c-button__text">Browse</span>
+                </button>
+              </div>
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-link" type="button">
+                  <span class="pf-v6-c-button__text">Start from scratch</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+### With full height modifier
+
+```html
+<div class="pf-v6-c-code-editor pf-m-full-height">
+  <div class="pf-v6-c-code-editor__header">
+    <div class="pf-v6-c-code-editor__header-content">
+      <div class="pf-v6-c-code-editor__controls">
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Copy to clipboard"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-copy" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Download code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-download" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Upload code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-upload" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+      <div class="pf-v6-c-code-editor__header-main">Header main content</div>
+      <div class="pf-v6-c-code-editor__keyboard-shortcuts">
+        <button class="pf-v6-c-button pf-m-link" type="button">
+          <span class="pf-v6-c-button__icon pf-m-start">
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
+          </span>
+          <span class="pf-v6-c-button__text">View shortcuts</span>
+        </button>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__tab">
+      <span class="pf-v6-c-code-editor__tab-icon">
+        <i class="fas fa-code"></i>
+      </span>
+      <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+    </div>
+  </div>
+  <div class="pf-v6-c-code-editor__main">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
+      <pre class="pf-v6-c-code-editor__code-pre">
+                code goes here
+      </pre>
+    </div>
   </div>
 </div>
 
@@ -295,3 +444,5 @@ cssPrefix: pf-v6-c-code-editor
 | `.pf-v6-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                           |
 | `.pf-v6-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                           |
 | `.pf-v6-c-code-editor__upload`             | `<div>`    | Initiates the code editor upload border.                                                      |
+| `.pf-v6-c-code-editor__container`             | `<div>`    | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state.                                                      |
+| `.pf-m-full-height`             | `.pf-v6-c-code-editor`    | Modifies for full-height style.                                                   |

package/docs/components/Content/examples/Content.md

@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-content
 ### Basic
 
 ```html
-<h1 class="pf-v6-c-content--h1">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title">Hello world</h1>
 <p
   class="pf-v6-c-content--p"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -179,7 +179,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-content
 ### Long-form/editorial content
 
 ```html
-<h1 class="pf-v6-c-content--h1 pf-m-editorial">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title pf-m-editorial">Hello world</h1>
 <p
   class="pf-v6-c-content--p pf-m-editorial"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -425,7 +425,7 @@ cssPrefix: pf-v6-c-content
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Plain list example</h3>
-<ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+<ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
   <li
     class="pf-v6-c-content--li pf-m-editorial"
   >Donec blandit a lorem id convallis.</li>
@@ -446,7 +446,7 @@ cssPrefix: pf-v6-c-content
       >Cras gravida arcu at diam gravida gravida.</li>
       <li class="pf-v6-c-content--li pf-m-editorial">
         Integer in volutpat libero.
-        <ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+        <ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
           <li class="pf-v6-c-content--li pf-m-editorial">Nested plain list</li>
           <li
             class="pf-v6-c-content--li pf-m-editorial"
@@ -469,7 +469,7 @@ cssPrefix: pf-v6-c-content
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Visited link example</h3>
 <p class="pf-v6-c-content--p pf-m-editorial">
-  <a class="pf-v6-c-content--a pf-m-editorial pf-m-plain" href>Visited link</a>
+  <a class="pf-v6-c-content--a pf-m-plain pf-m-editorial" href>Visited link</a>
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <p class="pf-v6-c-content--p pf-m-editorial">
@@ -533,7 +533,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content pf-m-editorial">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -704,3 +704,4 @@ This component is an exception to the variable system since we style type select
 | `.pf-m-visited` | `.pf-v6-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
 | `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
 | `.pf-m-editorial` | `.pf-v6-c-content*` | Applies long-form, editorial content styles to a block of content or individual content elements. |
+| `.pf-m-page-title` | `.pf-v6-c-content--[h1, h2, h3, h4, h5, h6]`, `.pf-v6-c-content [h1, h2, h3, h4, h5, h6]` | 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/components/DataList/examples/DataList.md

@@ -573,7 +573,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -637,7 +637,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -702,7 +702,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1115,7 +1115,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1160,7 +1160,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1174,10 +1174,10 @@ When a list item includes more than one block of content, it can be difficult fo
       <div
         class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
       >
-        <button class="pf-v6-c-button pf-m-primary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
           <span class="pf-v6-c-button__text">Primary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
       </div>
@@ -1215,7 +1215,7 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain"
+          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"
@@ -1229,16 +1229,16 @@ When a list item includes more than one block of content, it can be difficult fo
       <div
         class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
       >
-        <button class="pf-v6-c-button pf-m-primary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
           <span class="pf-v6-c-button__text">Primary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
-        <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
           <span class="pf-v6-c-button__text">Secondary</span>
         </button>
       </div>
@@ -1321,6 +1321,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
   </li>
 </ul>
+
 <h2 class="Preview__section-title">Flex modifiers - example 2</h2>
 <ul
   class="pf-v6-c-data-list"
@@ -1379,6 +1380,7 @@ When a list item includes more than one block of content, it can be difficult fo
     </div>
   </li>
 </ul>
+
 <h2 class="Preview__section-title">Flex modifiers - example 3</h2>
 <ul
   class="pf-v6-c-data-list"
@@ -1755,7 +1757,7 @@ When a list item includes more than one block of content, it can be difficult fo
   id="draggable-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>
 <ul
-  class="pf-v6-c-data-list pf-m-compact"
+  class="pf-v6-c-data-list"
   role="list"
   aria-label="Draggable data list rows"
   id="data-list-draggable"

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -470,12 +470,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     <caption class="pf-v6-c-table__caption">This is the table caption</caption>
 
     <thead class="pf-v6-c-table__thead">
-      <tr
-        class="pf-v6-c-table__tr"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr" role="row">
         <th class="pf-v6-c-table__th" role="columnheader">Text input</th>
 
         <th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
@@ -505,12 +500,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     </thead>
 
     <tbody class="pf-v6-c-table__tbody" role="rowgroup">
-      <tr
-        class="pf-v6-c-table__tr pf-m-inline-editable"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr pf-m-inline-editable" role="row">
         <th
           class="pf-v6-c-table__th"
           role="columnheader"
@@ -699,12 +689,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         </td>
       </tr>
 
-      <tr
-        class="pf-v6-c-table__tr"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr" role="row">
         <th
           class="pf-v6-c-table__th"
           role="columnheader"

package/docs/components/Label/examples/Label.css

@@ -11,3 +11,15 @@
 #ws-core-c-label-overflow .pf-v6-c-label {
   margin: 4px;
 }
+
+#ws-core-c-label-labels-with-truncation .ws-preview-html { 
+  max-width: 320px;
+}
+
+.pf-v6-c-label-truncate--example {
+  max-width: 100%;
+  padding: var(--pf-t--global--spacer--sm);
+  overflow: auto;
+  resize: horizontal;
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
+}

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

@@ -6582,6 +6582,41 @@ Use a label group to display multiple labels at once.
   </div>
 </div>
 
+<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">
+          <span class="pf-v6-c-label__content">
+            <span class="pf-v6-c-label__text">A</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__text">T</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__text">I</span>
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+
 ```
 
 ### Label group with overflow
@@ -7785,6 +7820,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