@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/docs/demos/Wizard/examples/Wizard.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1120,8 +1122,8 @@ wrapperTag: div
             </main>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -1138,10 +1140,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-nav-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-nav-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-nav-expanded-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-nav-expanded-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2250,8 +2254,8 @@ wrapperTag: div
             </main>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -2268,10 +2272,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-closed-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-closed-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-closed-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-with-drawer-closed-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3452,8 +3458,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -3473,10 +3479,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-expanded-example-masthead"
@@ -4657,8 +4665,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -4678,10 +4686,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-info-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-info-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-info-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-with-drawer-info-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -5732,8 +5742,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -5753,10 +5763,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-in-page-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-in-page-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-in-page-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-in-page-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -6827,8 +6839,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -6845,10 +6857,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="in-page-nav-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-in-page-nav-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-in-page-nav-expanded-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="in-page-nav-expanded-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -7898,8 +7912,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -7916,10 +7930,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-in-page-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-in-page-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-in-page-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-in-page-example-masthead"
@@ -8807,45 +8823,50 @@ wrapperTag: div
             <i class="fas fa-caret-down" aria-hidden="true"></i>
           </span>
         </button>
-        <div class="pf-c-wizard__outer-wrap">
-          <div class="pf-c-wizard__inner-wrap">
-            <nav class="pf-c-wizard__nav" aria-label="Steps">
-              <ol class="pf-c-wizard__nav-list">
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link">Information</button>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button
-                    class="pf-c-wizard__nav-link pf-m-current"
-                  >Configuration</button>
-                  <ol class="pf-c-wizard__nav-list">
-                    <li class="pf-c-wizard__nav-item">
-                      <button class="pf-c-wizard__nav-link">Substep A</button>
-                    </li>
-                    <li class="pf-c-wizard__nav-item">
-                      <button
-                        class="pf-c-wizard__nav-link pf-m-current"
-                        aria-current="page"
-                      >Substep B</button>
-                    </li>
-                    <li class="pf-c-wizard__nav-item">
-                      <button class="pf-c-wizard__nav-link">Substep C</button>
-                    </li>
-                  </ol>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link">Additional</button>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link" disabled>Review</button>
-                </li>
-              </ol>
-            </nav>
-            <main class="pf-c-wizard__main" tabindex="0">
-              <div class="pf-c-drawer pf-m-inline">
-                <div class="pf-c-drawer__main">
-                  <div class="pf-c-drawer__content">
+        <div class="pf-c-drawer pf-m-inline">
+          <div class="pf-c-drawer__main">
+            <div class="pf-c-drawer__content">
+              <div class="pf-c-wizard__outer-wrap">
+                <div class="pf-c-wizard__inner-wrap">
+                  <nav class="pf-c-wizard__nav" aria-label="Steps">
+                    <ol class="pf-c-wizard__nav-list">
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link">Information</button>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button
+                          class="pf-c-wizard__nav-link pf-m-current"
+                        >Configuration</button>
+                        <ol class="pf-c-wizard__nav-list">
+                          <li class="pf-c-wizard__nav-item">
+                            <button class="pf-c-wizard__nav-link">Substep A</button>
+                          </li>
+                          <li class="pf-c-wizard__nav-item">
+                            <button
+                              class="pf-c-wizard__nav-link pf-m-current"
+                              aria-current="page"
+                            >Substep B</button>
+                          </li>
+                          <li class="pf-c-wizard__nav-item">
+                            <button class="pf-c-wizard__nav-link">Substep C</button>
+                          </li>
+                        </ol>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link">Additional</button>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link" disabled>Review</button>
+                      </li>
+                    </ol>
+                  </nav>
+                  <main class="pf-c-wizard__main" tabindex="0">
                     <div class="pf-c-wizard__main-body">
+                      <button
+                        class="pf-c-button pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
+                        type="button"
+                        aria-expanded="true"
+                      >Open drawer</button>
                       <form class="pf-c-form pf-m-limit-width" novalidate>
                         <div class="pf-c-form__group">
                           <div class="pf-c-form__group-label"><label
@@ -8989,65 +9010,57 @@ wrapperTag: div
                         </div>
                       </form>
                     </div>
-                  </div>
-                  <div
-                    class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33"
-                    hidden
-                  >
-                    <div class="pf-c-drawer__body">
-                      <div class="pf-c-drawer__head">
-                        <h2
-                          class="pf-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-c-drawer__actions">
-                          <div class="pf-c-drawer__close">
-                            <button
-                              class="pf-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <i class="fas fa-times" aria-hidden="true"></i>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="pf-c-drawer__body">
-                      <div class="pf-c-content">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
-                        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
-                        <p>
-                          Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
-                          <a
-                            href="#"
-                          >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
-                        </p>
-                        <a href="#">
-                          <span
-                            class="pf-l-flex pf-m-space-items-sm pf-m-nowrap"
-                          >
-                            <span>Learn about Red Hat connector</span>
-                            <i
-                              class="fas fa-external-link-alt"
-                              aria-hidden="true"
-                            ></i>
-                          </span>
-                        </a>
-                      </div>
+                  </main>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33" hidden>
+              <div class="pf-c-drawer__body">
+                <div class="pf-c-drawer__head">
+                  <h2 class="pf-c-title pf-m-xl">Register with Red Hat connector</h2>
+                  <div class="pf-c-drawer__actions">
+                    <div class="pf-c-drawer__close">
+                      <button
+                        class="pf-c-button pf-m-plain"
+                        type="button"
+                        aria-label="Close drawer panel"
+                      >
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                      </button>
                     </div>
                   </div>
                 </div>
               </div>
-            </main>
-          </div>
-          <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
-            <button class="pf-c-button pf-m-secondary" type="button">Back</button>
-            <div class="pf-c-wizard__footer-cancel">
-              <button class="pf-c-button pf-m-link" type="button">Cancel</button>
+              <div class="pf-c-drawer__body">
+                <div class="pf-c-content">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
+
+                  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
+
+                  <p>
+                    Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
+                    <a
+                      href="#"
+                    >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
+                  </p>
+                  <a href="#">
+                    <span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                      <span>Learn about Red Hat connector</span>
+                      <i class="fas fa-external-link-alt" aria-hidden="true"></i>
+                    </span>
+                  </a>
+                </div>
+              </div>
             </div>
-          </footer>
+          </div>
         </div>
+        <footer class="pf-c-wizard__footer">
+          <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
+          <div class="pf-c-wizard__footer-cancel">
+            <button class="pf-c-button pf-m-link" type="button">Cancel</button>
+          </div>
+        </footer>
       </div>
     </section>
   </main>
@@ -9059,10 +9072,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-in-page-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-in-page-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-in-page-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-in-page-expanded-example-masthead"
@@ -9950,44 +9965,44 @@ wrapperTag: div
             <i class="fas fa-caret-down" aria-hidden="true"></i>
           </span>
         </button>
-        <div class="pf-c-wizard__outer-wrap">
-          <div class="pf-c-wizard__inner-wrap">
-            <nav class="pf-c-wizard__nav" aria-label="Steps">
-              <ol class="pf-c-wizard__nav-list">
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link">Information</button>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button
-                    class="pf-c-wizard__nav-link pf-m-current"
-                  >Configuration</button>
-                  <ol class="pf-c-wizard__nav-list">
-                    <li class="pf-c-wizard__nav-item">
-                      <button class="pf-c-wizard__nav-link">Substep A</button>
-                    </li>
-                    <li class="pf-c-wizard__nav-item">
-                      <button
-                        class="pf-c-wizard__nav-link pf-m-current"
-                        aria-current="page"
-                      >Substep B</button>
-                    </li>
-                    <li class="pf-c-wizard__nav-item">
-                      <button class="pf-c-wizard__nav-link">Substep C</button>
-                    </li>
-                  </ol>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link">Additional</button>
-                </li>
-                <li class="pf-c-wizard__nav-item">
-                  <button class="pf-c-wizard__nav-link" disabled>Review</button>
-                </li>
-              </ol>
-            </nav>
-            <main class="pf-c-wizard__main" tabindex="0">
-              <div class="pf-c-drawer pf-m-expanded pf-m-inline">
-                <div class="pf-c-drawer__main">
-                  <div class="pf-c-drawer__content">
+        <div class="pf-c-drawer pf-m-expanded pf-m-inline">
+          <div class="pf-c-drawer__main">
+            <div class="pf-c-drawer__content">
+              <div class="pf-c-wizard__outer-wrap">
+                <div class="pf-c-wizard__inner-wrap">
+                  <nav class="pf-c-wizard__nav" aria-label="Steps">
+                    <ol class="pf-c-wizard__nav-list">
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link">Information</button>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button
+                          class="pf-c-wizard__nav-link pf-m-current"
+                        >Configuration</button>
+                        <ol class="pf-c-wizard__nav-list">
+                          <li class="pf-c-wizard__nav-item">
+                            <button class="pf-c-wizard__nav-link">Substep A</button>
+                          </li>
+                          <li class="pf-c-wizard__nav-item">
+                            <button
+                              class="pf-c-wizard__nav-link pf-m-current"
+                              aria-current="page"
+                            >Substep B</button>
+                          </li>
+                          <li class="pf-c-wizard__nav-item">
+                            <button class="pf-c-wizard__nav-link">Substep C</button>
+                          </li>
+                        </ol>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link">Additional</button>
+                      </li>
+                      <li class="pf-c-wizard__nav-item">
+                        <button class="pf-c-wizard__nav-link" disabled>Review</button>
+                      </li>
+                    </ol>
+                  </nav>
+                  <main class="pf-c-wizard__main" tabindex="0">
                     <div class="pf-c-wizard__main-body">
                       <form class="pf-c-form pf-m-limit-width" novalidate>
                         <div class="pf-c-form__group">
@@ -10132,62 +10147,57 @@ wrapperTag: div
                         </div>
                       </form>
                     </div>
-                  </div>
-                  <div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
-                    <div class="pf-c-drawer__body">
-                      <div class="pf-c-drawer__head">
-                        <h2
-                          class="pf-c-title pf-m-xl"
-                        >Register with Red Hat connector</h2>
-                        <div class="pf-c-drawer__actions">
-                          <div class="pf-c-drawer__close">
-                            <button
-                              class="pf-c-button pf-m-plain"
-                              type="button"
-                              aria-label="Close drawer panel"
-                            >
-                              <i class="fas fa-times" aria-hidden="true"></i>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="pf-c-drawer__body">
-                      <div class="pf-c-content">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
-                        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
-                        <p>
-                          Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
-                          <a
-                            href="#"
-                          >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
-                        </p>
-                        <a href="#">
-                          <span
-                            class="pf-l-flex pf-m-space-items-sm pf-m-nowrap"
-                          >
-                            <span>Learn about Red Hat connector</span>
-                            <i
-                              class="fas fa-external-link-alt"
-                              aria-hidden="true"
-                            ></i>
-                          </span>
-                        </a>
-                      </div>
+                  </main>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
+              <div class="pf-c-drawer__body">
+                <div class="pf-c-drawer__head">
+                  <h2 class="pf-c-title pf-m-xl">Register with Red Hat connector</h2>
+                  <div class="pf-c-drawer__actions">
+                    <div class="pf-c-drawer__close">
+                      <button
+                        class="pf-c-button pf-m-plain"
+                        type="button"
+                        aria-label="Close drawer panel"
+                      >
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                      </button>
                     </div>
                   </div>
                 </div>
               </div>
-            </main>
-          </div>
-          <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
-            <button class="pf-c-button pf-m-secondary" type="button">Back</button>
-            <div class="pf-c-wizard__footer-cancel">
-              <button class="pf-c-button pf-m-link" type="button">Cancel</button>
+              <div class="pf-c-drawer__body">
+                <div class="pf-c-content">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
+
+                  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
+
+                  <p>
+                    Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
+                    <a
+                      href="#"
+                    >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
+                  </p>
+                  <a href="#">
+                    <span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                      <span>Learn about Red Hat connector</span>
+                      <i class="fas fa-external-link-alt" aria-hidden="true"></i>
+                    </span>
+                  </a>
+                </div>
+              </div>
             </div>
-          </footer>
+          </div>
         </div>
+        <footer class="pf-c-wizard__footer">
+          <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
+          <div class="pf-c-wizard__footer-cancel">
+            <button class="pf-c-button pf-m-link" type="button">Cancel</button>
+          </div>
+        </footer>
       </div>
     </section>
   </main>