@patternfly/patternfly 5.0.0-alpha.24 → 5.0.0-alpha.25

package/docs/components/Wizard/examples/Wizard.md

@@ -12,15 +12,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -218,15 +217,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -424,15 +422,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -678,15 +675,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -912,15 +908,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -1149,15 +1144,14 @@ wrapperTag: div
 ```html isFullscreen
 <div class="pf-c-wizard pf-m-finished">
   <div class="pf-c-wizard__header">
-    <button
-      class="pf-c-button pf-m-plain pf-c-wizard__close"
-      type="button"
-      aria-label="Close"
-    >
-      <i class="fas fa-times" aria-hidden="true"></i>
-    </button>
-    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+    <div class="pf-c-wizard__close">
+      <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-wizard__title">
+      <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+    </div>
     <div class="pf-c-wizard__description">Here is where the description goes</div>
   </div>
   <button
@@ -1218,10 +1212,14 @@ wrapperTag: div
                   <i class="fas fa- fa-cogs" aria-hidden="true"></i>
                 </div>
 
-                <h1
-                  class="pf-c-title pf-m-lg"
+                <div
+                  class="pf-c-empty-state__title"
                   id="wizard-finished-empty-state-title"
-                >Validating credentials</h1>
+                >
+                  <h1
+                    class="pf-c-empty-state__title-text"
+                  >Validating credentials</h1>
+                </div>
                 <div class="pf-c-empty-state__body">
                   <div
                     class="pf-c-progress pf-m-singleline"
@@ -1290,8 +1288,9 @@ wrapperTag: div
 | -- | -- | -- |
 | `.pf-c-wizard` | `<div>` | Initiates the wizard component. **Required** |
 | `.pf-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
-| `.pf-c-wizard__close` | `.pf-c-button.pf-m-plain` | Initiates the close button. **Required** |
-| `.pf-c-wizard__title` | `.pf-c-title.pf-m-3xl` | Initiates the title. **Required** |
+| `.pf-c-wizard__close` | `<div>` | Initiates the close button. **Required** |
+| `.pf-c-wizard__title` | `<div>` | Initiates the title container. **Required** |
+| `.pf-c-wizard__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Initiates the wizard title text. |
 | `.pf-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
 | `.pf-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
 | `.pf-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |

package/docs/demos/Card/examples/Card.md

@@ -70,10 +70,12 @@ wrapperTag: div
     </div>
     <div class="pf-c-card__header-main">
       <div class="pf-l-split pf-m-gutter pf-m-wrap">
-        <div
-          class="pf-c-card__title"
-          id="card-demo-horizontal-grid-collapsed-example-title"
-        >Getting started</div>
+        <div class="pf-c-card__title">
+          <h2
+            class="pf-c-card__title-text"
+            id="card-demo-horizontal-grid-collapsed-example-title"
+          >Getting started</h2>
+        </div>
         <div class="pf-c-label-group">
           <div class="pf-c-label-group__main">
             <ul
@@ -197,10 +199,12 @@ wrapperTag: div
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div
-        class="pf-c-card__title"
-        id="card-demo-horizontal-grid-expanded-example-title"
-      >Getting started</div>
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-demo-horizontal-grid-expanded-example-title"
+        >Getting started</h2>
+      </div>
     </div>
   </div>
   <div class="pf-c-card__expandable-content">
@@ -363,7 +367,9 @@ wrapperTag: div
       style="min-height: 200px; background: center / cover url('/assets/images/pfbg_992@2x.jpg'); "
     ></div>
     <div class="pf-l-grid__item">
-      <div class="pf-c-card__title">Headline</div>
+      <div class="pf-c-card__title">
+        <h2 class="pf-c-card__title-text">Headline</h2>
+      </div>
       <div
         class="pf-c-card__body"
       >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div>
@@ -488,7 +494,9 @@ wrapperTag: div
   <div class="pf-l-grid__item">
     <div class="pf-l-gallery pf-m-gutter">
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">5 Clusters</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">5 Clusters</h2>
+        </div>
         <div class="pf-c-card__body">
           <i
             class="fas fa-check-circle pf-u-success-color-100"
@@ -497,7 +505,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">15 Clusters</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">15 Clusters</h2>
+        </div>
         <div class="pf-c-card__body">
           <i
             class="fas fa-exclamation-triangle pf-u-warning-color-100"
@@ -506,7 +516,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">3 Clusters</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">3 Clusters</h2>
+        </div>
         <div class="pf-c-card__body">
           <i
             class="fas fa-times-circle pf-u-danger-color-100"
@@ -519,7 +531,9 @@ wrapperTag: div
   <div class="pf-l-grid__item">
     <div class="pf-l-gallery pf-m-gutter">
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">10 Hosts</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">10 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-inline-flex">
             <div class="pf-l-flex pf-m-space-items-sm">
@@ -549,7 +563,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">50 Hosts</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">50 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-inline-flex">
             <div class="pf-l-flex pf-m-space-items-sm">
@@ -579,7 +595,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card pf-u-text-align-center">
-        <div class="pf-c-card__title">12 Hosts</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text">12 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-inline-flex">
             <div class="pf-l-flex pf-m-space-items-sm">
@@ -616,7 +634,9 @@ wrapperTag: div
       style="--pf-l-gallery--GridTemplateColumns--min: 260px;"
     >
       <div class="pf-c-card">
-        <div class="pf-c-card__title pf-u-text-align-center">13 Hosts</div>
+        <div class="pf-c-card__title">
+          <h2 class="pf-c-card__title-text pf-u-text-align-center">13 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-justify-content-space-around">
             <div class="pf-l-flex">
@@ -647,7 +667,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card">
-        <div class="pf-c-card__title pf-u-text-align-center">3 Hosts</div>
+        <div class="pf-c-card__title pf-u-text-align-center">
+          <h2 class="pf-c-card__title-text">3 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-justify-content-space-around">
             <div class="pf-l-flex">
@@ -678,7 +700,9 @@ wrapperTag: div
         </div>
       </div>
       <div class="pf-c-card">
-        <div class="pf-c-card__title pf-u-text-align-center">50 Hosts</div>
+        <div class="pf-c-card__title pf-u-text-align-center">
+          <h2 class="pf-c-card__title-text">50 Hosts</h2>
+        </div>
         <div class="pf-c-card__body">
           <div class="pf-l-flex pf-m-justify-content-space-around">
             <div class="pf-l-flex">
@@ -1834,11 +1858,7 @@ wrapperTag: div
   <div class="pf-c-card" id="utilization-card-3-example">
     <div class="pf-c-card__header pf-u-align-items-flex-start">
       <div class="pf-c-card__header-main">
-        <div
-          class="pf-c-card__title"
-          id="utilization-card-3-example-title1"
-          style="padding-top: 3px;"
-        >
+        <div class="pf-c-card__title" id="utilization-card-3-example-title1">
           <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
         </div>
       </div>
@@ -1986,7 +2006,7 @@ wrapperTag: div
           class="pf-c-card__title"
           id="nested-cards-toggle-right-example-group-1-title"
         >
-          <span class="pf-u-font-weight-light">CPU 1</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
         </div>
       </div>
     </div>
@@ -2097,7 +2117,7 @@ wrapperTag: div
           class="pf-c-card__title"
           id="nested-cards-toggle-right-example-group-2-title"
         >
-          <span class="pf-u-font-weight-light">CPU 2</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
         </div>
       </div>
     </div>
@@ -2123,9 +2143,9 @@ wrapperTag: div
       <div class="pf-c-card__header-main">
         <div
           class="pf-c-card__title"
-          id="nested-cards-toggle-right-example-group-3-title"
+          id="nested-cards-toggle-right-example-group-3-title&quot;"
         >
-          <span class="pf-u-font-weight-light">CPU 3</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
         </div>
       </div>
     </div>
@@ -2165,7 +2185,7 @@ wrapperTag: div
       </div>
       <div class="pf-c-card__header-main">
         <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
-          <span class="pf-u-font-weight-light">CPU 1</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
         </div>
       </div>
     </div>
@@ -2270,7 +2290,7 @@ wrapperTag: div
       </div>
       <div class="pf-c-card__header-main">
         <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
-          <span class="pf-u-font-weight-light">CPU 2</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
         </div>
       </div>
     </div>
@@ -2292,7 +2312,7 @@ wrapperTag: div
       </div>
       <div class="pf-c-card__header-main">
         <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
-          <span class="pf-u-font-weight-light">CPU 3</span>
+          <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
         </div>
       </div>
     </div>

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

@@ -1265,7 +1265,11 @@ section: demos
             <div class="pf-c-empty-state pf-m-xs">
               <div class="pf-c-empty-state__content">
                 <i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
-                <h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
+                <div class="pf-c-card__title">
+                  <h2
+                    class="pf-c-card__title-text pf-m-md"
+                  >Add a new card to your page</h2>
+                </div>
                 <button class="pf-c-button pf-m-link" type="button">Add card</button>
               </div>
             </div>
@@ -1335,9 +1339,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p
+            <h2
+              class="pf-c-card__title-text"
               id="card-view-basic-example-gallery-card-1-check-label"
-            >Patternfly</p>
+            >Patternfly</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1414,7 +1419,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-2-check-label">ActiveMQ</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-2-check-label"
+            >ActiveMq</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1491,9 +1499,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p
+            <h2
+              class="pf-c-card__title-text"
               id="card-view-basic-example-gallery-card-3-check-label"
-            >Apache Spark</p>
+            >Apache Spark</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1570,7 +1579,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-4-check-label">Avro</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-4-check-label"
+            >Avro</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1647,9 +1659,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p
+            <h2
+              class="pf-c-card__title-text"
               id="card-view-basic-example-gallery-card-5-check-label"
-            >Azure Services</p>
+            >Azure Services</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1727,7 +1740,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-6-check-label">Crypto</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-6-check-label"
+            >Crypto</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1804,7 +1820,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-7-check-label">DropBox</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-7-check-label"
+            >DropBox</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1881,9 +1900,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p
+            <h2
+              class="pf-c-card__title-text"
               id="card-view-basic-example-gallery-card-8-check-label"
-            >JBoss Data Grid</p>
+            >JBoss Data Grid</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -1960,7 +1980,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-9-check-label">REST</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-9-check-label"
+            >Rest</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>
@@ -2038,7 +2061,10 @@ section: demos
             </div>
           </div>
           <div class="pf-c-card__title">
-            <p id="card-view-basic-example-gallery-card-10-check-label">SWAGGER</p>
+            <h2
+              class="pf-c-card__title-text"
+              id="card-view-basic-example-gallery-card-10-check-label"
+            >SWAGGER</h2>
             <div class="pf-c-content">
               <small>Provided by Red Hat</small>
             </div>

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

@@ -1576,10 +1576,12 @@ cssPrefix: pf-d-dashboard
                         </span>
                       </button>
                     </div>
-                    <div
-                      class="pf-c-card__title"
-                      id="dashboard-demo-line-chart-card-1-group-1-title"
-                    >CPU 1</div>
+                    <div class="pf-c-card__title">
+                      <h2
+                        class="pf-c-card__title-text"
+                        id="dashboard-demo-line-chart-card-1-group-1-title"
+                      >CPU 1</h2>
+                    </div>
                   </div>
                   <div class="pf-c-card__expandable-content">
                     <div class="pf-c-card__body">
@@ -1683,10 +1685,12 @@ cssPrefix: pf-d-dashboard
                         </span>
                       </button>
                     </div>
-                    <div
-                      class="pf-c-card__title"
-                      id="dashboard-demo-line-chart-card-1-group-2-title"
-                    >Pod count</div>
+                    <div class="pf-c-card__title">
+                      <h2
+                        class="pf-c-card__title-text"
+                        id="dashboard-demo-line-chart-card-1-group-2-title"
+                      >Pod count</h2>
+                    </div>
                   </div>
                 </div>
                 <div
@@ -1707,10 +1711,12 @@ cssPrefix: pf-d-dashboard
                         </span>
                       </button>
                     </div>
-                    <div
-                      class="pf-c-card__title"
-                      id="dashboard-demo-line-chart-card-1-group-3-title"
-                    >Memory</div>
+                    <div class="pf-c-card__title">
+                      <h2
+                        class="pf-c-card__title-text"
+                        id="dashboard-demo-line-chart-card-1-group-3-title"
+                      >Memory</h2>
+                    </div>
                   </div>
                 </div>
               </div>