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

package/docs/components/Popover/examples/Popover.md

@@ -602,7 +602,7 @@ A popover is used to provide contextual information for another component on cli
 | `aria-modal="true"` | `.pf-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
 | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
-| `.pf-screen-reader` | `.pf-c-popover__title-text` | Adds text to be read saying the alert status before the title. If `.pf-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
+| `.pf-screen-reader` | `.pf-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
 
 ### Usage
 
@@ -612,7 +612,6 @@ A popover is used to provide contextual information for another component on cli
 | `.pf-c-popover__arrow` | `<div>` |  Creates an arrow pointing towards the element the popover describes. **Required** |
 | `.pf-c-popover__content` | `<div>` |  Creates the content area of the popover. **Required** |
 | `.pf-c-popover__close` | `<div>` |  Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
-| `.pf-c-button` | `<button>` |  Creates the close button for the popover. |
 | `.pf-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
 | `.pf-c-popover__title` | `<div>` | Creates the popover title. |
 | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon. |

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>