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

package/components/Sidebar/sidebar.css

@@ -111,8 +111,8 @@
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);

package/components/Sidebar/sidebar.scss

@@ -133,8 +133,8 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);

package/components/SimpleList/simple-list.css

@@ -40,9 +40,9 @@
   border: none;
 }
 .pf-c-simple-list__item-link:hover {
-  text-decoration: none;
   --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
   --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+  text-decoration: none;
 }
 .pf-c-simple-list__item-link:focus {
   --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);

package/components/SimpleList/simple-list.scss

@@ -45,10 +45,10 @@
   border: none;
 
   &:hover {
-    text-decoration: none;
-
     --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
     --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+
+    text-decoration: none;
   }
 
   &:focus {

package/components/Spinner/spinner.css

@@ -187,13 +187,13 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
   stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-c-spinner--stroke-width);
+  transform-origin: 50% 50%;
+  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -213,8 +213,8 @@ svg.pf-c-spinner.pf-m-xl {
     stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
   }
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
   100% {
     stroke-dashoffset: 280;

package/components/Spinner/spinner.scss

@@ -252,13 +252,13 @@ svg.pf-c-spinner {
 .pf-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
   stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-c-spinner--stroke-width);
+  transform-origin: 50% 50%;
+  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -282,8 +282,8 @@ svg.pf-c-spinner {
   }
 
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
 
   100% {

package/components/Table/table.css

@@ -660,9 +660,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 }
 .pf-c-table__button-content .pf-c-table__text,
 .pf-c-table__column-help .pf-c-table__text {

package/components/Table/table.scss

@@ -874,9 +874,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 
   .pf-c-table__text {
     min-width: auto;

package/components/TextInputGroup/text-input-group.css

@@ -78,9 +78,9 @@
 
 .pf-c-text-input-group__text {
   display: inline-grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
 .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
   position: absolute;

package/components/TextInputGroup/text-input-group.scss

@@ -106,9 +106,9 @@
 
 .pf-c-text-input-group__text {
   display: inline-grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 
   &::before,
   &::after {

package/components/Tile/tile.css

@@ -42,11 +42,11 @@
   --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 }

package/components/Tile/tile.scss

@@ -63,11 +63,11 @@
 
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 

package/components/Timestamp/timestamp.css

@@ -17,12 +17,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
-  cursor: pointer;
   text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-timestamp.pf-m-help-text:hover {
   --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);

package/components/Timestamp/timestamp.scss

@@ -20,12 +20,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 
   &.pf-m-help-text {
-    cursor: pointer;
     text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-    text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
     text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-    text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+    text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
     text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+    text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+    cursor: pointer;
 
     &:hover {
       --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);

package/components/Toolbar/toolbar.css

@@ -111,8 +111,8 @@
   --pf-c-toolbar--m-full-height__item--Display: flex;
   --pf-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -405,9 +405,9 @@
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 }
 .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
 .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {

package/components/Toolbar/toolbar.scss

@@ -131,8 +131,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -437,9 +437,9 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 
   .pf-c-toolbar__item {
     --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--spacer);

package/components/Wizard/wizard.css

@@ -47,6 +47,10 @@
   --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
   --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
@@ -230,6 +234,8 @@
   position: absolute;
   top: var(--pf-c-wizard__close--Top);
   right: var(--pf-c-wizard__close--Right);
+}
+.pf-c-wizard__header .pf-c-wizard__close button {
   font-size: var(--pf-c-wizard__close--FontSize);
 }
 
@@ -238,6 +244,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -486,8 +499,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 }

package/components/Wizard/wizard.scss

@@ -37,6 +37,12 @@
   // Title
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
 
+  // Title text
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
+
   // Description
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
@@ -241,7 +247,10 @@
     position: absolute;
     top: var(--pf-c-wizard__close--Top);
     right: var(--pf-c-wizard__close--Right);
-    font-size: var(--pf-c-wizard__close--FontSize);
+
+    button {
+      font-size: var(--pf-c-wizard__close--FontSize);
+    }
   }
 }
 
@@ -250,6 +259,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -529,8 +545,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 

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

@@ -10,7 +10,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-basic-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -79,7 +81,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
   </div>
-  <div class="pf-c-card__title" id="card-action-example-1-check-label">Title</div>
+  <div class="pf-c-card__title">
+    <h2
+      class="pf-c-card__title-text"
+      id="card-action-example-1-check-label"
+    >Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -145,10 +152,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div
-        class="pf-c-card__title"
-        id="card-action-example-2-check-label"
-      >This is a really really really really really really really really really really long title</div>
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-action-example-2-check-label"
+        >This is a really really really really really really really really really really long title</h2>
+      </div>
     </div>
   </div>
   <div class="pf-c-card__body">Body</div>
@@ -254,7 +263,9 @@ cssPrefix: pf-c-card
       <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
     </div>
   </div>
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -265,7 +276,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-no-footer-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">This card has no footer</div>
 </div>
 
@@ -294,7 +307,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-multiple-body-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__body">Body</div>
@@ -307,7 +322,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-body-fill-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
   <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
   <div class="pf-c-card__body">Body</div>
@@ -320,7 +337,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-compact" id="card-compact-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -331,7 +350,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-display-lg" id="card-display-lg-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -342,7 +363,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -357,7 +380,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -372,7 +397,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selected-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -393,7 +420,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-with-input-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -407,7 +436,9 @@ cssPrefix: pf-c-card
   class="pf-c-card pf-m-non-selectable-raised"
   id="card-non-selectable-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -418,7 +449,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-hoverable" id="card-hoverable-legacy-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -433,7 +466,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-legacy-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -448,7 +483,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selected-legacy-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -459,7 +496,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-flat" id="card-flat-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -470,7 +509,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-rounded" id="card-rounded-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -481,7 +522,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-plain" id="card-plain-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -560,7 +603,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-expandable-example-title"
+        >Title</h2>
+      </div>
     </div>
   </div>
 </div>
@@ -722,7 +770,7 @@ cssPrefix: pf-c-card
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
+      <h2 class="pf-c-card__title-text" id="card-expanded-example-title">Title</h2>
     </div>
   </div>
   <div class="pf-c-card__expandable-content">
@@ -792,7 +840,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-full-height-example-title&quot;"
+        >Title</h2>
+      </div>
     </div>
   </div>
   <div class="pf-c-card__body">Body</div>
@@ -860,10 +913,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
     <div class="pf-c-card__header-main">
-      <div
-        class="pf-c-card__title"
-        id="card-toggle-on-right-example-title"
-      >Title</div>
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-toggle-on-right-example-title"
+        >Title</h2>
+      </div>
     </div>
     <div class="pf-c-card__header-toggle">
       <button
@@ -887,7 +942,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <hr class="pf-c-divider" />
   <div class="pf-c-card__body">Body</div>
   <hr class="pf-c-divider" />
@@ -909,7 +966,8 @@ A card is a generic rectangular container that can be used to build other compon
 | Class | Applied | Outcome |
 | ---- | ---- | ---- |
 | `.pf-c-card` | `<div>` | Creates a card component.  **Required** |
-| `.pf-c-card__title` | `<div>` | Creates the title of a card. |
+| `.pf-c-card__title` | `<div>` | Creates a card title container. |
+| `.pf-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
 | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
 | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
 | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |

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. |