opa gatekeeper layout

assets/styles/base/_typography.scss

@@ -46,3 +46,11 @@ P {
   letter-spacing: 0em;
   margin: 0;
 }
+
+MAIN {
+  UL {
+    LI {
+      margin-bottom: 1.4em;
+    }
+  }
+}

components/GatekeeperConfig.vue

@@ -371,16 +371,35 @@ export default {
       </InfoBox>
     </div>
     <div v-else class="mt-20 mb-20">
-      <article class="col span-12 info">
+      <div class="row">
-        <p>
+        <div class="col span-6">
-          OPA Gatekeeper provides first-class integration between OPA (Open Policy Agent) and Kubernetes. For more information, visit the <a href="https://www.openpolicyagent.org/docs/latest/kubernetes-introduction/" target="blank">OPA documentation.</a>
+          <h3>Description</h3>
-        </p>
+          <ul>
-      </article>
+            <li>OPA Gatekeeper provides first-class integration between OPA (Open Policy Agent) and Kubernetes.</li> 
-      <div class="row action-group">
+            <li>You can Customize Gatekeeper’s yaml configuartion or Enable Gatekeeper with defaults.</li>
-        <div class="col">
+            <li>For more information, visit the <a href="https://www.openpolicyagent.org/docs/latest/kubernetes-introduction/" target="blank">OPA documentation.</a></li>
-          <h4 class="mb-20">
+          </ul>
-            Enable Gatekeeper <span v-if="appVersion">({{ appVersion }}) </span>with defaults.
+        </div>
-          </h4>
+        <div class="col span-6">
+          <h3>Requirements</h3>
+          <ul>
+            <li>XXXX CPU Cores</li>
+            <li>XXXX Gb of  Memory </li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <div class="spacer"></div>  
+        <div class="text-center">
+          <button
+            type="button"
+            class="btn role-secondary"
+            :class="{ disabled: saving }"
+            :disable="saving"
+            @click="openYamlEditor"
+          >
+            Customize
+          </button>
           <AsyncButton
             :mode="mode"
             action-label="Enable"
@@ -392,20 +411,6 @@ export default {
             @click="enable"
           />
         </div>
-        <div class="col">
-          <h4 class="mb-20">
-            Customize Gatekeeper yaml configuartion.
-          </h4>
-          <button
-            type="button"
-            class="btn bg-primary"
-            :class="{ disabled: saving }"
-            :disable="saving"
-            @click="openYamlEditor"
-          >
-            Customize Configuration
-          </button>
-        </div>
       </div>
     </div>
     <section v-if="showYamlEditor">