From c9df4fbaff66711d9f2095d933ee984a4a0c1e69 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Thu, 24 Sep 2020 23:02:26 -0700
Subject: [PATCH] Refactors the rest of the showcase card views to use flexgrid

---
 showcase/src/App.vue               |   1 +
 showcase/src/views/InputCards.vue  | 337 ++++++++++++++++-------------
 showcase/src/views/LayoutCards.vue | 202 +++++++++--------
 showcase/src/views/SystemCards.vue | 292 +++++++++++++------------
 showcase/src/views/TableCards.vue  | 222 ++++++++++---------
 5 files changed, 561 insertions(+), 493 deletions(-)

diff --git a/showcase/src/App.vue b/showcase/src/App.vue
index 98823d444..fb3acdaef 100644
--- a/showcase/src/App.vue
+++ b/showcase/src/App.vue
@@ -123,6 +123,7 @@ export default {
 }
 
 .main {
+  /* TODO -- once we've got everything in the flexgrid I think we'll turn all this off */
   width: var(--app-width-initial);
   margin: 0 auto;
   flex: 1 1 auto;
diff --git a/showcase/src/views/InputCards.vue b/showcase/src/views/InputCards.vue
index 1ec18538f..9346334f9 100644
--- a/showcase/src/views/InputCards.vue
+++ b/showcase/src/views/InputCards.vue
@@ -1,168 +1,192 @@
 <template>
-  <div>
-    <h4 id="inputs" :class="$style.types">Inputs</h4>
-    <div :class="$style.cards">
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Button</h6>
-        </header>
-        <a href="#buttons" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="32"
-            viewBox="0 0 88 32"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="88" height="32" rx="3" fill="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Input</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="32"
-            viewBox="0 0 88 32"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Textarea</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="72"
-            viewBox="0 0 88 72"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="71" rx="2.5" stroke="#D8D8D8" />
-            <line x1="83.3536" y1="60.3536" x2="76.3536" y2="67.3536" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Select</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="32"
-            viewBox="0 0 88 32"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M75 21L70.6699 13.5L79.3301 13.5L75 21Z" fill="#C4C4C4" />
-            <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-    </div>
-
-    <div :class="$style.cards">
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Progress</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="10"
-            viewBox="0 0 88 10"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="9" rx="4.5" stroke="#D8D8D8" />
-            <path
-              d="M0 5C0 2.23858 2.23858 0 5 0H34.4667V10H5C2.23858 10 0 7.76142 0 5Z"
-              fill="#D8D8D8"
-            />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Checkbox</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="92"
-            height="54"
-            viewBox="0 0 92 54"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="28.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
-            <rect x="28.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
-            <rect x="28.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
-            <rect y="22" width="10" height="10" fill="#D8D8D8" />
-            <rect x="0.5" y="0.5" width="9" height="9" stroke="#D8D8D8" />
-            <rect x="0.5" y="44.5" width="9" height="9" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Radio</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="90"
-            height="54"
-            viewBox="0 0 90 54"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="26.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
-            <rect x="26.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
-            <rect x="26.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
-            <circle cx="5" cy="5" r="4.5" stroke="#D8D8D8" />
-            <circle cx="5" cy="27" r="5" fill="#CCCCCC" />
-            <circle cx="5" cy="49" r="4.5" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Button Select</h6>
-        </header>
-        <a href="#" :class="$style.cardbody">
-          <svg
-            width="104"
-            height="20"
-            viewBox="0 0 104 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M36 0H68V20H36V0Z" fill="#D8D8D8" />
-            <path d="M0 0H32V20H0V0Z" fill="#CCCCCC" />
-            <path d="M72 0H104V20H72V0Z" fill="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-    </div>
-  </div>
+  <FlexGrid tagName="section">
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12">
+        <h4 id="inputs" :class="$style.types">Inputs</h4>
+      </FlexCol>
+    </FlexRow>
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Button</h6>
+          </header>
+          <a href="#buttons" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="32"
+              viewBox="0 0 88 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect width="88" height="32" rx="3" fill="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Input</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="32"
+              viewBox="0 0 88 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Textarea</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="72"
+              viewBox="0 0 88 72"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="71" rx="2.5" stroke="#D8D8D8" />
+              <line x1="83.3536" y1="60.3536" x2="76.3536" y2="67.3536" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Select</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="32"
+              viewBox="0 0 88 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M75 21L70.6699 13.5L79.3301 13.5L75 21Z" fill="#C4C4C4" />
+              <rect x="0.5" y="0.5" width="87" height="31" rx="2.5" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+    </FlexRow>
+    <FlexRow :customClasses="$style.row2" v-bind:gutter="16">
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Progress</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="10"
+              viewBox="0 0 88 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="9" rx="4.5" stroke="#D8D8D8" />
+              <path
+                d="M0 5C0 2.23858 2.23858 0 5 0H34.4667V10H5C2.23858 10 0 7.76142 0 5Z"
+                fill="#D8D8D8"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Checkbox</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="92"
+              height="54"
+              viewBox="0 0 92 54"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="28.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
+              <rect x="28.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
+              <rect x="28.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
+              <rect y="22" width="10" height="10" fill="#D8D8D8" />
+              <rect x="0.5" y="0.5" width="9" height="9" stroke="#D8D8D8" />
+              <rect x="0.5" y="44.5" width="9" height="9" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Radio</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="90"
+              height="54"
+              viewBox="0 0 90 54"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="26.5" y="0.5" width="63" height="9" stroke="#D8D8D8" />
+              <rect x="26.5" y="22.5" width="63" height="9" stroke="#D8D8D8" />
+              <rect x="26.5" y="44.5" width="63" height="9" stroke="#D8D8D8" />
+              <circle cx="5" cy="5" r="4.5" stroke="#D8D8D8" />
+              <circle cx="5" cy="27" r="5" fill="#CCCCCC" />
+              <circle cx="5" cy="49" r="4.5" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Button Select</h6>
+          </header>
+          <a href="#" :class="$style.cardbody">
+            <svg
+              width="104"
+              height="20"
+              viewBox="0 0 104 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M36 0H68V20H36V0Z" fill="#D8D8D8" />
+              <path d="M0 0H32V20H0V0Z" fill="#CCCCCC" />
+              <path d="M72 0H104V20H72V0Z" fill="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+    </FlexRow>
+  </FlexGrid>
 </template>
 
 <script>
 import Card from "agnosticui/Card.vue";
+import FlexGrid from "agnosticui/FlexGrid/FlexGrid";
+import FlexRow from "agnosticui/FlexGrid/FlexRow";
+import FlexCol from "agnosticui/FlexGrid/FlexCol";
 
 export default {
   name: "InputCards",
   components: {
     Card,
+    FlexCol,
+    FlexGrid,
+    FlexRow,
   },
 };
 </script>
@@ -180,4 +204,7 @@ export default {
 .cardbody {
   composes: cardbody from "./views.module.css";
 }
+.row2 {
+  margin-top: var(--Space-24);
+}
 </style>
\ No newline at end of file
diff --git a/showcase/src/views/LayoutCards.vue b/showcase/src/views/LayoutCards.vue
index 0bd4e5ca0..b37579329 100644
--- a/showcase/src/views/LayoutCards.vue
+++ b/showcase/src/views/LayoutCards.vue
@@ -1,102 +1,126 @@
 <template>
-  <div>
-    <h4 id="layoutsandnavigation" :class="$style.types">Layout &amp; Navigation</h4>
-    <div :class="$style.cards">
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Tabs</h6>
-        </header>
-        <a href="#color" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="80"
-            viewBox="0 0 88 80"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
-            <path
-              d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H29.5V15.5H0.5V3Z"
-              fill="#CCCCCC"
-              stroke="#D8D8D8"
-            />
-            <path d="M29.5 1C29.5 0.723858 29.7239 0.5 30 0.5H58.5V15.5H29.5V1Z" stroke="#D8D8D8" />
-            <path d="M58.5 0.5H85C86.3807 0.5 87.5 1.61929 87.5 3V15.5H58.5V0.5Z" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Card</h6>
-        </header>
-        <a href="#color" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="80"
-            viewBox="0 0 88 80"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
-            <path
-              d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H85C86.3807 0.5 87.5 1.61929 87.5 3V15.5H0.5V3Z"
-              stroke="#D8D8D8"
-            />
-            <line x1="16" y1="39.5" x2="72" y2="39.5" stroke="#D8D8D8" />
-            <line x1="16" y1="51.5" x2="72" y2="51.5" stroke="#D8D8D8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Header</h6>
-        </header>
-        <a href="#color" :class="$style.cardbody">
-          <svg
-            width="88"
-            height="80"
-            viewBox="0 0 88 80"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
-            <path
-              d="M0 3C0 1.34315 1.34315 0 3 0H85C86.6569 0 88 1.34315 88 3V16H0V3Z"
-              fill="#D8D8D8"
-            />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Stepper</h6>
-        </header>
-        <a href="#color" :class="$style.cardbody">
-          <svg
-            width="10"
-            height="54"
-            viewBox="0 0 10 54"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="5" cy="5" r="4.5" stroke="#D8D8D8" />
-            <circle cx="5" cy="49" r="4.5" stroke="#D8D8D8" />
-            <line x1="5" y1="9" x2="5" y2="44" stroke="#D8D8D8" stroke-width="2" />
-            <circle cx="5" cy="27" r="4.5" fill="#D8D8D8" stroke="#CCCCCC" />
-          </svg>
-        </a>
-      </Card>
-    </div>
-  </div>
+  <FlexGrid tagName="section">
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12">
+        <h4 id="layoutsandnavigation" :class="$style.types">Layout &amp; Navigation</h4>
+      </FlexCol>
+    </FlexRow>
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Tabs</h6>
+          </header>
+          <a href="#color" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="80"
+              viewBox="0 0 88 80"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
+              <path
+                d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H29.5V15.5H0.5V3Z"
+                fill="#CCCCCC"
+                stroke="#D8D8D8"
+              />
+              <path
+                d="M29.5 1C29.5 0.723858 29.7239 0.5 30 0.5H58.5V15.5H29.5V1Z"
+                stroke="#D8D8D8"
+              />
+              <path
+                d="M58.5 0.5H85C86.3807 0.5 87.5 1.61929 87.5 3V15.5H58.5V0.5Z"
+                stroke="#D8D8D8"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Card</h6>
+          </header>
+          <a href="#color" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="80"
+              viewBox="0 0 88 80"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
+              <path
+                d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H85C86.3807 0.5 87.5 1.61929 87.5 3V15.5H0.5V3Z"
+                stroke="#D8D8D8"
+              />
+              <line x1="16" y1="39.5" x2="72" y2="39.5" stroke="#D8D8D8" />
+              <line x1="16" y1="51.5" x2="72" y2="51.5" stroke="#D8D8D8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Header</h6>
+          </header>
+          <a href="#color" :class="$style.cardbody">
+            <svg
+              width="88"
+              height="80"
+              viewBox="0 0 88 80"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="87" height="79" rx="2.5" stroke="#D8D8D8" />
+              <path
+                d="M0 3C0 1.34315 1.34315 0 3 0H85C86.6569 0 88 1.34315 88 3V16H0V3Z"
+                fill="#D8D8D8"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Stepper</h6>
+          </header>
+          <a href="#color" :class="$style.cardbody">
+            <svg
+              width="10"
+              height="54"
+              viewBox="0 0 10 54"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="5" cy="5" r="4.5" stroke="#D8D8D8" />
+              <circle cx="5" cy="49" r="4.5" stroke="#D8D8D8" />
+              <line x1="5" y1="9" x2="5" y2="44" stroke="#D8D8D8" stroke-width="2" />
+              <circle cx="5" cy="27" r="4.5" fill="#D8D8D8" stroke="#CCCCCC" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+    </FlexRow>
+  </FlexGrid>
 </template>
 
 <script>
 import Card from "agnosticui/Card.vue";
+import FlexGrid from "agnosticui/FlexGrid/FlexGrid";
+import FlexRow from "agnosticui/FlexGrid/FlexRow";
+import FlexCol from "agnosticui/FlexGrid/FlexCol";
 
 export default {
   name: "LayoutCards",
   components: {
     Card,
+    FlexCol,
+    FlexGrid,
+    FlexRow,
   },
 };
 </script>
diff --git a/showcase/src/views/SystemCards.vue b/showcase/src/views/SystemCards.vue
index bbe82eeec..6e35967fb 100644
--- a/showcase/src/views/SystemCards.vue
+++ b/showcase/src/views/SystemCards.vue
@@ -1,151 +1,149 @@
 <template>
-  <div>
-    <FlexGrid tagName="section">
-      <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12">
-          <h4 id="system" :class="$style.types">System</h4>
-        </FlexCol>
-      </FlexRow>
-      <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
-          <Card v-bind:isStacked="true">
-            <header :class="$style.cardheader">
-              <h6>Color</h6>
-            </header>
-            <a href="#color" :class="$style.cardbody">
-              <svg
-                width="56"
-                height="56"
-                viewBox="0 0 56 56"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M0 0H12V12H0V0Z" fill="#CCCCCC" />
-                <path opacity="0.6" d="M22 0H34V12H22V0Z" fill="#CCCCCC" />
-                <path opacity="0.3" d="M44 0H56V12H44V0Z" fill="#CCCCCC" />
-                <path d="M0 22H12V34H0V22Z" fill="#D8D8D8" />
-                <path opacity="0.6" d="M22 22H34V34H22V22Z" fill="#D8D8D8" />
-                <path opacity="0.3" d="M44 22H56V34H44V22Z" fill="#D8D8D8" />
-                <path d="M0 44H12V56H0V44Z" fill="#E9E9E9" />
-                <path opacity="0.6" d="M22 44H34V56H22V44Z" fill="#E9E9E9" />
-                <path opacity="0.3" d="M44 44H56V56H44V44Z" fill="#E9E9E9" />
-              </svg>
-            </a>
-          </Card>
-        </FlexCol>
-        <FlexCol v-bind:xs="12" auto>
-          <Card v-bind:isStacked="true">
-            <header :class="$style.cardheader">
-              <h6>Typography</h6>
-            </header>
-            <a href="#typography" :class="$style.cardbody">
-              <svg
-                width="97"
-                height="89"
-                viewBox="0 0 97 89"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect x="4.5" y="5.5" width="87" height="79" stroke="#D8D8D8" />
-                <path
-                  d="M39.9688 64V62.6562C40.9271 62.4688 41.7292 62.2708 42.375 62.0625C43.0417 61.8542 43.5729 61.6562 43.9688 61.4688C44.3646 61.2604 44.6458 61.0729 44.8125 60.9062C45 60.7188 45.0938 60.5521 45.0938 60.4062V27.4375H35.75C35.4375 27.4375 35.1458 27.5 34.875 27.625C34.625 27.7292 34.3646 27.9688 34.0938 28.3438C33.8438 28.7188 33.5521 29.2708 33.2188 30C32.8854 30.7292 32.4896 31.6979 32.0312 32.9062L30.6875 32.3125C30.7917 31.0833 30.9271 29.7708 31.0938 28.375C31.2812 26.9792 31.4896 25.7292 31.7188 24.625H63.2812L64.2188 25.4062C64.1771 26.4688 64.0729 27.6354 63.9062 28.9062C63.7396 30.1562 63.5312 31.4375 63.2812 32.75H61.875C61.6667 31.7917 61.4792 30.9792 61.3125 30.3125C61.1667 29.625 60.9896 29.0729 60.7812 28.6562C60.5729 28.2188 60.3229 27.9062 60.0312 27.7188C59.7604 27.5312 59.4062 27.4375 58.9688 27.4375H50.0938V60.4062C50.0938 60.6771 50.4688 61.0208 51.2188 61.4375C51.9688 61.8542 53.3021 62.2604 55.2188 62.6562V64H39.9688Z"
-                  fill="#D8D8D8"
-                />
-                <rect
-                  x="-0.5"
-                  y="0.5"
-                  width="9"
-                  height="9"
-                  transform="matrix(-1 0 0 1 9 79)"
-                  fill="white"
-                  stroke="#D8D8D8"
-                />
-                <rect
-                  x="-0.5"
-                  y="0.5"
-                  width="9"
-                  height="9"
-                  transform="matrix(-1 0 0 1 96 79)"
-                  fill="white"
-                  stroke="#D8D8D8"
-                />
-                <rect
-                  x="-0.5"
-                  y="0.5"
-                  width="9"
-                  height="9"
-                  transform="matrix(-1 0 0 1 96 0)"
-                  fill="white"
-                  stroke="#D8D8D8"
-                />
-                <rect
-                  x="-0.5"
-                  y="0.5"
-                  width="9"
-                  height="9"
-                  transform="matrix(-1 0 0 1 9 0)"
-                  fill="white"
-                  stroke="#D8D8D8"
-                />
-              </svg>
-            </a>
-          </Card>
-        </FlexCol>
-        <FlexCol v-bind:xs="12" auto>
-          <Card v-bind:isStacked="true">
-            <header :class="$style.cardheader">
-              <h6>Spacing</h6>
-            </header>
-            <a href="#spacing" :class="$style.cardbody">
-              <svg
-                width="89"
-                height="80"
-                viewBox="0 0 89 80"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect x="0.5" y="0.5" width="24" height="79" stroke="#E9E9E9" />
-                <rect x="73.5" y="0.5" width="15" height="79" stroke="#E9E9E9" />
-                <path
-                  d="M41.2764 57H42.2109V55.3887H43.3066V54.54H42.2109V49.2495H40.7822C40.5566 49.6004 40.3293 49.9513 40.1001 50.3022C39.8745 50.6532 39.6489 51.0041 39.4233 51.355C39.1978 51.7059 38.9704 52.0568 38.7412 52.4077C38.5156 52.7586 38.2882 53.1095 38.0591 53.4604C37.8335 53.8114 37.6079 54.1623 37.3823 54.5132V55.3887H41.2764V57ZM38.3384 54.54V54.5186C38.5317 54.2214 38.7251 53.9259 38.9185 53.6323C39.1118 53.3351 39.3052 53.0379 39.4985 52.7407C39.6955 52.4435 39.8906 52.1481 40.084 51.8545C40.2773 51.5573 40.4707 51.2619 40.6641 50.9683C40.8574 50.6711 41.0508 50.3739 41.2441 50.0767H41.2764V54.54H38.3384ZM46.9106 57.1289C47.4585 57.1289 47.9437 57.034 48.3662 56.8442C48.7923 56.6545 49.1253 56.3931 49.3652 56.0601C49.6051 55.7235 49.7251 55.3385 49.7251 54.9053V54.8945C49.7251 54.5758 49.6553 54.2804 49.5156 54.0083C49.376 53.7362 49.1808 53.5052 48.9302 53.3154C48.6831 53.1221 48.3931 52.9878 48.0601 52.9126V52.8911C48.4862 52.7586 48.8228 52.5402 49.0698 52.2358C49.3205 51.9315 49.4458 51.5752 49.4458 51.167V51.1562C49.4458 50.766 49.3366 50.4186 49.1182 50.1143C48.8997 49.8063 48.599 49.5646 48.2158 49.3892C47.8363 49.2101 47.4012 49.1206 46.9106 49.1206C46.4237 49.1206 45.9886 49.2101 45.6055 49.3892C45.2223 49.5646 44.9215 49.8063 44.7031 50.1143C44.4847 50.4186 44.3755 50.766 44.3755 51.1562V51.167C44.3755 51.5752 44.5008 51.9315 44.7515 52.2358C45.0021 52.5402 45.3387 52.7586 45.7612 52.8911V52.9126C45.4318 52.9878 45.1418 53.1221 44.8911 53.3154C44.6405 53.5052 44.4453 53.7362 44.3057 54.0083C44.166 54.2804 44.0962 54.5758 44.0962 54.8945V54.9053C44.0962 55.3385 44.2161 55.7235 44.4561 56.0601C44.6995 56.3931 45.0326 56.6545 45.4551 56.8442C45.8776 57.034 46.3628 57.1289 46.9106 57.1289ZM46.9106 56.2856C46.5562 56.2856 46.241 56.2248 45.9653 56.103C45.6896 55.9777 45.473 55.8076 45.3154 55.5928C45.1579 55.3743 45.0791 55.1255 45.0791 54.8462V54.8354C45.0791 54.5526 45.1561 54.3019 45.3101 54.0835C45.4676 53.8651 45.6842 53.6932 45.96 53.5679C46.2357 53.4425 46.5526 53.3799 46.9106 53.3799C47.2687 53.3799 47.5856 53.4425 47.8613 53.5679C48.137 53.6932 48.3519 53.8651 48.5059 54.0835C48.6634 54.3019 48.7422 54.5526 48.7422 54.8354V54.8462C48.7422 55.1255 48.6634 55.3743 48.5059 55.5928C48.3483 55.8076 48.1317 55.9777 47.856 56.103C47.5838 56.2248 47.2687 56.2856 46.9106 56.2856ZM46.9106 52.5312C46.5991 52.5312 46.3252 52.4775 46.0889 52.3701C45.8525 52.2591 45.6681 52.1069 45.5356 51.9136C45.4032 51.7202 45.3369 51.4982 45.3369 51.2476V51.2368C45.3369 50.9862 45.4032 50.7642 45.5356 50.5708C45.6681 50.3774 45.8525 50.2271 46.0889 50.1196C46.3252 50.0086 46.5991 49.9531 46.9106 49.9531C47.2222 49.9531 47.4961 50.0086 47.7324 50.1196C47.9688 50.2271 48.1532 50.3774 48.2856 50.5708C48.4181 50.7642 48.4844 50.9862 48.4844 51.2368V51.2476C48.4844 51.4982 48.4181 51.7202 48.2856 51.9136C48.1532 52.1069 47.9688 52.2591 47.7324 52.3701C47.4961 52.4775 47.2222 52.5312 46.9106 52.5312ZM50.8154 58.8799H51.75V56.0654H51.7715C51.8896 56.2803 52.0365 56.4665 52.2119 56.624C52.391 56.778 52.5951 56.8979 52.8242 56.9839C53.0534 57.0662 53.2987 57.1074 53.5601 57.1074C54.0291 57.1074 54.4391 56.9893 54.79 56.7529C55.1445 56.513 55.4202 56.1764 55.6172 55.7432C55.8177 55.3099 55.918 54.7996 55.918 54.2124V54.207C55.918 53.6198 55.8195 53.1095 55.6226 52.6763C55.4256 52.2394 55.1481 51.9028 54.79 51.6665C54.4355 51.4266 54.0202 51.3066 53.5439 51.3066C53.279 51.3066 53.0337 51.3496 52.8081 51.4355C52.5825 51.5215 52.382 51.6432 52.2065 51.8008C52.0347 51.9548 51.8896 52.141 51.7715 52.3594H51.75V51.4141H50.8154V58.8799ZM53.3613 56.2803C53.0462 56.2803 52.7669 56.1943 52.5234 56.0225C52.2835 55.8506 52.0938 55.6107 51.9541 55.3027C51.8145 54.9912 51.7446 54.6278 51.7446 54.2124V54.207C51.7446 53.7881 51.8127 53.4246 51.9487 53.1167C52.0884 52.8052 52.2799 52.5635 52.5234 52.3916C52.7669 52.2197 53.0462 52.1338 53.3613 52.1338C53.6908 52.1338 53.9754 52.2179 54.2153 52.3862C54.4552 52.5509 54.6396 52.7891 54.7686 53.1006C54.8975 53.4085 54.9619 53.7773 54.9619 54.207V54.2124C54.9619 54.6349 54.8975 55.002 54.7686 55.3135C54.6396 55.6214 54.4552 55.8595 54.2153 56.0278C53.9754 56.1961 53.6908 56.2803 53.3613 56.2803ZM56.0522 57H57.0889L58.437 54.873H58.4585L59.7959 57H60.8325L58.9741 54.1694L60.8594 51.4141H59.8174L58.4907 53.5088H58.4692L57.1265 51.4141H56.0845L57.9536 54.207L56.0522 57Z"
-                  fill="#D8D8D8"
-                />
-                <mask maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0" fill="black">
-                  <rect fill="white" width="0" height="0" />
-                </mask>
-                <path
-                  d="M72.8536 39.8536C73.0488 39.6583 73.0488 39.3417 72.8536 39.1464L69.6716 35.9645C69.4763 35.7692 69.1597 35.7692 68.9645 35.9645C68.7692 36.1597 68.7692 36.4763 68.9645 36.6716L71.7929 39.5L68.9645 42.3284C68.7692 42.5237 68.7692 42.8403 68.9645 43.0355C69.1597 43.2308 69.4763 43.2308 69.6716 43.0355L72.8536 39.8536ZM25.1464 39.1464C24.9512 39.3417 24.9512 39.6583 25.1464 39.8536L28.3284 43.0355C28.5237 43.2308 28.8403 43.2308 29.0355 43.0355C29.2308 42.8403 29.2308 42.5237 29.0355 42.3284L26.2071 39.5L29.0355 36.6716C29.2308 36.4763 29.2308 36.1597 29.0355 35.9645C28.8403 35.7692 28.5237 35.7692 28.3284 35.9645L25.1464 39.1464ZM72.5 39L25.5 39V40L72.5 40V39Z"
-                  fill="#E9E9E9"
-                  mask="url(#)"
-                />
-              </svg>
-            </a>
-          </Card>
-        </FlexCol>
-        <FlexCol v-bind:xs="12" auto>
-          <Card v-bind:isStacked="true">
-            <header :class="$style.cardheader">
-              <h6>Grid</h6>
-            </header>
-            <a href="#grid" :class="$style.cardbody">
-              <svg
-                width="80"
-                height="80"
-                viewBox="0 0 80 80"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect x="48" width="8" height="80" fill="#E9E9E9" />
-                <rect width="8" height="80" fill="#E9E9E9" />
-                <rect x="71.9629" width="8" height="80" fill="#E9E9E9" />
-                <rect x="23.9629" width="8" height="80" fill="#E9E9E9" />
-              </svg>
-            </a>
-          </Card>
-        </FlexCol>
-      </FlexRow>
-    </FlexGrid>
-  </div>
+  <FlexGrid tagName="section">
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12">
+        <h4 id="system" :class="$style.types">System</h4>
+      </FlexCol>
+    </FlexRow>
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Color</h6>
+          </header>
+          <a href="#color" :class="$style.cardbody">
+            <svg
+              width="56"
+              height="56"
+              viewBox="0 0 56 56"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M0 0H12V12H0V0Z" fill="#CCCCCC" />
+              <path opacity="0.6" d="M22 0H34V12H22V0Z" fill="#CCCCCC" />
+              <path opacity="0.3" d="M44 0H56V12H44V0Z" fill="#CCCCCC" />
+              <path d="M0 22H12V34H0V22Z" fill="#D8D8D8" />
+              <path opacity="0.6" d="M22 22H34V34H22V22Z" fill="#D8D8D8" />
+              <path opacity="0.3" d="M44 22H56V34H44V22Z" fill="#D8D8D8" />
+              <path d="M0 44H12V56H0V44Z" fill="#E9E9E9" />
+              <path opacity="0.6" d="M22 44H34V56H22V44Z" fill="#E9E9E9" />
+              <path opacity="0.3" d="M44 44H56V56H44V44Z" fill="#E9E9E9" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Typography</h6>
+          </header>
+          <a href="#typography" :class="$style.cardbody">
+            <svg
+              width="97"
+              height="89"
+              viewBox="0 0 97 89"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="4.5" y="5.5" width="87" height="79" stroke="#D8D8D8" />
+              <path
+                d="M39.9688 64V62.6562C40.9271 62.4688 41.7292 62.2708 42.375 62.0625C43.0417 61.8542 43.5729 61.6562 43.9688 61.4688C44.3646 61.2604 44.6458 61.0729 44.8125 60.9062C45 60.7188 45.0938 60.5521 45.0938 60.4062V27.4375H35.75C35.4375 27.4375 35.1458 27.5 34.875 27.625C34.625 27.7292 34.3646 27.9688 34.0938 28.3438C33.8438 28.7188 33.5521 29.2708 33.2188 30C32.8854 30.7292 32.4896 31.6979 32.0312 32.9062L30.6875 32.3125C30.7917 31.0833 30.9271 29.7708 31.0938 28.375C31.2812 26.9792 31.4896 25.7292 31.7188 24.625H63.2812L64.2188 25.4062C64.1771 26.4688 64.0729 27.6354 63.9062 28.9062C63.7396 30.1562 63.5312 31.4375 63.2812 32.75H61.875C61.6667 31.7917 61.4792 30.9792 61.3125 30.3125C61.1667 29.625 60.9896 29.0729 60.7812 28.6562C60.5729 28.2188 60.3229 27.9062 60.0312 27.7188C59.7604 27.5312 59.4062 27.4375 58.9688 27.4375H50.0938V60.4062C50.0938 60.6771 50.4688 61.0208 51.2188 61.4375C51.9688 61.8542 53.3021 62.2604 55.2188 62.6562V64H39.9688Z"
+                fill="#D8D8D8"
+              />
+              <rect
+                x="-0.5"
+                y="0.5"
+                width="9"
+                height="9"
+                transform="matrix(-1 0 0 1 9 79)"
+                fill="white"
+                stroke="#D8D8D8"
+              />
+              <rect
+                x="-0.5"
+                y="0.5"
+                width="9"
+                height="9"
+                transform="matrix(-1 0 0 1 96 79)"
+                fill="white"
+                stroke="#D8D8D8"
+              />
+              <rect
+                x="-0.5"
+                y="0.5"
+                width="9"
+                height="9"
+                transform="matrix(-1 0 0 1 96 0)"
+                fill="white"
+                stroke="#D8D8D8"
+              />
+              <rect
+                x="-0.5"
+                y="0.5"
+                width="9"
+                height="9"
+                transform="matrix(-1 0 0 1 9 0)"
+                fill="white"
+                stroke="#D8D8D8"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Spacing</h6>
+          </header>
+          <a href="#spacing" :class="$style.cardbody">
+            <svg
+              width="89"
+              height="80"
+              viewBox="0 0 89 80"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="24" height="79" stroke="#E9E9E9" />
+              <rect x="73.5" y="0.5" width="15" height="79" stroke="#E9E9E9" />
+              <path
+                d="M41.2764 57H42.2109V55.3887H43.3066V54.54H42.2109V49.2495H40.7822C40.5566 49.6004 40.3293 49.9513 40.1001 50.3022C39.8745 50.6532 39.6489 51.0041 39.4233 51.355C39.1978 51.7059 38.9704 52.0568 38.7412 52.4077C38.5156 52.7586 38.2882 53.1095 38.0591 53.4604C37.8335 53.8114 37.6079 54.1623 37.3823 54.5132V55.3887H41.2764V57ZM38.3384 54.54V54.5186C38.5317 54.2214 38.7251 53.9259 38.9185 53.6323C39.1118 53.3351 39.3052 53.0379 39.4985 52.7407C39.6955 52.4435 39.8906 52.1481 40.084 51.8545C40.2773 51.5573 40.4707 51.2619 40.6641 50.9683C40.8574 50.6711 41.0508 50.3739 41.2441 50.0767H41.2764V54.54H38.3384ZM46.9106 57.1289C47.4585 57.1289 47.9437 57.034 48.3662 56.8442C48.7923 56.6545 49.1253 56.3931 49.3652 56.0601C49.6051 55.7235 49.7251 55.3385 49.7251 54.9053V54.8945C49.7251 54.5758 49.6553 54.2804 49.5156 54.0083C49.376 53.7362 49.1808 53.5052 48.9302 53.3154C48.6831 53.1221 48.3931 52.9878 48.0601 52.9126V52.8911C48.4862 52.7586 48.8228 52.5402 49.0698 52.2358C49.3205 51.9315 49.4458 51.5752 49.4458 51.167V51.1562C49.4458 50.766 49.3366 50.4186 49.1182 50.1143C48.8997 49.8063 48.599 49.5646 48.2158 49.3892C47.8363 49.2101 47.4012 49.1206 46.9106 49.1206C46.4237 49.1206 45.9886 49.2101 45.6055 49.3892C45.2223 49.5646 44.9215 49.8063 44.7031 50.1143C44.4847 50.4186 44.3755 50.766 44.3755 51.1562V51.167C44.3755 51.5752 44.5008 51.9315 44.7515 52.2358C45.0021 52.5402 45.3387 52.7586 45.7612 52.8911V52.9126C45.4318 52.9878 45.1418 53.1221 44.8911 53.3154C44.6405 53.5052 44.4453 53.7362 44.3057 54.0083C44.166 54.2804 44.0962 54.5758 44.0962 54.8945V54.9053C44.0962 55.3385 44.2161 55.7235 44.4561 56.0601C44.6995 56.3931 45.0326 56.6545 45.4551 56.8442C45.8776 57.034 46.3628 57.1289 46.9106 57.1289ZM46.9106 56.2856C46.5562 56.2856 46.241 56.2248 45.9653 56.103C45.6896 55.9777 45.473 55.8076 45.3154 55.5928C45.1579 55.3743 45.0791 55.1255 45.0791 54.8462V54.8354C45.0791 54.5526 45.1561 54.3019 45.3101 54.0835C45.4676 53.8651 45.6842 53.6932 45.96 53.5679C46.2357 53.4425 46.5526 53.3799 46.9106 53.3799C47.2687 53.3799 47.5856 53.4425 47.8613 53.5679C48.137 53.6932 48.3519 53.8651 48.5059 54.0835C48.6634 54.3019 48.7422 54.5526 48.7422 54.8354V54.8462C48.7422 55.1255 48.6634 55.3743 48.5059 55.5928C48.3483 55.8076 48.1317 55.9777 47.856 56.103C47.5838 56.2248 47.2687 56.2856 46.9106 56.2856ZM46.9106 52.5312C46.5991 52.5312 46.3252 52.4775 46.0889 52.3701C45.8525 52.2591 45.6681 52.1069 45.5356 51.9136C45.4032 51.7202 45.3369 51.4982 45.3369 51.2476V51.2368C45.3369 50.9862 45.4032 50.7642 45.5356 50.5708C45.6681 50.3774 45.8525 50.2271 46.0889 50.1196C46.3252 50.0086 46.5991 49.9531 46.9106 49.9531C47.2222 49.9531 47.4961 50.0086 47.7324 50.1196C47.9688 50.2271 48.1532 50.3774 48.2856 50.5708C48.4181 50.7642 48.4844 50.9862 48.4844 51.2368V51.2476C48.4844 51.4982 48.4181 51.7202 48.2856 51.9136C48.1532 52.1069 47.9688 52.2591 47.7324 52.3701C47.4961 52.4775 47.2222 52.5312 46.9106 52.5312ZM50.8154 58.8799H51.75V56.0654H51.7715C51.8896 56.2803 52.0365 56.4665 52.2119 56.624C52.391 56.778 52.5951 56.8979 52.8242 56.9839C53.0534 57.0662 53.2987 57.1074 53.5601 57.1074C54.0291 57.1074 54.4391 56.9893 54.79 56.7529C55.1445 56.513 55.4202 56.1764 55.6172 55.7432C55.8177 55.3099 55.918 54.7996 55.918 54.2124V54.207C55.918 53.6198 55.8195 53.1095 55.6226 52.6763C55.4256 52.2394 55.1481 51.9028 54.79 51.6665C54.4355 51.4266 54.0202 51.3066 53.5439 51.3066C53.279 51.3066 53.0337 51.3496 52.8081 51.4355C52.5825 51.5215 52.382 51.6432 52.2065 51.8008C52.0347 51.9548 51.8896 52.141 51.7715 52.3594H51.75V51.4141H50.8154V58.8799ZM53.3613 56.2803C53.0462 56.2803 52.7669 56.1943 52.5234 56.0225C52.2835 55.8506 52.0938 55.6107 51.9541 55.3027C51.8145 54.9912 51.7446 54.6278 51.7446 54.2124V54.207C51.7446 53.7881 51.8127 53.4246 51.9487 53.1167C52.0884 52.8052 52.2799 52.5635 52.5234 52.3916C52.7669 52.2197 53.0462 52.1338 53.3613 52.1338C53.6908 52.1338 53.9754 52.2179 54.2153 52.3862C54.4552 52.5509 54.6396 52.7891 54.7686 53.1006C54.8975 53.4085 54.9619 53.7773 54.9619 54.207V54.2124C54.9619 54.6349 54.8975 55.002 54.7686 55.3135C54.6396 55.6214 54.4552 55.8595 54.2153 56.0278C53.9754 56.1961 53.6908 56.2803 53.3613 56.2803ZM56.0522 57H57.0889L58.437 54.873H58.4585L59.7959 57H60.8325L58.9741 54.1694L60.8594 51.4141H59.8174L58.4907 53.5088H58.4692L57.1265 51.4141H56.0845L57.9536 54.207L56.0522 57Z"
+                fill="#D8D8D8"
+              />
+              <mask maskUnits="userSpaceOnUse" x="0" y="0" width="0" height="0" fill="black">
+                <rect fill="white" width="0" height="0" />
+              </mask>
+              <path
+                d="M72.8536 39.8536C73.0488 39.6583 73.0488 39.3417 72.8536 39.1464L69.6716 35.9645C69.4763 35.7692 69.1597 35.7692 68.9645 35.9645C68.7692 36.1597 68.7692 36.4763 68.9645 36.6716L71.7929 39.5L68.9645 42.3284C68.7692 42.5237 68.7692 42.8403 68.9645 43.0355C69.1597 43.2308 69.4763 43.2308 69.6716 43.0355L72.8536 39.8536ZM25.1464 39.1464C24.9512 39.3417 24.9512 39.6583 25.1464 39.8536L28.3284 43.0355C28.5237 43.2308 28.8403 43.2308 29.0355 43.0355C29.2308 42.8403 29.2308 42.5237 29.0355 42.3284L26.2071 39.5L29.0355 36.6716C29.2308 36.4763 29.2308 36.1597 29.0355 35.9645C28.8403 35.7692 28.5237 35.7692 28.3284 35.9645L25.1464 39.1464ZM72.5 39L25.5 39V40L72.5 40V39Z"
+                fill="#E9E9E9"
+                mask="url(#)"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Grid</h6>
+          </header>
+          <a href="#grid" :class="$style.cardbody">
+            <svg
+              width="80"
+              height="80"
+              viewBox="0 0 80 80"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="48" width="8" height="80" fill="#E9E9E9" />
+              <rect width="8" height="80" fill="#E9E9E9" />
+              <rect x="71.9629" width="8" height="80" fill="#E9E9E9" />
+              <rect x="23.9629" width="8" height="80" fill="#E9E9E9" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+    </FlexRow>
+  </FlexGrid>
 </template>
 
 <script>
diff --git a/showcase/src/views/TableCards.vue b/showcase/src/views/TableCards.vue
index 7e12bb685..1c41f7e65 100644
--- a/showcase/src/views/TableCards.vue
+++ b/showcase/src/views/TableCards.vue
@@ -1,115 +1,133 @@
 <template>
-  <div>
-    <h4 id="tables" :class="$style.types">Tables</h4>
-    <div :class="$style.cards">
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Table TBD</h6>
-        </header>
-        <a href="#table" :class="$style.cardbody">
-          <svg
-            width="90"
-            height="61"
-            viewBox="0 0 90 61"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="0.5" y="0.5" width="89" height="8.80357" stroke="#E0E0E0" />
-            <rect y="23.9644" width="90" height="2.17857" fill="#E8E8E8" />
-            <rect y="41.3931" width="90" height="2.17857" fill="#E8E8E8" />
-            <rect y="58.8213" width="90" height="2.17857" fill="#E8E8E8" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Sorting tbd</h6>
-        </header>
-        <a href="#sorting" :class="$style.cardbody">
-          <svg
-            width="69"
-            height="90"
-            viewBox="0 0 69 90"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M12.5 0L23.3253 12.5H1.67468L12.5 0Z" fill="#E9E9E9" />
-            <path
-              d="M57.3251 90.0005L46.4998 77.5005L68.1504 77.5005L57.3251 90.0005Z"
-              fill="#E9E9E9"
-            />
-            <line x1="12.5" y1="11.667" x2="12.5" y2="90.0003" stroke="#E9E9E9" stroke-width="3" />
-            <line
-              x1="57.166"
-              y1="78.3335"
-              x2="57.166"
-              y2="0.000167912"
-              stroke="#E9E9E9"
-              stroke-width="3"
-            />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Filters tbd</h6>
-        </header>
-        <a href="#filters" :class="$style.cardbody">
-          <svg
-            width="87"
-            height="69"
-            viewBox="0 0 87 69"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect y="7" width="87" height="4" fill="#E9E9E9" />
-            <rect y="32" width="87" height="4" fill="#E9E9E9" />
-            <rect y="57" width="87" height="4" fill="#E9E9E9" />
-            <circle cx="25.5" cy="9.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
-            <circle cx="61.5" cy="34.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
-            <circle cx="44.5" cy="59.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
-          </svg>
-        </a>
-      </Card>
-      <Card css="card-override" v-bind:isStacked="true">
-        <header :class="$style.cardheader">
-          <h6>Pagination TBD</h6>
-        </header>
-        <a href="#pagination" :class="$style.cardbody">
-          <svg
-            width="92"
-            height="16"
-            viewBox="0 0 92 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M3 0.5H30.8636V15.5H3C1.61929 15.5 0.5 14.3807 0.5 13V3C0.5 1.61929 1.61929 0.5 3 0.5Z"
-              fill="#CCCCCC"
-              stroke="#D8D8D8"
-            />
-            <path
-              d="M31.3184 0.5H61.182V15.5H30.8184V1C30.8184 0.723858 31.0422 0.5 31.3184 0.5Z"
-              stroke="#D8D8D8"
-            />
-            <path
-              d="M61.1367 0.5H89.0004C90.3811 0.5 91.5004 1.61929 91.5004 3V13C91.5004 14.3807 90.3811 15.5 89.0004 15.5H61.1367V0.5Z"
-              stroke="#D8D8D8"
-            />
-          </svg>
-        </a>
-      </Card>
-    </div>
-  </div>
+  <FlexGrid tagName="section">
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12">
+        <h4 id="tables" :class="$style.types">Tables</h4>
+      </FlexCol>
+    </FlexRow>
+    <FlexRow v-bind:gutter="16">
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Table TBD</h6>
+          </header>
+          <a href="#table" :class="$style.cardbody">
+            <svg
+              width="90"
+              height="61"
+              viewBox="0 0 90 61"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect x="0.5" y="0.5" width="89" height="8.80357" stroke="#E0E0E0" />
+              <rect y="23.9644" width="90" height="2.17857" fill="#E8E8E8" />
+              <rect y="41.3931" width="90" height="2.17857" fill="#E8E8E8" />
+              <rect y="58.8213" width="90" height="2.17857" fill="#E8E8E8" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Sorting tbd</h6>
+          </header>
+          <a href="#sorting" :class="$style.cardbody">
+            <svg
+              width="69"
+              height="90"
+              viewBox="0 0 69 90"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M12.5 0L23.3253 12.5H1.67468L12.5 0Z" fill="#E9E9E9" />
+              <path
+                d="M57.3251 90.0005L46.4998 77.5005L68.1504 77.5005L57.3251 90.0005Z"
+                fill="#E9E9E9"
+              />
+              <line x1="12.5" y1="11.667" x2="12.5" y2="90.0003" stroke="#E9E9E9" stroke-width="3" />
+              <line
+                x1="57.166"
+                y1="78.3335"
+                x2="57.166"
+                y2="0.000167912"
+                stroke="#E9E9E9"
+                stroke-width="3"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Filters tbd</h6>
+          </header>
+          <a href="#filters" :class="$style.cardbody">
+            <svg
+              width="87"
+              height="69"
+              viewBox="0 0 87 69"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect y="7" width="87" height="4" fill="#E9E9E9" />
+              <rect y="32" width="87" height="4" fill="#E9E9E9" />
+              <rect y="57" width="87" height="4" fill="#E9E9E9" />
+              <circle cx="25.5" cy="9.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
+              <circle cx="61.5" cy="34.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
+              <circle cx="44.5" cy="59.5" r="8" fill="white" stroke="#E9E9E9" stroke-width="3" />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+      <FlexCol v-bind:xs="12" auto>
+        <Card v-bind:isStacked="true">
+          <header :class="$style.cardheader">
+            <h6>Pagination TBD</h6>
+          </header>
+          <a href="#pagination" :class="$style.cardbody">
+            <svg
+              width="92"
+              height="16"
+              viewBox="0 0 92 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3 0.5H30.8636V15.5H3C1.61929 15.5 0.5 14.3807 0.5 13V3C0.5 1.61929 1.61929 0.5 3 0.5Z"
+                fill="#CCCCCC"
+                stroke="#D8D8D8"
+              />
+              <path
+                d="M31.3184 0.5H61.182V15.5H30.8184V1C30.8184 0.723858 31.0422 0.5 31.3184 0.5Z"
+                stroke="#D8D8D8"
+              />
+              <path
+                d="M61.1367 0.5H89.0004C90.3811 0.5 91.5004 1.61929 91.5004 3V13C91.5004 14.3807 90.3811 15.5 89.0004 15.5H61.1367V0.5Z"
+                stroke="#D8D8D8"
+              />
+            </svg>
+          </a>
+        </Card>
+      </FlexCol>
+    </FlexRow>
+  </FlexGrid>
 </template>
 
 <script>
 import Card from "agnosticui/Card.vue";
+import FlexGrid from "agnosticui/FlexGrid/FlexGrid";
+import FlexRow from "agnosticui/FlexGrid/FlexRow";
+import FlexCol from "agnosticui/FlexGrid/FlexCol";
 
 export default {
   name: "InputCards",
   components: {
     Card,
+    FlexCol,
+    FlexGrid,
+    FlexRow,
   },
 };
 </script>