From 4c666bb4388a64dbb8fdae9f2713a36b3c630557 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Fri, 15 Sep 2017 16:22:44 +0100
Subject: [PATCH] fix(my-joyent): fix some inconsistencies in technical
 Prototype

---
 .../__snapshots__/filters.spec.js.snap        |   4 +-
 .../src/components/filters/filters.js         |   4 +-
 .../__snapshots__/index.spec.js.snap          |   2 +-
 .../__tests__/__snapshots__/list.spec.js.snap | 293 ++++---
 .../my-joyent/src/components/packages/list.js |  17 +-
 .../__snapshots__/index.spec.js.snap          | 729 ++++++++++--------
 .../__snapshots__/index.spec.js.snap          | 725 +++++++++--------
 packages/ui-toolkit/src/button/index.js       |  16 +-
 packages/ui-toolkit/src/card/card.js          |   2 +-
 9 files changed, 1023 insertions(+), 769 deletions(-)

diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index 1683d372..479f8e40 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -809,14 +809,14 @@ exports[`renders <Filters /> without throwing 1`] = `
         onClick={[Function]}
         selected={false}
       >
-        Memory Optimized
+        General Purpose
       </button>
       <button
         className="c6"
         onClick={[Function]}
         selected={false}
       >
-        General Purpose
+        Memory Optimized
       </button>
       <button
         className="c6"
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index def3628e..8d6d90d9 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -39,7 +39,7 @@ const Filters = ({
     />
     <GroupWrapper>
       <div>
-        {filters.groups.map(group => (
+        {filters.groups.sort((a, b) => a.name < b.name ? -1 : 1 ).map(group => (
           <Button
             key={group.name}
             tertiary
@@ -52,7 +52,7 @@ const Filters = ({
         ))}
       </div>
       <Button
-        disabled={isEqual(filters,defaultState.filters)}
+        disabled={isEqual(filters, defaultState.filters)}
         secondary
         small
         onClick={filterReset}
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index 15dfe480..a843bc4f 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -68,7 +68,7 @@ exports[`renders <Package /> without throwing 1`] = `
   border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 237px;
+  min-width: 292px;
 }
 
 .c2 {
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index ae6336a1..43dde085 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Packages /> without throwing 1`] = `
-.c4 {
+.c1 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,7 +10,16 @@ exports[`renders <Packages /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c6 {
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
   font-size: 0.9375rem;
   line-height: 1.5;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -36,7 +45,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -68,10 +77,10 @@ exports[`renders <Packages /> without throwing 1`] = `
   border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 237px;
+  min-width: 292px;
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -100,7 +109,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -126,7 +135,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c8 {
+.c9 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -142,14 +151,14 @@ exports[`renders <Packages /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c7 {
+.c8 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c9 {
+.c10 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -160,7 +169,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -173,7 +182,7 @@ exports[`renders <Packages /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c1 {
+.c2 {
   margin-right: 1.125rem;
   margin-bottom: 1.125rem;
 }
@@ -183,17 +192,59 @@ exports[`renders <Packages /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
+  min-width: 100%;
   list-style: none;
   padding: 0;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-top: 2.25rem;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c4 {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c5 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -205,24 +256,26 @@ exports[`renders <Packages /> without throwing 1`] = `
 <ul
   className="c0"
 >
-  <li>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -230,54 +283,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.256
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.25
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -286,25 +339,27 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -312,54 +367,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.768
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.5
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.25
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -368,25 +423,27 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -394,54 +451,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.5
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -450,25 +507,27 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -476,54 +535,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 3.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -532,25 +591,27 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -558,54 +619,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 7.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -614,25 +675,27 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -640,54 +703,54 @@ exports[`renders <Packages /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 15.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -696,6 +759,6 @@ exports[`renders <Packages /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
+  </div>
 </ul>
 `;
diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js
index d662b21a..31a5ce68 100644
--- a/packages/my-joyent/src/components/packages/list.js
+++ b/packages/my-joyent/src/components/packages/list.js
@@ -1,24 +1,31 @@
 import React from 'react';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
+import { Col } from 'react-styled-flexboxgrid';
 
 import Package from '@components/package';
 
 const ListStyled = styled.ul`
   display: flex;
-  width: 100%;
+  min-width: 100%;
   list-style: none;
   padding: 0;
   flex-wrap: wrap;
   margin-top: ${remcalc(36)};
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 `;
 const Packages = ({ packages }) => (
   <ListStyled>
-    {packages.length > 0 ? packages.map(pack => (
-      <li key={pack.name}>
+    {packages.length > 0 ? (
+      packages.map(pack => (
+        <Col xs={12} sm={6} md={4} lg={3} key={pack.name}>
           <Package pack={pack} />
-      </li>
-    )) : 'There are no packages that meet your criteria'}
+        </Col>
+      ))
+    ) : (
+      'There are no packages that meet your criteria'
+    )}
   </ListStyled>
 );
 
diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
index 56689ef4..b5857e2e 100644
--- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
@@ -20,7 +20,16 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c27 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c31 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -491,7 +500,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-top: 0.75rem;
 }
 
-.c32 {
+.c33 {
   font-size: 0.9375rem;
   line-height: 1.5;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -517,7 +526,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -549,10 +558,10 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 237px;
+  min-width: 292px;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -581,7 +590,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -607,7 +616,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c34 {
+.c35 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -623,14 +632,14 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c33 {
+.c34 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c35 {
+.c36 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -641,7 +650,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c36 {
+.c37 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -714,7 +723,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   width: 100%;
 }
 
-.c27 {
+.c28 {
   margin-right: 1.125rem;
   margin-bottom: 1.125rem;
 }
@@ -724,17 +733,59 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
+  min-width: 100%;
   list-style: none;
   padding: 0;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-top: 2.25rem;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c27 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c27 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c27 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c27 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c31 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -1385,14 +1436,14 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               onClick={[Function]}
               selected={false}
             >
-              Memory Optimized
+              General Purpose
             </button>
             <button
               className="c24"
               onClick={[Function]}
               selected={false}
             >
-              General Purpose
+              Memory Optimized
             </button>
             <button
               className="c24"
@@ -1418,24 +1469,26 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
       <ul
         className="c26"
       >
-        <li>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1443,54 +1496,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.256
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.25
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1499,25 +1552,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1525,54 +1580,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.768
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.5
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.25
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1581,25 +1636,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1607,54 +1664,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.5
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1663,25 +1720,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1689,54 +1748,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1745,25 +1804,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1771,54 +1832,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1827,25 +1888,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1853,54 +1916,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Compute Optimized
                     </span>
@@ -1909,25 +1972,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -1935,54 +2000,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       0.5
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       General Purpose
                     </span>
@@ -1991,25 +2056,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2017,54 +2084,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       General Purpose
                     </span>
@@ -2073,25 +2140,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2099,54 +2168,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       General Purpose
                     </span>
@@ -2155,25 +2224,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2181,54 +2252,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       General Purpose
                     </span>
@@ -2237,25 +2308,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2263,54 +2336,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Memory Optimized
                     </span>
@@ -2319,25 +2392,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2345,54 +2420,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Memory Optimized
                     </span>
@@ -2401,25 +2476,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2427,54 +2504,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Memory Optimized
                     </span>
@@ -2483,25 +2560,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2509,54 +2588,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Storage Optimized
                     </span>
@@ -2565,25 +2644,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2591,54 +2672,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       16
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Storage Optimized
                     </span>
@@ -2647,25 +2728,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2673,54 +2756,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       12
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Storage Optimized
                     </span>
@@ -2729,25 +2812,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2755,54 +2840,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       24
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Storage Optimized
                     </span>
@@ -2811,25 +2896,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
-        <li>
+        </div>
+        <div
+          className="c27"
+        >
           <div
-            className="c27 c28"
+            className="c28 c29"
             name="card"
           >
             <div
-              className="c29"
+              className="c30"
               name="card-view"
             >
               <div
-                className="c30"
+                className="c31"
                 name="card-meta"
               >
                 <div
-                  className="c31"
+                  className="c32"
                 >
                   <div
-                    className="c32"
+                    className="c33"
                     name="card-title"
                   >
                     $
@@ -2837,54 +2924,54 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       49
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c33 c32"
+                    className="c34 c33"
                     name="card-subtitle"
                   >
                     <span
-                      className="c34"
+                      className="c35"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c35 c32"
+                    className="c36 c33"
                     name="card-footer"
                   >
                     <span
-                      className="c36"
+                      className="c37"
                     >
                       Storage Optimized
                     </span>
@@ -2893,7 +2980,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
-        </li>
+        </div>
       </ul>
     </div>
   </main>
diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
index b956e928..cabbef24 100644
--- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <PackagesHOC /> without throwing 1`] = `
-.c4 {
+.c1 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10,7 +10,16 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c6 {
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
   font-size: 0.9375rem;
   line-height: 1.5;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -36,7 +45,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   padding: 0.75rem 1.125rem 0 1.125rem;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -68,10 +77,10 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   border: 1px solid;
   box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
   min-height: 11.5625rem;
-  min-width: 237px;
+  min-width: 292px;
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -100,7 +109,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -126,7 +135,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c8 {
+.c9 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -142,14 +151,14 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c7 {
+.c8 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c9 {
+.c10 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -160,7 +169,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -173,7 +182,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c1 {
+.c2 {
   margin-right: 1.125rem;
   margin-bottom: 1.125rem;
 }
@@ -183,17 +192,59 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
+  min-width: 100%;
   list-style: none;
   padding: 0;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-top: 2.25rem;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c4 {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-basis: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    -webkit-flex-basis: 33.333333333333336%;
+    -ms-flex-basis: 33.333333333333336%;
+    flex-basis: 33.333333333333336%;
+    max-width: 33.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-basis: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c5 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -205,24 +256,26 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
 <ul
   className="c0"
 >
-  <li>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -230,54 +283,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.256
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.25
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -286,25 +339,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -312,54 +367,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.768
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.5
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.25
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -368,25 +423,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -394,54 +451,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.5
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -450,25 +507,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -476,54 +535,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 3.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -532,25 +591,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -558,54 +619,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 7.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -614,25 +675,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -640,54 +703,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 15.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Compute Optimized
               </span>
@@ -696,25 +759,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -722,54 +787,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 3.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 0.5
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 General Purpose
               </span>
@@ -778,25 +843,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -804,54 +871,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 7.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 General Purpose
               </span>
@@ -860,25 +927,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -886,54 +955,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 15.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 General Purpose
               </span>
@@ -942,25 +1011,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -968,54 +1039,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 31.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 General Purpose
               </span>
@@ -1024,25 +1095,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1050,54 +1123,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 15.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 1
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Memory Optimized
               </span>
@@ -1106,25 +1179,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1132,54 +1207,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 31.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Memory Optimized
               </span>
@@ -1188,25 +1263,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1214,54 +1291,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 63.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Memory Optimized
               </span>
@@ -1270,25 +1347,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1296,54 +1375,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 31.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Storage Optimized
               </span>
@@ -1352,25 +1431,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1378,54 +1459,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 63.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 16
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Storage Optimized
               </span>
@@ -1434,25 +1515,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1460,54 +1543,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 15.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 2
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 12
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Storage Optimized
               </span>
@@ -1516,25 +1599,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1542,54 +1627,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 31.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 4
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 24
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Storage Optimized
               </span>
@@ -1598,25 +1683,27 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
-  <li>
+  </div>
+  <div
+    className="c1"
+  >
     <div
-      className="c1 c2"
+      className="c2 c3"
       name="card"
     >
       <div
-        className="c3"
+        className="c4"
         name="card-view"
       >
         <div
-          className="c4"
+          className="c5"
           name="card-meta"
         >
           <div
-            className="c5"
+            className="c6"
           >
             <div
-              className="c6"
+              className="c7"
               name="card-title"
             >
               $
@@ -1624,54 +1711,54 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
                per hour
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 63.8
                  GB RAM
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 8
                  vCPUs
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 49
                  TB disk
               </span>
             </div>
             <div
-              className="c7 c6"
+              className="c8 c7"
               name="card-subtitle"
             >
               <span
-                className="c8"
+                className="c9"
               >
                 SSD
               </span>
             </div>
             <div
-              className="c9 c6"
+              className="c10 c7"
               name="card-footer"
             >
               <span
-                className="c10"
+                className="c11"
               >
                 Storage Optimized
               </span>
@@ -1680,6 +1767,6 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
         </div>
       </div>
     </div>
-  </li>
+  </div>
 </ul>
 `;
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 82795957..7cb031c8 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -101,15 +101,25 @@ const style = css`
     &:active,
     &:active:hover,
     &:active:focus {
-      background-color: ${props => props.theme.tertiaryActive};
-      color: ${props => props.theme.tertiaryActiveColor};
-      border-color: ${props => props.theme.tertiaryActiveColor};
+      color: ${props => props.theme.tertiary};
+      background-color: ${props => props.theme.background};
+      border-color: ${props => props.theme.grey};
     }
 
   `} ${is('tertiary', 'selected')`
       background-color: ${props => props.theme.tertiaryActive};
       color: ${props => props.theme.tertiaryActiveColor};
       border-color: ${props => props.theme.tertiaryActiveColor};
+
+    &:focus,
+    &:hover,
+    &:active,
+    &:active:hover,
+    &:active:focus {
+      background-color: ${props => props.theme.tertiaryActive};
+      color: ${props => props.theme.tertiaryActiveColor};
+      border-color: ${props => props.theme.tertiaryActiveColor};
+    }
   `};
   ${is('disabled')`
     color: ${props => props.theme.grey};
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index 20677bd5..f822bfbc 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -41,7 +41,7 @@ const StyledCard = Row.extend`
     background: ${props => props.theme.background};
     box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
     min-height: ${remcalc(185)};
-    min-width: 237px;
+    min-width: 292px;
   `};
 
   ${is('stacked')`