Add stepper cover

client/Home.jsx

@@ -6,6 +6,7 @@ import CenterCover from './covers/CenterCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
+import StepperCover from './covers/StepperCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -67,6 +68,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
+                    <div className="pa2 w-20">
+                        <Link to="/stepper" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <StepperCover />
+                            <h4 className="f4 mv0 pt3">Stepper</h4>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </Layout>

client/covers/StepperCover.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+
+const StepperCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex items-center justify-center pa2">
+                <div className="b--black-30 ba br2 flex w-100">
+                    <div className="w-20 br b--black-30 tc">-</div>
+                    <div className="flex-grow-1 bg-white"></div>
+                    <div className="w-20 bl b--black-30 tc">+</div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StepperCover;

client/placeholders/VerticalLine.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const VerticalLine = () => {
+    return (
+        <div
+            className="h-100 bg-black-30"
+            style={{ width: '1px' }}
+        />
+    );
+};
+
+export default VerticalLine;