@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-collapsed-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-collapsed-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-collapsed-example-page"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-collapsed-example-page-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1521,10 +1523,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-read-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-read-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-read-example-page"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-expanded-read-example-page-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3036,10 +3040,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-unread-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-unread-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-unread-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-unread-example-page-masthead"
@@ -4559,10 +4565,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-attention-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-attention-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-attention-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-attention-example-page-masthead"
@@ -6081,10 +6089,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-with-groups-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-with-groups-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-with-groups-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-with-groups-example-page-masthead"

package/docs/demos/Page/examples/Page.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-basic">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-basic"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-basic"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-basic-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -917,10 +919,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen isBeta
 <div class="pf-c-page pf-m-full-height" id="page-demo-full-height">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-full-height"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-full-height"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-full-height-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1828,10 +1832,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-horizontal-subnav">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-horizontal-subnav"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-horizontal-subnav"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="page-demo-sticky-top-horizontal-subnav-masthead"
@@ -2902,10 +2908,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-breadcrumb">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-breadcrumb"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-breadcrumb"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-top-breadcrumb-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3935,10 +3943,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen isBeta
 <div class="pf-c-page" id="page-demo-sticky-top-breadcrumb">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-breadcrumb"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-breadcrumb"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-top-breadcrumb-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4968,10 +4978,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-section-group">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-section-group"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-section-group"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="page-demo-sticky-top-section-group-masthead"
@@ -6004,10 +6016,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-section-bottom">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-section-bottom"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-section-bottom"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-section-bottom-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -7042,10 +7056,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-overflow-scroll">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-overflow-scroll"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-overflow-scroll"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-overflow-scroll-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -8085,10 +8101,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-centered-section">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-centered-section"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-centered-section"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-centered-section-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-expanded-example-masthead"
@@ -1883,10 +1885,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-collapsed-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-collapsed-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-collapsed-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-collapsed-example-masthead"
@@ -3685,10 +3689,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-content-body-padding-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-content-body-padding-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-content-body-padding-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-content-body-padding-example-masthead"
@@ -5392,10 +5398,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-view-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-view-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-view-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-card-view-expanded-example-masthead"
@@ -6261,6 +6269,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
+    <div class="pf-c-divider" role="separator"></div>
     <section class="pf-c-page__main-section pf-m-no-padding">
       <!-- Drawer -->
       <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
@@ -7516,10 +7525,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-simple-list-on-mobile-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-simple-list-on-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-simple-list-on-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-card-simple-list-on-mobile-example-masthead"
@@ -8575,10 +8586,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-data-list-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-data-list-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-data-list-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-card-data-list-example-masthead"
@@ -9878,10 +9891,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-inline-modifier-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-inline-modifier-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-inline-modifier-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-inline-modifier-example-masthead"
@@ -10748,6 +10763,7 @@ wrapperTag: div
       </div>
     </section>
     <div class="pf-c-divider" role="separator"></div>
+
     <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
       <div class="pf-c-drawer__main">
         <!-- Content -->

package/docs/demos/Skeleton/examples/Skeleton.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="skeleton-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-skeleton-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-skeleton-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="skeleton-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/Table/examples/Table.md

@@ -10,10 +10,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="basic-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-basic-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-basic-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="basic-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1712,10 +1714,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="sortable-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-sortable-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-sortable-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="sortable-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3588,10 +3592,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="expandable-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-expandable-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-expandable-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="expandable-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -5666,10 +5672,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="compact-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-compact-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-compact-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="compact-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -7400,10 +7408,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="compound-expansion-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-compound-expansion-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-compound-expansion-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="compound-expansion-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -12348,10 +12358,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="loading-state-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-loading-state-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-loading-state-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="loading-state-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -13276,10 +13288,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="empty-state-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-empty-state-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-empty-state-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="empty-state-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -14207,10 +14221,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="static-bottom-pagination-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-static-bottom-pagination-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-static-bottom-pagination-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="static-bottom-pagination-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -16081,10 +16097,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="column-management-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-column-management-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-column-management-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="column-management-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -18038,10 +18056,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="sticky-header-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-sticky-header-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-sticky-header-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="sticky-header-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -19912,10 +19932,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="sticky-first-column-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-sticky-first-column-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-sticky-first-column-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="sticky-first-column-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -21710,10 +21732,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="sticky-multiple-columns-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-sticky-multiple-columns-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-sticky-multiple-columns-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="sticky-multiple-columns-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -23527,10 +23551,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="sticky-header-and-multiple columns-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-sticky-header-and-multiple columns-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-sticky-header-and-multiple columns-demo"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="sticky-header-and-multiple columns-demo-masthead"
@@ -25347,10 +25373,12 @@ By default, table cell alignment is set to baseline. This retains vertical align
 
 ```html isFullscreen
 <div class="pf-c-page" id="image-alignment-demo">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-image-alignment-demo"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-image-alignment-demo"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="image-alignment-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button