From 4231a16169ac0174b92cfa63768e9afd6913e0d5 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Tue, 10 Nov 2020 20:14:42 +0100
Subject: [PATCH 1/5] WIP

---
 src/components/Navigation/Navigation.tsx      |   41 +
 .../Navigation/Vertical/Divider.tsx           |   17 +
 src/components/Navigation/Vertical/List.tsx   |   31 +
 .../Navigation/Vertical/ListItem.tsx          |   44 +
 src/components/Navigation/Vertical/Top.tsx    |   31 +
 .../Navigation/VerticalNavigation.tsx         |   57 +
 src/components/Navigation/index.ts            |    1 +
 src/components/Page/Main.tsx                  |   31 +
 src/components/Page/Page.tsx                  |    8 +-
 src/components/Page/PageContext.ts            |    7 +
 src/components/Page/Side.tsx                  |   54 +
 src/components/Panel/Panel.tsx                |   21 +-
 src/images/coderan/logo.svg                   |   87 +
 src/style/base/_variables.scss                |   21 +
 src/style/components/_logos.scss              |   10 +
 src/style/components/_navigation.scss         |   63 +
 src/style/components/_page.scss               |   36 +-
 src/style/components/_panel.scss              |    6 +-
 src/style/index.scss                          |    2 +
 www/src/index.tsx                             | 3232 +++++++++--------
 20 files changed, 2182 insertions(+), 1618 deletions(-)
 create mode 100644 src/components/Navigation/Navigation.tsx
 create mode 100644 src/components/Navigation/Vertical/Divider.tsx
 create mode 100644 src/components/Navigation/Vertical/List.tsx
 create mode 100644 src/components/Navigation/Vertical/ListItem.tsx
 create mode 100644 src/components/Navigation/Vertical/Top.tsx
 create mode 100644 src/components/Navigation/VerticalNavigation.tsx
 create mode 100644 src/components/Navigation/index.ts
 create mode 100644 src/components/Page/Main.tsx
 create mode 100644 src/components/Page/PageContext.ts
 create mode 100644 src/components/Page/Side.tsx
 create mode 100644 src/images/coderan/logo.svg
 create mode 100644 src/style/components/_logos.scss
 create mode 100644 src/style/components/_navigation.scss

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
new file mode 100644
index 0000000..2809261
--- /dev/null
+++ b/src/components/Navigation/Navigation.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Panel } from '@/components';
+import clsx from 'clsx';
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    sticky?: boolean;
+}
+
+const Navigation = React.forwardRef<HTMLElement, NavigationProps>((
+    {
+        children,
+        className,
+        sticky
+    },
+    ref
+): React.ReactElement => (
+    <Panel
+        className="navigation"
+    >
+        <nav
+            ref={ref}
+            className={clsx(
+                'navigation-list',
+                sticky && 'navigation-sticky',
+                className
+            )}
+        >
+            {children}
+        </nav>
+    </Panel>
+));
+
+Navigation.displayName = 'PageNavigation';
+Navigation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    sticky: PropTypes.bool
+}
+
+export default Navigation;
diff --git a/src/components/Navigation/Vertical/Divider.tsx b/src/components/Navigation/Vertical/Divider.tsx
new file mode 100644
index 0000000..e24d4ad
--- /dev/null
+++ b/src/components/Navigation/Vertical/Divider.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;
diff --git a/src/components/Navigation/Vertical/List.tsx b/src/components/Navigation/Vertical/List.tsx
new file mode 100644
index 0000000..01ed89c
--- /dev/null
+++ b/src/components/Navigation/Vertical/List.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;
diff --git a/src/components/Navigation/Vertical/ListItem.tsx b/src/components/Navigation/Vertical/ListItem.tsx
new file mode 100644
index 0000000..d40b592
--- /dev/null
+++ b/src/components/Navigation/Vertical/ListItem.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list-item',
+            active && 'active',
+            className
+        )}
+    >
+        {icon && (
+            <div className="vertical-navigation-list-item-icon">
+                {icon}
+            </div>
+        )}
+        {children}
+    </div>
+));
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;
diff --git a/src/components/Navigation/Vertical/Top.tsx b/src/components/Navigation/Vertical/Top.tsx
new file mode 100644
index 0000000..df547c1
--- /dev/null
+++ b/src/components/Navigation/Vertical/Top.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationTopProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationTop = React.forwardRef<HTMLDivElement, NavigationTopProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-top',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+NavigationTop.displayName = 'NavigationTop';
+NavigationTop.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default NavigationTop;
diff --git a/src/components/Navigation/VerticalNavigation.tsx b/src/components/Navigation/VerticalNavigation.tsx
new file mode 100644
index 0000000..83afac7
--- /dev/null
+++ b/src/components/Navigation/VerticalNavigation.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import { Variant } from '@/components';
+import NavigationTop from '@/components/Navigation/Vertical/Top';
+import NavigationList from '@/components/Navigation/Vertical/List';
+import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
+import NavigationDivider from '@/components/Navigation/Vertical/Divider';
+
+export interface VerticalNavigationStatics {
+    Top: typeof NavigationTop;
+    List: typeof NavigationList;
+    Item: typeof NavigationListItem;
+    Divider: typeof NavigationDivider;
+}
+
+export interface SideNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: Variant | string;
+}
+
+// @ts-ignore
+const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNavigationProps, VerticalNavigationStatics> =
+    React.forwardRef((
+        {
+            children,
+            className,
+            variant
+        },
+        ref
+    ): React.ReactElement => (
+        <div
+            ref={ref}
+            className={clsx(
+                'vertical-navigation-container',
+                variant && `navigation-${variant}`,
+                className
+            )}
+        >
+            {children}
+        </div>
+    ));
+
+VerticalNavigation.displayName = 'VerticalNavigation';
+VerticalNavigation.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    variant: PropTypes.string
+}
+
+VerticalNavigation.Top = NavigationTop;
+VerticalNavigation.List = NavigationList;
+VerticalNavigation.Item = NavigationListItem;
+VerticalNavigation.Divider = NavigationDivider;
+
+
+export default VerticalNavigation;
diff --git a/src/components/Navigation/index.ts b/src/components/Navigation/index.ts
new file mode 100644
index 0000000..76443bd
--- /dev/null
+++ b/src/components/Navigation/index.ts
@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation';
diff --git a/src/components/Page/Main.tsx b/src/components/Page/Main.tsx
new file mode 100644
index 0000000..ddb57d4
--- /dev/null
+++ b/src/components/Page/Main.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type PageMainProps = React.HTMLAttributes<HTMLDivElement>;
+
+const PageMain = React.forwardRef<HTMLDivElement, PageMainProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'page-main',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+PageMain.displayName = 'PageMain';
+PageMain.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default PageMain;
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 48344b2..36936e8 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -2,8 +2,12 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PageHeader from '@/components/Page/Header';
 import PageContent from '@/components/Page/Content';
+import PageMain from '@/components/Page/Main';
+import Side from '@/components/Page/Side';
 
-export type PageProps = React.HTMLAttributes<HTMLDivElement> ;
+export interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
+    sticky?: boolean;
+}
 
 const Page = ({
     children,
@@ -21,5 +25,7 @@ const Page = ({
 
 Page.Header = PageHeader;
 Page.Content = PageContent;
+Page.Side = Side;
+Page.Main = PageMain;
 
 export default Page;
diff --git a/src/components/Page/PageContext.ts b/src/components/Page/PageContext.ts
new file mode 100644
index 0000000..6a0245b
--- /dev/null
+++ b/src/components/Page/PageContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export interface PageContextProps {
+
+}
+
+export const PageContext = createContext<PageContextProps>({})
diff --git a/src/components/Page/Side.tsx b/src/components/Page/Side.tsx
new file mode 100644
index 0000000..a289b71
--- /dev/null
+++ b/src/components/Page/Side.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Panel, Variant } from '@/components';
+
+export enum Position {
+    LEFT = 'left',
+    RIGHT = 'right'
+}
+
+export interface PageSideProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: Position | string;
+    spaced?: boolean;
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageSide = React.forwardRef<HTMLDivElement, PageSideProps>((
+    {
+        children,
+        className,
+        position,
+        spaced,
+        fixed,
+        variant
+    },
+    ref
+): React.ReactElement => (
+    <Panel
+        ref={ref}
+        className={clsx(
+            'page-side',
+            position && `page-side-${position}`,
+            fixed && 'page-side-fixed',
+            className
+        )}
+        spaced={spaced}
+        variant={variant}
+    >
+        {children}
+    </Panel>
+));
+
+PageSide.displayName = 'Side';
+PageSide.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    position: PropTypes.string,
+    spaced: PropTypes.bool,
+    fixed: PropTypes.bool,
+    variant: PropTypes.string
+}
+
+export default PageSide;
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index cf4c28a..a52cc41 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -1,24 +1,37 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
 
 interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
     spaced?: boolean;
+    variant?: Variant| string;
 }
 
-const Panel = ({
+const Panel = React.forwardRef<HTMLDivElement, PanelProps>(({
     children,
     className,
-    spaced
-}: React.PropsWithChildren<PanelProps>): React.ReactElement => (
+    spaced,
+    variant
+}): React.ReactElement => (
     <div
         className={clsx(
             'panel',
             spaced && 'panel-spaced',
+            variant && `panel-${variant}`,
             className
         )}
     >
         {children}
     </div>
-);
+));
+
+Panel.displayName = 'Panel';
+Panel.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    spaced: PropTypes.bool,
+    variant: PropTypes.string
+}
 
 export default Panel;
diff --git a/src/images/coderan/logo.svg b/src/images/coderan/logo.svg
new file mode 100644
index 0000000..9a4efe7
--- /dev/null
+++ b/src/images/coderan/logo.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 713 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g id="Coderan" transform="matrix(1.22507,0,0,1.22507,-183.008,-304.272)">
+        <g transform="matrix(134.398,0,0,134.398,266.351,376.222)">
+            <path d="M0.317,-0.545C0.367,-0.545 0.414,-0.532 0.458,-0.507C0.502,-0.482 0.537,-0.448 0.562,-0.405C0.586,-0.362 0.599,-0.316 0.599,-0.266C0.599,-0.216 0.586,-0.169 0.561,-0.125C0.536,-0.082 0.502,-0.048 0.459,-0.023C0.417,0.001 0.369,0.014 0.317,0.014C0.241,0.014 0.176,-0.013 0.122,-0.068C0.068,-0.122 0.042,-0.188 0.042,-0.265C0.042,-0.348 0.072,-0.417 0.133,-0.473C0.186,-0.521 0.248,-0.545 0.317,-0.545ZM0.319,-0.419C0.278,-0.419 0.243,-0.405 0.216,-0.376C0.188,-0.347 0.174,-0.311 0.174,-0.266C0.174,-0.219 0.188,-0.182 0.215,-0.153C0.242,-0.125 0.277,-0.11 0.319,-0.11C0.36,-0.11 0.395,-0.125 0.423,-0.154C0.45,-0.183 0.464,-0.22 0.464,-0.266C0.464,-0.311 0.451,-0.348 0.424,-0.377C0.396,-0.405 0.361,-0.419 0.319,-0.419Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,352.384,376.222)">
+            <path d="M0.459,-0.736L0.593,-0.736L0.593,-0L0.459,-0L0.459,-0.056C0.433,-0.031 0.407,-0.014 0.381,-0.003C0.355,0.008 0.327,0.014 0.296,0.014C0.227,0.014 0.168,-0.013 0.118,-0.066C0.068,-0.119 0.043,-0.186 0.043,-0.265C0.043,-0.347 0.067,-0.414 0.116,-0.466C0.164,-0.519 0.223,-0.545 0.292,-0.545C0.324,-0.545 0.354,-0.539 0.382,-0.527C0.41,-0.515 0.436,-0.497 0.459,-0.473L0.459,-0.736ZM0.319,-0.422C0.278,-0.422 0.244,-0.407 0.217,-0.378C0.189,-0.349 0.176,-0.312 0.176,-0.266C0.176,-0.22 0.19,-0.182 0.217,-0.153C0.245,-0.123 0.279,-0.108 0.32,-0.108C0.362,-0.108 0.396,-0.123 0.424,-0.152C0.452,-0.181 0.465,-0.219 0.465,-0.267C0.465,-0.313 0.452,-0.35 0.424,-0.379C0.396,-0.408 0.362,-0.422 0.319,-0.422Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,441.108,376.222)">
+            <path d="M0.6,-0.227L0.171,-0.227C0.178,-0.189 0.194,-0.159 0.221,-0.137C0.248,-0.115 0.282,-0.104 0.324,-0.104C0.374,-0.104 0.416,-0.121 0.452,-0.156L0.564,-0.103C0.536,-0.063 0.503,-0.034 0.464,-0.015C0.425,0.004 0.378,0.014 0.325,0.014C0.241,0.014 0.174,-0.013 0.121,-0.065C0.069,-0.118 0.042,-0.184 0.042,-0.263C0.042,-0.344 0.069,-0.411 0.121,-0.465C0.173,-0.518 0.239,-0.545 0.317,-0.545C0.401,-0.545 0.469,-0.518 0.521,-0.465C0.574,-0.411 0.6,-0.34 0.6,-0.252L0.6,-0.227ZM0.466,-0.332C0.458,-0.362 0.44,-0.386 0.414,-0.404C0.388,-0.423 0.358,-0.432 0.324,-0.432C0.287,-0.432 0.254,-0.422 0.226,-0.401C0.209,-0.388 0.192,-0.365 0.177,-0.332L0.466,-0.332Z" style="fill:rgb(37,43,57);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(0.816282,0,0,0.816282,14.9692,68.0394)">
+            <path d="M583.105,359.56C588.084,358.291 592.547,355.737 596.493,351.898L614.984,360.581C610.375,367.12 604.854,371.957 598.423,375.092C595.631,376.453 592.612,377.519 589.365,378.289L583.105,359.56ZM559.829,289.928C564.307,288.526 569.132,287.824 574.305,287.824C588.079,287.824 599.28,292.233 607.909,301.049C616.538,309.866 620.853,321.509 620.853,335.98L620.772,340.161L576.62,340.161L570.843,322.876L598.825,322.876C597.375,317.999 594.516,314.033 590.248,310.978C585.98,307.923 581.028,306.395 575.39,306.395C571.982,306.395 568.808,306.927 565.867,307.991L559.829,289.928Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,527.141,376.222)">
+            <path d="M0.036,-0.531L0.15,-0.531L0.15,-0.464C0.163,-0.491 0.179,-0.511 0.2,-0.524C0.22,-0.538 0.243,-0.545 0.267,-0.545C0.284,-0.545 0.302,-0.54 0.321,-0.531L0.28,-0.417C0.264,-0.424 0.251,-0.428 0.241,-0.428C0.221,-0.428 0.203,-0.416 0.189,-0.39C0.175,-0.365 0.168,-0.315 0.168,-0.241L0.168,-0.215L0.168,-0L0.036,-0L0.036,-0.531Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,570.125,376.222)">
+            <path d="M0.459,-0.531L0.593,-0.531L0.593,-0L0.459,-0L0.459,-0.056C0.433,-0.031 0.407,-0.014 0.381,-0.003C0.355,0.008 0.327,0.014 0.296,0.014C0.227,0.014 0.168,-0.013 0.118,-0.066C0.068,-0.119 0.043,-0.186 0.043,-0.265C0.043,-0.347 0.067,-0.414 0.116,-0.466C0.164,-0.519 0.223,-0.545 0.292,-0.545C0.324,-0.545 0.354,-0.539 0.382,-0.527C0.41,-0.515 0.436,-0.497 0.459,-0.473L0.459,-0.531ZM0.319,-0.422C0.278,-0.422 0.244,-0.407 0.217,-0.378C0.189,-0.349 0.176,-0.312 0.176,-0.266C0.176,-0.22 0.19,-0.182 0.217,-0.153C0.245,-0.123 0.279,-0.108 0.32,-0.108C0.362,-0.108 0.396,-0.123 0.424,-0.152C0.452,-0.181 0.465,-0.219 0.465,-0.267C0.465,-0.313 0.452,-0.35 0.424,-0.379C0.396,-0.408 0.362,-0.422 0.319,-0.422Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(134.398,0,0,134.398,658.849,376.222)">
+            <path d="M0.067,-0.531L0.201,-0.531L0.201,-0.477C0.231,-0.502 0.258,-0.52 0.283,-0.53C0.307,-0.54 0.332,-0.545 0.358,-0.545C0.411,-0.545 0.456,-0.527 0.492,-0.49C0.523,-0.458 0.539,-0.412 0.539,-0.351L0.539,-0L0.407,-0L0.407,-0.233C0.407,-0.296 0.404,-0.338 0.398,-0.359C0.393,-0.38 0.383,-0.396 0.368,-0.407C0.354,-0.417 0.337,-0.423 0.316,-0.423C0.289,-0.423 0.266,-0.414 0.247,-0.396C0.227,-0.378 0.214,-0.353 0.207,-0.321C0.203,-0.304 0.201,-0.268 0.201,-0.213L0.201,-0L0.067,-0L0.067,-0.531Z" style="fill:rgb(80,79,84);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g id="Coderan-in-C---Code-Rood-1" serif:id="Coderan in C - Code Rood 1" transform="matrix(0.176222,0,0,0.682896,-3.78855,-104.49)">
+        <path d="M460,212.5C460,211.12 455.659,210 450.312,210L319.688,210C314.341,210 310,211.12 310,212.5L310,217.5C310,218.88 314.341,220 319.688,220L450.312,220C455.659,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(255,9,0);"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-152.218,-193.094)">
+        <path d="M314.392,298.775C314.4,299.182 314.405,299.59 314.405,300C314.405,302.12 314.293,304.214 314.076,306.282L296.958,306.282C295.922,306.282 295.081,305.441 295.081,304.405L295.081,300.651C295.081,299.616 295.922,298.775 296.958,298.775L314.392,298.775Z" style="fill:rgb(255,9,0);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Grijs-1" serif:id="Coderan in C - Code Grijs 1" transform="matrix(0.45516,0,0,0.682896,-97.2743,-64.7277)">
+        <path d="M460,212.5C460,211.12 458.319,210 456.249,210L313.751,210C311.681,210 310,211.12 310,212.5L310,217.5C310,218.88 311.681,220 313.751,220L456.249,220C458.319,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(80,79,84);"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M295.221,268.841C296.72,271.233 298.052,273.741 299.2,276.349L274.601,276.349C273.565,276.349 272.724,275.508 272.724,274.472L272.724,270.718C272.724,269.682 273.565,268.841 274.601,268.841L295.221,268.841Z" style="fill:rgb(1,0,208);stroke:rgb(1,0,208);stroke-width:1.1px;"/>
+    </g>
+    <g id="Coderan-in-C---Code-Blauw-1" serif:id="Coderan in C - Code Blauw 1" transform="matrix(0.370216,0,0,0.682896,-70.9415,-51.4002)">
+        <path d="M460,212.5C460,211.12 457.934,210 455.389,210L314.611,210C312.066,210 310,211.12 310,212.5L310,217.5C310,218.88 312.066,220 314.611,220L455.389,220C457.934,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(1,0,208);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Groen-3" serif:id="Coderan in C - Code Groen 3" transform="matrix(0.369733,0,0,0.682896,-70.7917,-91.2725)">
+        <path d="M460,212.5C460,211.12 457.931,210 455.383,210L314.617,210C312.069,210 310,211.12 310,212.5L310,217.5C310,218.88 312.069,220 314.617,220L455.383,220C457.931,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(12,195,5);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Groen-1" serif:id="Coderan in C - Code Groen 1" transform="matrix(0.252434,0,0,0.682896,-27.8039,-38.1829)">
+        <path d="M460,212.5C460,211.12 456.97,210 453.237,210L316.763,210C313.03,210 310,211.12 310,212.5L310,217.5C310,218.88 313.03,220 316.763,220L453.237,220C456.97,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(12,195,5);"/>
+    </g>
+    <g id="Coderan-in-C---Code-Oranje-2" serif:id="Coderan in C - Code Oranje 2" transform="matrix(0.425426,0,0,0.682896,-88.0567,-117.487)">
+        <path d="M460,212.5C460,211.12 458.202,210 455.987,210L314.013,210C311.798,210 310,211.12 310,212.5L310,217.5C310,218.88 311.798,220 314.013,220L455.987,220C458.202,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(255,174,0);stroke:rgb(255,174,0);stroke-width:1.76px;stroke-linecap:butt;"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M297.457,327.269C296.079,329.894 294.508,332.402 292.762,334.776L262.462,334.776C261.426,334.776 260.585,333.935 260.585,332.9L260.585,329.146C260.585,328.11 261.426,327.269 262.462,327.269L297.457,327.269Z" style="fill:rgb(255,174,0);stroke:rgb(255,174,0);stroke-width:1.1px;"/>
+    </g>
+    <g transform="matrix(0.909632,0,0,0.909632,-143.2,-192.689)">
+        <path d="M282.728,254.617C285.48,256.885 288.021,259.398 290.32,262.124L250.323,262.124C249.287,262.124 248.446,261.283 248.446,260.248L248.446,256.494C248.446,255.458 249.287,254.617 250.323,254.617L282.728,254.617Z" style="fill:rgb(158,23,138);stroke:rgb(158,23,138);stroke-width:1.1px;"/>
+    </g>
+    <g id="Coderan-in-C---Code-Paars-1" serif:id="Coderan in C - Code Paars 1" transform="matrix(0.48585,0,0,0.682896,-106.788,-24.9655)">
+        <path d="M460,212.5C460,211.12 458.425,210 456.486,210L313.514,210C311.575,210 310,211.12 310,212.5L310,217.5C310,218.88 311.575,220 313.514,220L456.486,220C458.425,220 460,218.88 460,217.5L460,212.5Z" style="fill:rgb(158,23,138);"/>
+    </g>
+    <g id="Coderan-in-C---2" serif:id="Coderan in C - 2" transform="matrix(0.0441682,0,0,0.682896,16.8828,-104.49)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---3" serif:id="Coderan in C - 3" transform="matrix(0.0441682,0,0,0.682896,16.8828,-91.2725)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---4" serif:id="Coderan in C - 4" transform="matrix(0.0441682,0,0,0.682896,16.8828,-78.0552)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---5" serif:id="Coderan in C - 5" transform="matrix(0.0441682,0,0,0.682896,16.8828,-64.8378)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---6" serif:id="Coderan in C - 6" transform="matrix(0.0441682,0,0,0.682896,16.8828,-51.6205)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---7" serif:id="Coderan in C - 7" transform="matrix(0.0441682,0,0,0.682896,16.8828,-38.4032)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---8" serif:id="Coderan in C - 8" transform="matrix(0.0441682,0,0,0.682896,16.8828,-24.9655)">
+        <path d="M460,212.425C460,211.087 443.197,210 422.5,210L347.5,210C326.803,210 310,211.087 310,212.425L310,217.575C310,218.913 326.803,220 347.5,220L422.5,220C443.197,220 460,218.913 460,217.575L460,212.425Z" style="fill:rgb(47,54,72);"/>
+    </g>
+    <g id="Coderan-in-C---1" serif:id="Coderan in C - 1" transform="matrix(0.276051,0,0,0.275361,-0.470089,13.3066)">
+        <path d="M135.872,48.512C136.262,49.266 136.461,50.123 136.461,51.026L136.461,63.796C136.461,67.116 133.773,69.811 130.461,69.811L118.461,69.811C115.675,69.811 113.329,67.903 112.763,65.292L113.694,64.517C117.406,61.708 121.119,58.898 124.831,56.089L135.872,48.512Z" style="fill:rgb(47,54,72);fill-opacity:0.1;"/>
+    </g>
+    <g transform="matrix(0.40134,0,0,0.40134,-80.7674,-40.607)">
+        <path d="M540.56,440.56C504.572,476.549 454.866,498.822 400,498.822C290.267,498.822 201.178,409.733 201.178,300C201.178,190.267 290.267,101.178 400,101.178C454.866,101.178 504.572,123.451 540.56,159.44L494.393,205.607C470.225,181.439 436.845,166.482 400,166.482C326.309,166.482 266.482,226.309 266.482,300C266.482,373.691 326.309,433.518 400,433.518C436.845,433.518 470.225,418.561 494.393,394.393L540.56,440.56Z" style="fill:rgb(37,43,57);stroke:rgb(37,43,57);stroke-width:2.49px;"/>
+    </g>
+</svg>
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index 41b28a7..bbc8b13 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -39,6 +39,7 @@ $primary-color: mixins.color('deepPurple', 600);
 $primary-color-hover: mixins.color('deepPurple', 700);
 $primary-color-active: mixins.color('deepPurple', 800);
 $primary-color-light-background: mixins.color('deepPurple', 50);
+$primary-color-shadow-lighter: mixins.color('deepPurple', 400);
 
 $secondary-color: mixins.color('red', 600);
 $secondary-color-hover: mixins.color('red', 700);
@@ -58,6 +59,7 @@ $success-color-active: mixins.color('green', 900);
     --primary-color-hover: #{$primary-color-hover};
     --primary-color-active: #{$primary-color-active};
     --primary-color-light-background: #{$primary-color-light-background};
+    --primary-color-shadow-lighter: #{$primary-color-shadow-lighter};
 
     --secondary-color: #{$secondary-color};
     --secondary-color-hover: #{$secondary-color-hover};
@@ -88,9 +90,17 @@ $panel-gutter: 2rem;
  * 4. Page
  */
 $page-gutter: 2rem;
+$page-side-background-color: mixins.color('gray', 100);
+$page-side-border-color: mixins.color('gray', 300);
+$page-side-gutter: 1rem;
+$page-header-height: 120px;
 
 :root {
     --page-gutter: #{$page-gutter};
+    --page-side-background-color: #{$page-side-background-color};
+    --page-side-border-color: #{$page-side-border-color};
+    --page-side-gutter: #{$page-side-gutter};
+    --page-header-height: #{$page-header-height}
 }
 
 /**
@@ -435,3 +445,14 @@ $form-field-font-size: 1rem;
     --form-field-font-weight: #{$form-field-font-weight};
     --form-field-font-size: #{$form-field-font-size};
 }
+
+/**
+ * 9. Navigation
+ */
+$vertical-navigation-border-color: mixins.color('gray', 300);
+$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .05);
+
+:root {
+    --vertical-navigation-border-color: #{$vertical-navigation-border-color};
+    --vertical-navigation-active-item-background-color: #{$vertical-navigation-active-item-background-color};
+}
diff --git a/src/style/components/_logos.scss b/src/style/components/_logos.scss
new file mode 100644
index 0000000..e75bbb4
--- /dev/null
+++ b/src/style/components/_logos.scss
@@ -0,0 +1,10 @@
+.coderan {
+    background: url("../images/coderan/logo.svg");
+    width: 100px;
+}
+
+.coderan-light {
+    background: url("../images/coderan/logo-white.svg");
+    width: 240px;
+    height: auto;
+}
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
new file mode 100644
index 0000000..2b1e476
--- /dev/null
+++ b/src/style/components/_navigation.scss
@@ -0,0 +1,63 @@
+@use "../base/mixins";
+
+.vertical-navigation-container {
+    width: 100%;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    position: relative;
+
+    .vertical-navigation-top {
+        min-height: var(--page-header-height);
+        padding: 0 var(--base-gutter);
+        display: flex;
+        align-items: center;
+    }
+
+    .vertical-navigation-divider {
+        height: 1px;
+        background: var(--vertical-navigation-border-color);
+        width: 100%;
+    }
+
+    .vertical-navigation-list {
+        padding: var(--base-gutter);
+        overflow-y: scroll;
+
+        .vertical-navigation-list-item {
+            align-items: center;
+            cursor: pointer;
+            color: currentColor;
+            display: flex;
+            padding: var(--base-gutter);
+            border-radius: var(--base-border-radius);
+            font: {
+                weight: 500;
+            }
+
+            &:hover {
+                background: var(--vertical-navigation-active-item-background-color);
+            }
+
+            .vertical-navigation-list-item-icon {
+                margin-right: var(--base-gutter);
+                font: {
+                    size: 1.1rem;
+                }
+            }
+        }
+    }
+}
+
+.navigation-primary {
+    color: mixins.color('deepPurple', 50);
+
+    .vertical-navigation-list-item {
+        color: currentColor;
+    }
+
+    .vertical-navigation-divider {
+        background: var(--primary-color-shadow-lighter);
+    }
+}
diff --git a/src/style/components/_page.scss b/src/style/components/_page.scss
index 7464431..1cefbcb 100644
--- a/src/style/components/_page.scss
+++ b/src/style/components/_page.scss
@@ -1,28 +1,50 @@
 @use "../base/mixins";
 
 .page {
-    background: var(--page-background-color);
+    display: flex;
+
+    .page-main {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 100%;
+    }
 
     .page-header {
         border-bottom: solid 1px var(--base-border-color);
-        padding-top: var(--page-gutter);
         padding-right: var(--page-gutter);
         padding-left: var(--page-gutter);
-
-        &:not(.with-title) {
-            padding-bottom: var(--page-gutter);
-        }
+        height: var(--page-header-height);
+        display: flex;
+        align-items: center;
 
         .page-header-title {
             font-size: 2rem;
             color: mixins.color('gray', 900);
             font-weight: normal;
             margin: 0;
-            padding-bottom: var(--page-gutter);
         }
     }
 
     .page-content {
         padding: var(--page-gutter);
     }
+
+    .page-side {
+        flex: 1 1 auto;
+        background: var(--page-side-background-color);
+
+        &.page-side-right {
+            border-left: solid 1px var(--page-side-border-color);
+        }
+
+        &.page-side-left {
+            border-right: solid 1px var(--page-side-border-color);
+        }
+
+        &.page-side-fixed {
+            align-self: flex-start;
+            position: sticky;
+            top: 0; /* required */
+        }
+    }
 }
diff --git a/src/style/components/_panel.scss b/src/style/components/_panel.scss
index e46dc3a..ce1bd5f 100644
--- a/src/style/components/_panel.scss
+++ b/src/style/components/_panel.scss
@@ -2,6 +2,10 @@
     background: var(--panel-background);
 
     &.panel-spaced {
-        padding: var(--panel-gutter);
+        padding: var(--base-gutter);
+    }
+
+    &.panel-primary {
+        background: var(--primary-color);
     }
 }
diff --git a/src/style/index.scss b/src/style/index.scss
index abad4b0..b23232b 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -17,6 +17,8 @@
 @use "components/card";
 @use "components/icons";
 @use "components/forms";
+@use "components/navigation";
+@use "components/logos";
 
 /**
  * 3. Layout
diff --git a/www/src/index.tsx b/www/src/index.tsx
index 54da55d..83d3b27 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { useState } from 'react';
 import * as ReactDom from 'react-dom';
 
 import '../../src/style/index.scss';
+import logo from '@/images/coderan/logo.svg';
 import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, TextField, Variant } from '../../src';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
 import FormMessage from '../../src/components/Form/Message';
-import { useState } from 'react';
+import VerticalNavigation from '../../src/components/Navigation/VerticalNavigation';
 
 const TestControllable = () => {
     const [value, setValue] = useState('');
@@ -32,1618 +34,1638 @@ const TestControllable = () => {
 }
 
 ReactDom.render(
-    <Page>
-        <Page.Header title="Coderan UI"/>
-        <Page.Content>
-            <Container>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Buttons"/>
-                        <Card.Content>
-                            <Grid columns={7} gap={4}>
-                                <div>
-                                    <Button variant={Variant.PRIMARY}>Primary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.SECONDARY}>Secondary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER}>Danger</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon right</Button>
-                                </div>
-                            </Grid>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Grid"/>
-                        <Card.Content>
-                            <Container fluid>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/1</Col>
-                                </Row>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/2</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/2</Col>
-                                </Row>
+    <>
+        <Page>
+            <Page.Side position="left" fixed>
+                <VerticalNavigation>
+                    <VerticalNavigation.Top>
+                        <img src={logo} width={240} />
+                    </VerticalNavigation.Top>
+                    <VerticalNavigation.Divider />
+                    <VerticalNavigation.List>
+                        <VerticalNavigation.Item
+                            icon={<Icon icon="home" />}
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                </Row>
+                        >
+                            Home
+                        </VerticalNavigation.Item>
+                    </VerticalNavigation.List>
+                </VerticalNavigation>
+            </Page.Side>
+            <Page.Main>
+                <Page.Header title="Demo"/>
+                <Page.Content>
+                    <Container>
+                        <Row>
+                            <Card className="mb-8">
+                                <Card.Header title="Buttons"/>
+                                <Card.Content>
+                                    <Grid columns={7} gap={4}>
+                                        <div>
+                                            <Button variant={Variant.PRIMARY}>Primary</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.SECONDARY}>Secondary</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.DANGER}>Danger</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
+                                        </div>
+                                        <div>
+                                            <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon right</Button>
+                                        </div>
+                                    </Grid>
+                                </Card.Content>
+                            </Card>
+                        </Row>
+                        <Row>
+                            <Card className="mb-8">
+                                <Card.Header title="Grid"/>
+                                <Card.Content>
+                                    <Container fluid>
+                                        <Row className="mb-8">
+                                            <Col className="py-4 background-primary-light">Col 1/1</Col>
+                                        </Row>
+                                        <Row className="mb-8">
+                                            <Col className="py-4 background-primary-light">Col 1/2</Col>
+                                            <Col className="py-4 background-primary-light">Col 2/2</Col>
+                                        </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                </Row>
+                                        <Row className="mb-8">
+                                            <Col className="py-4 background-primary-light">Col 1/3</Col>
+                                            <Col className="py-4 background-primary-light">Col 2/3</Col>
+                                            <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                        </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 4/4</Col>
-                                </Row>
-                            </Container>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row className="mb-8">
-                    <Card>
-                        <Card.Header title="Inputs" />
-                        <Card.Content>
-                            <FormGroup>
-                                <h5 className="text-primary">Standard input</h5>
-                                <FormLabel htmlFor="a">Username</FormLabel>
-                                <TextField id="a" />
-                            </FormGroup>
+                                        <Row className="mb-8">
+                                            <Col className="py-4 background-primary-light">Col 1/3</Col>
+                                            <Col className="py-4 background-primary-light">Col 2/3</Col>
+                                            <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                        </Row>
 
-                            <FormGroup>
-                                <h5>Input with floating label</h5>
-                                <TextField label="Username" />
-                            </FormGroup>
+                                        <Row className="mb-8">
+                                            <Col className="py-4 background-primary-light">Col 1/4</Col>
+                                            <Col className="py-4 background-primary-light">Col 2/4</Col>
+                                            <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                            <Col className="py-4 background-primary-light">Col 4/4</Col>
+                                        </Row>
+                                    </Container>
+                                </Card.Content>
+                            </Card>
+                        </Row>
+                        <Row className="mb-8">
+                            <Card>
+                                <Card.Header title="Inputs" />
+                                <Card.Content>
+                                    <FormGroup>
+                                        <h5 className="text-primary">Standard input</h5>
+                                        <FormLabel htmlFor="a">Username</FormLabel>
+                                        <TextField id="a" />
+                                    </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with default value</h5>
-                                <TextField
-                                    label="With default value"
-                                    value="Hello world"
-                                />
-                            </FormGroup>
+                                    <FormGroup>
+                                        <h5>Input with floating label</h5>
+                                        <TextField label="Username" />
+                                    </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with actions</h5>
-                                <TextField
-                                    label="Username"
-                                    type="password"
-                                    onChange={() => {
+                                    <FormGroup>
+                                        <h5>Input with default value</h5>
+                                        <TextField
+                                            label="With default value"
+                                            value="Hello world"
+                                        />
+                                    </FormGroup>
 
-                                    }}
-                                    actions={[
-                                        <Button small variant={Variant.PRIMARY}><Icon icon="eye" /></Button>
-                                    ]}
-                                    valid={true}
-                                />
-                            </FormGroup>
+                                    <FormGroup>
+                                        <h5>Input with actions</h5>
+                                        <TextField
+                                            label="Username"
+                                            type="password"
+                                            onChange={() => {
 
-                            <FormGroup>
-                                <h5>Invalid input</h5>
-                                <TextField
-                                    label="Invalid input"
-                                    valid={false}
-                                />
-                                <FormMessage valid={false}>
-                                    Input is invalid
-                                </FormMessage>
-                            </FormGroup>
+                                            }}
+                                            actions={[
+                                                <Button small variant={Variant.PRIMARY}><Icon icon="eye" /></Button>
+                                            ]}
+                                            valid={true}
+                                        />
+                                    </FormGroup>
 
-                            <FormGroup>
-                                <h5>Valid input</h5>
-                                <TextField
-                                    label="Valid input"
-                                    valid
-                                />
-                            </FormGroup>
-                              <FormGroup>
-                                <h5>Valid input</h5>
-                                <SelectField
-                                    label="Valid input"
-                                    valid
-                                >
-                                    <option value="b">A</option>
-                                    <option value="d">B</option>
-                                    <option value="e">C</option>
-                                    <option value="f">D</option>
-                                    <option value="g">E</option>
-                                </SelectField>
-                            </FormGroup>
-                            <TestControllable />
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Grid columns={10} gap={4}>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Activity</div>
-                                <Icon icon="activity" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert circle</div>
-                                <Icon icon="alert-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert triangle</div>
-                                <Icon icon="alert-triangle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Archive</div>
-                                <Icon icon="archive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow left</div>
-                                <Icon icon="arrow-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle down</div>
-                                <Icon icon="arrow-circle-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle left</div>
-                                <Icon icon="arrow-circle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle right</div>
-                                <Icon icon="arrow-circle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle up</div>
-                                <Icon icon="arrow-circle-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="sort-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="arrow-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow right</div>
-                                <Icon icon="arrow-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt left</div>
-                                <Icon icon="arrow-alt-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt down</div>
-                                <Icon icon="arrow-alt-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt right</div>
-                                <Icon icon="arrow-alt-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt up</div>
-                                <Icon icon="arrow-alt-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort left</div>
-                                <Icon icon="sort-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort right</div>
-                                <Icon icon="sort-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort up</div>
-                                <Icon icon="sort-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow up</div>
-                                <Icon icon="arrow-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double down</div>
-                                <Icon icon="chevron-double-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double left</div>
-                                <Icon icon="chevron-double-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double right</div>
-                                <Icon icon="chevron-double-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double up</div>
-                                <Icon icon="chevron-double-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">At</div>
-                                <Icon icon="at" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach 2</div>
-                                <Icon icon="attach-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach</div>
-                                <Icon icon="attach" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Award</div>
-                                <Icon icon="award" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Backspace</div>
-                                <Icon icon="backspace" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart 2</div>
-                                <Icon icon="bar-chart-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart</div>
-                                <Icon icon="bar-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Battery</div>
-                                <Icon icon="battery" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Behance</div>
-                                <Icon icon="behance" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell off</div>
-                                <Icon icon="bell-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell</div>
-                                <Icon icon="bell" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bluetooth</div>
-                                <Icon icon="bluetooth" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book open</div>
-                                <Icon icon="book-open" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book</div>
-                                <Icon icon="book" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bookmark</div>
-                                <Icon icon="bookmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Briefcase</div>
-                                <Icon icon="briefcase" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Browser</div>
-                                <Icon icon="browser" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Brush</div>
-                                <Icon icon="brush" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bulb</div>
-                                <Icon icon="bulb" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Calendar</div>
-                                <Icon icon="calendar" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Camera</div>
-                                <Icon icon="camera" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Car</div>
-                                <Icon icon="car" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cast</div>
-                                <Icon icon="cast" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Charging</div>
-                                <Icon icon="charging" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle 2</div>
-                                <Icon icon="checkmark-circle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle</div>
-                                <Icon icon="checkmark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark</div>
-                                <Icon icon="checkmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square 2</div>
-                                <Icon icon="checkmark-square-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square</div>
-                                <Icon icon="checkmark-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron down</div>
-                                <Icon icon="chevron-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron left</div>
-                                <Icon icon="chevron-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron right</div>
-                                <Icon icon="chevron-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron up</div>
-                                <Icon icon="chevron-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clipboard</div>
-                                <Icon icon="clipboard" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clock</div>
-                                <Icon icon="clock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close circle</div>
-                                <Icon icon="close-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close</div>
-                                <Icon icon="close" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close square</div>
-                                <Icon icon="close-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud download</div>
-                                <Icon icon="cloud-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud upload</div>
-                                <Icon icon="cloud-upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code download</div>
-                                <Icon icon="code-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code</div>
-                                <Icon icon="code" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Collapse</div>
-                                <Icon icon="collapse" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color palette</div>
-                                <Icon icon="color-palette" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color picker</div>
-                                <Icon icon="color-picker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Compass</div>
-                                <Icon icon="compass" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Copy</div>
-                                <Icon icon="copy" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down left</div>
-                                <Icon icon="corner-down-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down right</div>
-                                <Icon icon="corner-down-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left down</div>
-                                <Icon icon="corner-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left up</div>
-                                <Icon icon="corner-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right down</div>
-                                <Icon icon="corner-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right up</div>
-                                <Icon icon="corner-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up left</div>
-                                <Icon icon="corner-up-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up right</div>
-                                <Icon icon="corner-up-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Credit card</div>
-                                <Icon icon="credit-card" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Crop</div>
-                                <Icon icon="crop" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cube</div>
-                                <Icon icon="cube" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left down</div>
-                                <Icon icon="diagonal-arrow-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left up</div>
-                                <Icon icon="diagonal-arrow-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right down</div>
-                                <Icon icon="diagonal-arrow-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right up</div>
-                                <Icon icon="diagonal-arrow-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Done all</div>
-                                <Icon icon="done-all" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Download</div>
-                                <Icon icon="download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet off</div>
-                                <Icon icon="droplet-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet</div>
-                                <Icon icon="droplet" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit 2</div>
-                                <Icon icon="edit-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit</div>
-                                <Icon icon="edit" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Email</div>
-                                <Icon icon="email" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Expand</div>
-                                <Icon icon="expand" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">External link</div>
-                                <Icon icon="external-link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off 2</div>
-                                <Icon icon="eye-off-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off</div>
-                                <Icon icon="eye-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye</div>
-                                <Icon icon="eye" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Facebook</div>
-                                <Icon icon="facebook" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File add</div>
-                                <Icon icon="file-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File</div>
-                                <Icon icon="file" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File remove</div>
-                                <Icon icon="file-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File text</div>
-                                <Icon icon="file-text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Film</div>
-                                <Icon icon="film" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flag</div>
-                                <Icon icon="flag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash off</div>
-                                <Icon icon="flash-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash</div>
-                                <Icon icon="flash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip 2</div>
-                                <Icon icon="flip-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip</div>
-                                <Icon icon="flip" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder add</div>
-                                <Icon icon="folder-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder</div>
-                                <Icon icon="folder" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder remove</div>
-                                <Icon icon="folder-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Funnel</div>
-                                <Icon icon="funnel" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Gift</div>
-                                <Icon icon="gift" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Github</div>
-                                <Icon icon="github" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe 2</div>
-                                <Icon icon="globe-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe</div>
-                                <Icon icon="globe" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Google</div>
-                                <Icon icon="google" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Grid</div>
-                                <Icon icon="grid" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hard drive</div>
-                                <Icon icon="hard-drive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hash</div>
-                                <Icon icon="hash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Headphones</div>
-                                <Icon icon="headphones" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Heart</div>
-                                <Icon icon="heart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Home</div>
-                                <Icon icon="home" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Image</div>
-                                <Icon icon="image" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Inbox</div>
-                                <Icon icon="inbox" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Info</div>
-                                <Icon icon="info" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Keypad</div>
-                                <Icon icon="keypad" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layers</div>
-                                <Icon icon="layers" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layout</div>
-                                <Icon icon="layout" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link 2</div>
-                                <Icon icon="link-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link</div>
-                                <Icon icon="link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Linkedin</div>
-                                <Icon icon="linkedin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">List</div>
-                                <Icon icon="list" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Loader</div>
-                                <Icon icon="loader" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Lock</div>
-                                <Icon icon="lock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log in</div>
-                                <Icon icon="log-in" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log out</div>
-                                <Icon icon="log-out" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Map</div>
-                                <Icon icon="map" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Maximize</div>
-                                <Icon icon="maximize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu 2</div>
-                                <Icon icon="menu-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu arrow</div>
-                                <Icon icon="menu-arrow" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu</div>
-                                <Icon icon="menu" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message circle</div>
-                                <Icon icon="message-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message square</div>
-                                <Icon icon="message-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic off</div>
-                                <Icon icon="mic-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic</div>
-                                <Icon icon="mic" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minimize</div>
-                                <Icon icon="minimize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus circle</div>
-                                <Icon icon="minus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus</div>
-                                <Icon icon="minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus square</div>
-                                <Icon icon="minus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Monitor</div>
-                                <Icon icon="monitor" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Moon</div>
-                                <Icon icon="moon" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More horizontal</div>
-                                <Icon icon="more-horizontal" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More vertical</div>
-                                <Icon icon="more-vertical" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Move</div>
-                                <Icon icon="move" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Music</div>
-                                <Icon icon="music" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation 2</div>
-                                <Icon icon="navigation-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation</div>
-                                <Icon icon="navigation" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Npm</div>
-                                <Icon icon="npm" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options 2</div>
-                                <Icon icon="options-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options</div>
-                                <Icon icon="options" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pantone</div>
-                                <Icon icon="pantone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Paper plane</div>
-                                <Icon icon="paper-plane" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pause circle</div>
-                                <Icon icon="pause-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">People</div>
-                                <Icon icon="people" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Percent</div>
-                                <Icon icon="percent" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user add</div>
-                                <Icon icon="user-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user delete</div>
-                                <Icon icon="user-delete" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user done</div>
-                                <Icon icon="user-done" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user</div>
-                                <Icon icon="user" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user remove</div>
-                                <Icon icon="user-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone call</div>
-                                <Icon icon="phone-call" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone missed</div>
-                                <Icon icon="phone-missed" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone off</div>
-                                <Icon icon="phone-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone</div>
-                                <Icon icon="phone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pie chart</div>
-                                <Icon icon="pie-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pin</div>
-                                <Icon icon="pin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Play circle</div>
-                                <Icon icon="play-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus circle</div>
-                                <Icon icon="plus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus</div>
-                                <Icon icon="plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus square</div>
-                                <Icon icon="plus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Power</div>
-                                <Icon icon="power" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pricetags</div>
-                                <Icon icon="pricetags" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Printer</div>
-                                <Icon icon="printer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark circle</div>
-                                <Icon icon="question-mark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark</div>
-                                <Icon icon="question-mark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button off</div>
-                                <Icon icon="radio-button-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button on</div>
-                                <Icon icon="radio-button-on" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio</div>
-                                <Icon icon="radio" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Recording</div>
-                                <Icon icon="recording" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Refresh</div>
-                                <Icon icon="refresh" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Repeat</div>
-                                <Icon icon="repeat" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind left</div>
-                                <Icon icon="rewind-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind right</div>
-                                <Icon icon="rewind-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Save</div>
-                                <Icon icon="save" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Scissors</div>
-                                <Icon icon="scissors" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Search</div>
-                                <Icon icon="search" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings 2</div>
-                                <Icon icon="settings-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings</div>
-                                <Icon icon="settings" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shake</div>
-                                <Icon icon="shake" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Share</div>
-                                <Icon icon="share" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield off</div>
-                                <Icon icon="shield-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield</div>
-                                <Icon icon="shield" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping bag</div>
-                                <Icon icon="shopping-bag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping cart</div>
-                                <Icon icon="shopping-cart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle 2</div>
-                                <Icon icon="shuffle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle</div>
-                                <Icon icon="shuffle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step backwards</div>
-                                <Icon icon="step-backward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step forward</div>
-                                <Icon icon="step-forward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Slash</div>
-                                <Icon icon="slash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smartphone</div>
-                                <Icon icon="smartphone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smiling face</div>
-                                <Icon icon="smiling-face" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Speaker</div>
-                                <Icon icon="speaker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Square</div>
-                                <Icon icon="square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Star</div>
-                                <Icon icon="star" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Stop circle</div>
-                                <Icon icon="stop-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sun</div>
-                                <Icon icon="sun" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Swap</div>
-                                <Icon icon="swap" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sync</div>
-                                <Icon icon="sync" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Text</div>
-                                <Icon icon="text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer minus</div>
-                                <Icon icon="thermometer-minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer</div>
-                                <Icon icon="thermometer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer plus</div>
-                                <Icon icon="thermometer-plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle left</div>
-                                <Icon icon="toggle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle right</div>
-                                <Icon icon="toggle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash 2</div>
-                                <Icon icon="trash-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash</div>
-                                <Icon icon="trash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending down</div>
-                                <Icon icon="trending-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending up</div>
-                                <Icon icon="trending-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Tv</div>
-                                <Icon icon="tv" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Twitter</div>
-                                <Icon icon="twitter" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Umbrella</div>
-                                <Icon icon="umbrella" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Undo</div>
-                                <Icon icon="undo" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Unlock</div>
-                                <Icon icon="unlock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Upload</div>
-                                <Icon icon="upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video off</div>
-                                <Icon icon="video-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video</div>
-                                <Icon icon="video" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume down</div>
-                                <Icon icon="volume-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume mute</div>
-                                <Icon icon="volume-mute" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume off</div>
-                                <Icon icon="volume-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume up</div>
-                                <Icon icon="volume-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi off</div>
-                                <Icon icon="wifi-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi</div>
-                                <Icon icon="wifi" size={12}/>
-                            </Card.Content>
-                        </Card>
-                    </Grid>
-                </Row>
-            </Container>
-        </Page.Content>
-    </Page>,
+                                    <FormGroup>
+                                        <h5>Invalid input</h5>
+                                        <TextField
+                                            label="Invalid input"
+                                            valid={false}
+                                        />
+                                        <FormMessage valid={false}>
+                                            Input is invalid
+                                        </FormMessage>
+                                    </FormGroup>
+
+                                    <FormGroup>
+                                        <h5>Valid input</h5>
+                                        <TextField
+                                            label="Valid input"
+                                            valid
+                                        />
+                                    </FormGroup>
+                                    <FormGroup>
+                                        <h5>Valid input</h5>
+                                        <SelectField
+                                            label="Valid input"
+                                            valid
+                                        >
+                                            <option value="b">A</option>
+                                            <option value="d">B</option>
+                                            <option value="e">C</option>
+                                            <option value="f">D</option>
+                                            <option value="g">E</option>
+                                        </SelectField>
+                                    </FormGroup>
+                                    <TestControllable />
+                                </Card.Content>
+                            </Card>
+                        </Row>
+                        <Row>
+                            <Grid columns={10} gap={4}>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Activity</div>
+                                        <Icon icon="activity" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Alert circle</div>
+                                        <Icon icon="alert-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Alert triangle</div>
+                                        <Icon icon="alert-triangle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Archive</div>
+                                        <Icon icon="archive" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow left</div>
+                                        <Icon icon="arrow-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow circle down</div>
+                                        <Icon icon="arrow-circle-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow circle left</div>
+                                        <Icon icon="arrow-circle-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow circle right</div>
+                                        <Icon icon="arrow-circle-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow circle up</div>
+                                        <Icon icon="arrow-circle-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sort down</div>
+                                        <Icon icon="sort-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sort down</div>
+                                        <Icon icon="arrow-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow right</div>
+                                        <Icon icon="arrow-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow alt left</div>
+                                        <Icon icon="arrow-alt-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow alt down</div>
+                                        <Icon icon="arrow-alt-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow alt right</div>
+                                        <Icon icon="arrow-alt-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow alt up</div>
+                                        <Icon icon="arrow-alt-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sort left</div>
+                                        <Icon icon="sort-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sort right</div>
+                                        <Icon icon="sort-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sort up</div>
+                                        <Icon icon="sort-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Arrow up</div>
+                                        <Icon icon="arrow-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">chevron-double down</div>
+                                        <Icon icon="chevron-double-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">chevron-double left</div>
+                                        <Icon icon="chevron-double-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">chevron-double right</div>
+                                        <Icon icon="chevron-double-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">chevron-double up</div>
+                                        <Icon icon="chevron-double-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">At</div>
+                                        <Icon icon="at" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Attach 2</div>
+                                        <Icon icon="attach-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Attach</div>
+                                        <Icon icon="attach" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Award</div>
+                                        <Icon icon="award" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Backspace</div>
+                                        <Icon icon="backspace" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bar chart 2</div>
+                                        <Icon icon="bar-chart-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bar chart</div>
+                                        <Icon icon="bar-chart" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Battery</div>
+                                        <Icon icon="battery" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Behance</div>
+                                        <Icon icon="behance" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bell off</div>
+                                        <Icon icon="bell-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bell</div>
+                                        <Icon icon="bell" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bluetooth</div>
+                                        <Icon icon="bluetooth" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Book open</div>
+                                        <Icon icon="book-open" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Book</div>
+                                        <Icon icon="book" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bookmark</div>
+                                        <Icon icon="bookmark" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Briefcase</div>
+                                        <Icon icon="briefcase" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Browser</div>
+                                        <Icon icon="browser" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Brush</div>
+                                        <Icon icon="brush" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Bulb</div>
+                                        <Icon icon="bulb" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Calendar</div>
+                                        <Icon icon="calendar" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Camera</div>
+                                        <Icon icon="camera" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Car</div>
+                                        <Icon icon="car" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Cast</div>
+                                        <Icon icon="cast" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Charging</div>
+                                        <Icon icon="charging" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Checkmark circle 2</div>
+                                        <Icon icon="checkmark-circle-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Checkmark circle</div>
+                                        <Icon icon="checkmark-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Checkmark</div>
+                                        <Icon icon="checkmark" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Checkmark square 2</div>
+                                        <Icon icon="checkmark-square-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Checkmark square</div>
+                                        <Icon icon="checkmark-square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Chevron down</div>
+                                        <Icon icon="chevron-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Chevron left</div>
+                                        <Icon icon="chevron-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Chevron right</div>
+                                        <Icon icon="chevron-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Chevron up</div>
+                                        <Icon icon="chevron-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Clipboard</div>
+                                        <Icon icon="clipboard" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Clock</div>
+                                        <Icon icon="clock" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Close circle</div>
+                                        <Icon icon="close-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Close</div>
+                                        <Icon icon="close" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Close square</div>
+                                        <Icon icon="close-square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Cloud download</div>
+                                        <Icon icon="cloud-download" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Cloud upload</div>
+                                        <Icon icon="cloud-upload" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Code download</div>
+                                        <Icon icon="code-download" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Code</div>
+                                        <Icon icon="code" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Collapse</div>
+                                        <Icon icon="collapse" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Color palette</div>
+                                        <Icon icon="color-palette" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Color picker</div>
+                                        <Icon icon="color-picker" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Compass</div>
+                                        <Icon icon="compass" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Copy</div>
+                                        <Icon icon="copy" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner down left</div>
+                                        <Icon icon="corner-down-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner down right</div>
+                                        <Icon icon="corner-down-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner left down</div>
+                                        <Icon icon="corner-left-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner left up</div>
+                                        <Icon icon="corner-left-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner right down</div>
+                                        <Icon icon="corner-right-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner right up</div>
+                                        <Icon icon="corner-right-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner up left</div>
+                                        <Icon icon="corner-up-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Corner up right</div>
+                                        <Icon icon="corner-up-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Credit card</div>
+                                        <Icon icon="credit-card" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Crop</div>
+                                        <Icon icon="crop" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Cube</div>
+                                        <Icon icon="cube" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Diagonal arrow left down</div>
+                                        <Icon icon="diagonal-arrow-left-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Diagonal arrow left up</div>
+                                        <Icon icon="diagonal-arrow-left-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Diagonal arrow right down</div>
+                                        <Icon icon="diagonal-arrow-right-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Diagonal arrow right up</div>
+                                        <Icon icon="diagonal-arrow-right-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Done all</div>
+                                        <Icon icon="done-all" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Download</div>
+                                        <Icon icon="download" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Droplet off</div>
+                                        <Icon icon="droplet-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Droplet</div>
+                                        <Icon icon="droplet" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Edit 2</div>
+                                        <Icon icon="edit-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Edit</div>
+                                        <Icon icon="edit" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Email</div>
+                                        <Icon icon="email" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Expand</div>
+                                        <Icon icon="expand" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">External link</div>
+                                        <Icon icon="external-link" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Eye off 2</div>
+                                        <Icon icon="eye-off-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Eye off</div>
+                                        <Icon icon="eye-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Eye</div>
+                                        <Icon icon="eye" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Facebook</div>
+                                        <Icon icon="facebook" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">File add</div>
+                                        <Icon icon="file-add" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">File</div>
+                                        <Icon icon="file" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">File remove</div>
+                                        <Icon icon="file-remove" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">File text</div>
+                                        <Icon icon="file-text" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Film</div>
+                                        <Icon icon="film" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Flag</div>
+                                        <Icon icon="flag" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Flash off</div>
+                                        <Icon icon="flash-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Flash</div>
+                                        <Icon icon="flash" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Flip 2</div>
+                                        <Icon icon="flip-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Flip</div>
+                                        <Icon icon="flip" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Folder add</div>
+                                        <Icon icon="folder-add" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Folder</div>
+                                        <Icon icon="folder" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Folder remove</div>
+                                        <Icon icon="folder-remove" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Funnel</div>
+                                        <Icon icon="funnel" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Gift</div>
+                                        <Icon icon="gift" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Github</div>
+                                        <Icon icon="github" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Globe 2</div>
+                                        <Icon icon="globe-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Globe</div>
+                                        <Icon icon="globe" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Google</div>
+                                        <Icon icon="google" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Grid</div>
+                                        <Icon icon="grid" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Hard drive</div>
+                                        <Icon icon="hard-drive" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Hash</div>
+                                        <Icon icon="hash" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Headphones</div>
+                                        <Icon icon="headphones" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Heart</div>
+                                        <Icon icon="heart" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Home</div>
+                                        <Icon icon="home" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Image</div>
+                                        <Icon icon="image" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Inbox</div>
+                                        <Icon icon="inbox" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Info</div>
+                                        <Icon icon="info" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Keypad</div>
+                                        <Icon icon="keypad" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Layers</div>
+                                        <Icon icon="layers" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Layout</div>
+                                        <Icon icon="layout" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Link 2</div>
+                                        <Icon icon="link-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Link</div>
+                                        <Icon icon="link" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Linkedin</div>
+                                        <Icon icon="linkedin" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">List</div>
+                                        <Icon icon="list" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Loader</div>
+                                        <Icon icon="loader" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Lock</div>
+                                        <Icon icon="lock" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Log in</div>
+                                        <Icon icon="log-in" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Log out</div>
+                                        <Icon icon="log-out" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Map</div>
+                                        <Icon icon="map" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Maximize</div>
+                                        <Icon icon="maximize" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Menu 2</div>
+                                        <Icon icon="menu-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Menu arrow</div>
+                                        <Icon icon="menu-arrow" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Menu</div>
+                                        <Icon icon="menu" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Message circle</div>
+                                        <Icon icon="message-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Message square</div>
+                                        <Icon icon="message-square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Mic off</div>
+                                        <Icon icon="mic-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Mic</div>
+                                        <Icon icon="mic" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Minimize</div>
+                                        <Icon icon="minimize" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Minus circle</div>
+                                        <Icon icon="minus-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Minus</div>
+                                        <Icon icon="minus" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Minus square</div>
+                                        <Icon icon="minus-square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Monitor</div>
+                                        <Icon icon="monitor" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Moon</div>
+                                        <Icon icon="moon" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">More horizontal</div>
+                                        <Icon icon="more-horizontal" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">More vertical</div>
+                                        <Icon icon="more-vertical" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Move</div>
+                                        <Icon icon="move" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Music</div>
+                                        <Icon icon="music" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Navigation 2</div>
+                                        <Icon icon="navigation-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Navigation</div>
+                                        <Icon icon="navigation" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Npm</div>
+                                        <Icon icon="npm" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Options 2</div>
+                                        <Icon icon="options-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Options</div>
+                                        <Icon icon="options" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Pantone</div>
+                                        <Icon icon="pantone" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Paper plane</div>
+                                        <Icon icon="paper-plane" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Pause circle</div>
+                                        <Icon icon="pause-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">People</div>
+                                        <Icon icon="people" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Percent</div>
+                                        <Icon icon="percent" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">user add</div>
+                                        <Icon icon="user-add" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">user delete</div>
+                                        <Icon icon="user-delete" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">user done</div>
+                                        <Icon icon="user-done" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">user</div>
+                                        <Icon icon="user" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">user remove</div>
+                                        <Icon icon="user-remove" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Phone call</div>
+                                        <Icon icon="phone-call" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Phone missed</div>
+                                        <Icon icon="phone-missed" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Phone off</div>
+                                        <Icon icon="phone-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Phone</div>
+                                        <Icon icon="phone" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Pie chart</div>
+                                        <Icon icon="pie-chart" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Pin</div>
+                                        <Icon icon="pin" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Play circle</div>
+                                        <Icon icon="play-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Plus circle</div>
+                                        <Icon icon="plus-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Plus</div>
+                                        <Icon icon="plus" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Plus square</div>
+                                        <Icon icon="plus-square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Power</div>
+                                        <Icon icon="power" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Pricetags</div>
+                                        <Icon icon="pricetags" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Printer</div>
+                                        <Icon icon="printer" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Question mark circle</div>
+                                        <Icon icon="question-mark-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Question mark</div>
+                                        <Icon icon="question-mark" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Radio button off</div>
+                                        <Icon icon="radio-button-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Radio button on</div>
+                                        <Icon icon="radio-button-on" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Radio</div>
+                                        <Icon icon="radio" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Recording</div>
+                                        <Icon icon="recording" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Refresh</div>
+                                        <Icon icon="refresh" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Repeat</div>
+                                        <Icon icon="repeat" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Rewind left</div>
+                                        <Icon icon="rewind-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Rewind right</div>
+                                        <Icon icon="rewind-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Save</div>
+                                        <Icon icon="save" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Scissors</div>
+                                        <Icon icon="scissors" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Search</div>
+                                        <Icon icon="search" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Settings 2</div>
+                                        <Icon icon="settings-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Settings</div>
+                                        <Icon icon="settings" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shake</div>
+                                        <Icon icon="shake" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Share</div>
+                                        <Icon icon="share" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shield off</div>
+                                        <Icon icon="shield-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shield</div>
+                                        <Icon icon="shield" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shopping bag</div>
+                                        <Icon icon="shopping-bag" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shopping cart</div>
+                                        <Icon icon="shopping-cart" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shuffle 2</div>
+                                        <Icon icon="shuffle-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Shuffle</div>
+                                        <Icon icon="shuffle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Step backwards</div>
+                                        <Icon icon="step-backward" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Step forward</div>
+                                        <Icon icon="step-forward" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Slash</div>
+                                        <Icon icon="slash" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Smartphone</div>
+                                        <Icon icon="smartphone" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Smiling face</div>
+                                        <Icon icon="smiling-face" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Speaker</div>
+                                        <Icon icon="speaker" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Square</div>
+                                        <Icon icon="square" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Star</div>
+                                        <Icon icon="star" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Stop circle</div>
+                                        <Icon icon="stop-circle" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sun</div>
+                                        <Icon icon="sun" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Swap</div>
+                                        <Icon icon="swap" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Sync</div>
+                                        <Icon icon="sync" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Text</div>
+                                        <Icon icon="text" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Thermometer minus</div>
+                                        <Icon icon="thermometer-minus" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Thermometer</div>
+                                        <Icon icon="thermometer" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Thermometer plus</div>
+                                        <Icon icon="thermometer-plus" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Toggle left</div>
+                                        <Icon icon="toggle-left" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Toggle right</div>
+                                        <Icon icon="toggle-right" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Trash 2</div>
+                                        <Icon icon="trash-2" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Trash</div>
+                                        <Icon icon="trash" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Trending down</div>
+                                        <Icon icon="trending-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Trending up</div>
+                                        <Icon icon="trending-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Tv</div>
+                                        <Icon icon="tv" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Twitter</div>
+                                        <Icon icon="twitter" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Umbrella</div>
+                                        <Icon icon="umbrella" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Undo</div>
+                                        <Icon icon="undo" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Unlock</div>
+                                        <Icon icon="unlock" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Upload</div>
+                                        <Icon icon="upload" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Video off</div>
+                                        <Icon icon="video-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Video</div>
+                                        <Icon icon="video" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Volume down</div>
+                                        <Icon icon="volume-down" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Volume mute</div>
+                                        <Icon icon="volume-mute" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Volume off</div>
+                                        <Icon icon="volume-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Volume up</div>
+                                        <Icon icon="volume-up" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Wifi off</div>
+                                        <Icon icon="wifi-off" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                                <Card>
+                                    <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                                        <div className="card-header-title mb-2">Wifi</div>
+                                        <Icon icon="wifi" size={12}/>
+                                    </Card.Content>
+                                </Card>
+                            </Grid>
+                        </Row>
+                    </Container>
+                </Page.Content>
+            </Page.Main>
+        </Page>
+    </>,
     document.getElementById('root')
 );

From 54766abcab3645081ac9cda7ec1cfcb8b8c08e32 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 26 Nov 2020 12:53:44 +0100
Subject: [PATCH 2/5] WIP

---
 src/style/base/_variables.scss        |   7 +-
 src/style/components/_navigation.scss |   6 +-
 www/src/index.tsx                     | 755 +++++++++++++++++---------
 www/webpack.config.js                 |   2 +-
 4 files changed, 507 insertions(+), 263 deletions(-)

diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index 45b8e0e..db5c588 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -196,7 +196,6 @@ $success-color-active: color('green', 'active');
     --primary-color-hover: #{$primary-color-hover};
     --primary-color-active: #{$primary-color-active};
     --primary-color-light-background: #{$primary-color-light-background};
-    --primary-color-shadow-lighter: #{$primary-color-shadow-lighter};
 
     --danger-color: #{$danger-color};
     --danger-color-hover: #{$danger-color-hover};
@@ -223,8 +222,8 @@ $panel-gutter: 2rem;
  * 4. Page
  */
 $page-gutter: 2rem;
-$page-side-background-color: mixins.color('gray', 100);
-$page-side-border-color: mixins.color('gray', 300);
+$page-side-background-color: hsl(0, 0%, 96%);
+$page-side-border-color: hsl(0, 0%, 88%);
 $page-side-gutter: 1rem;
 $page-header-height: 120px;
 
@@ -581,7 +580,7 @@ $form-field-font-size: 1rem;
 /**
  * 9. Navigation
  */
-$vertical-navigation-border-color: mixins.color('gray', 300);
+$vertical-navigation-border-color: hsl(0, 0%, 88%);
 $vertical-navigation-active-item-background-color: rgba(0, 0, 0, .05);
 
 :root {
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
index 2b1e476..12a90a9 100644
--- a/src/style/components/_navigation.scss
+++ b/src/style/components/_navigation.scss
@@ -1,4 +1,4 @@
-@use "../base/mixins";
+@use "../base/variables";
 
 .vertical-navigation-container {
     width: 100%;
@@ -51,13 +51,13 @@
 }
 
 .navigation-primary {
-    color: mixins.color('deepPurple', 50);
+    color: variables.color('deep-purple', 'background');
 
     .vertical-navigation-list-item {
         color: currentColor;
     }
 
     .vertical-navigation-divider {
-        background: var(--primary-color-shadow-lighter);
+        background: var(--primary-color-light-background);
     }
 }
diff --git a/www/src/index.tsx b/www/src/index.tsx
index f425b8f..9b9549a 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -157,17 +157,17 @@ ReactDom.render(
                 </Row>
                 <Row className="mb-8">
                     <Card>
-                        <Card.Header title="Inputs" />
+                        <Card.Header title="Inputs"/>
                         <Card.Content>
                             <FormGroup>
                                 <h5 className="text-primary">Standard input</h5>
                                 <FormLabel htmlFor="a">Username</FormLabel>
-                                <TextField id="a" />
+                                <TextField id="a"/>
                             </FormGroup>
 
                             <FormGroup>
                                 <h5>Input with floating label</h5>
-                                <TextField label="Username" />
+                                <TextField label="Username"/>
                             </FormGroup>
 
                             <FormGroup>
@@ -187,7 +187,7 @@ ReactDom.render(
 
                                     }}
                                     actions={[
-                                        <Button small variant={Variant.PRIMARY}><Icon icon="eye" /></Button>
+                                        <Button small variant={Variant.PRIMARY}><Icon icon="eye"/></Button>
                                     ]}
                                     valid={true}
                                 />
@@ -211,7 +211,7 @@ ReactDom.render(
                                     valid
                                 />
                             </FormGroup>
-                              <FormGroup>
+                            <FormGroup>
                                 <h5>Valid input</h5>
                                 <SelectField
                                     label="Valid input"
@@ -224,14 +224,15 @@ ReactDom.render(
                                     <option value="g">E</option>
                                 </SelectField>
                             </FormGroup>
-                            <TestControllable />
+                            <TestControllable/>
                         </Card.Content>
                     </Card>
-                    <Card>
-                        <Card.Header title="Tags" />
+                </Row>
+                <Row className="mb-8">
+                        <Card>
+                        <Card.Header title="Tags"/>
                         <Card.Content>
-                            test text
-                            <Tag variant={Variant.PRIMARY}>Primary</Tag>
+                            <Tag className="mb-4" variant={Variant.PRIMARY}>Primary</Tag>
                             <Tag variant={Variant.DANGER}>Danger</Tag>
                             <Tag variant={Variant.RED}>Rood</Tag>
                             <Tag variant={Variant.PINK}>Roze</Tag>
@@ -256,1465 +257,1709 @@ ReactDom.render(
                 <Row>
                     <Grid columns={10} gap={4}>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Activity</div>
                                 <Icon icon="activity" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Alert circle</div>
                                 <Icon icon="alert-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Alert triangle</div>
                                 <Icon icon="alert-triangle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Archive</div>
                                 <Icon icon="archive" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow left</div>
                                 <Icon icon="arrow-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow circle down</div>
                                 <Icon icon="arrow-circle-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow circle left</div>
                                 <Icon icon="arrow-circle-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow circle right</div>
                                 <Icon icon="arrow-circle-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow circle up</div>
                                 <Icon icon="arrow-circle-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sort down</div>
                                 <Icon icon="sort-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sort down</div>
                                 <Icon icon="arrow-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow right</div>
                                 <Icon icon="arrow-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow alt left</div>
                                 <Icon icon="arrow-alt-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow alt down</div>
                                 <Icon icon="arrow-alt-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow alt right</div>
                                 <Icon icon="arrow-alt-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow alt up</div>
                                 <Icon icon="arrow-alt-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sort left</div>
                                 <Icon icon="sort-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sort right</div>
                                 <Icon icon="sort-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sort up</div>
                                 <Icon icon="sort-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Arrow up</div>
                                 <Icon icon="arrow-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">chevron-double down</div>
                                 <Icon icon="chevron-double-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">chevron-double left</div>
                                 <Icon icon="chevron-double-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">chevron-double right</div>
                                 <Icon icon="chevron-double-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">chevron-double up</div>
                                 <Icon icon="chevron-double-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">At</div>
                                 <Icon icon="at" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Attach 2</div>
                                 <Icon icon="attach-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Attach</div>
                                 <Icon icon="attach" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Award</div>
                                 <Icon icon="award" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Backspace</div>
                                 <Icon icon="backspace" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bar chart 2</div>
                                 <Icon icon="bar-chart-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bar chart</div>
                                 <Icon icon="bar-chart" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Battery</div>
                                 <Icon icon="battery" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Behance</div>
                                 <Icon icon="behance" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bell off</div>
                                 <Icon icon="bell-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bell</div>
                                 <Icon icon="bell" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bluetooth</div>
                                 <Icon icon="bluetooth" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Book open</div>
                                 <Icon icon="book-open" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Book</div>
                                 <Icon icon="book" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bookmark</div>
                                 <Icon icon="bookmark" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Briefcase</div>
                                 <Icon icon="briefcase" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Browser</div>
                                 <Icon icon="browser" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Brush</div>
                                 <Icon icon="brush" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Bulb</div>
                                 <Icon icon="bulb" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Calendar</div>
                                 <Icon icon="calendar" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Camera</div>
                                 <Icon icon="camera" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Car</div>
                                 <Icon icon="car" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Cast</div>
                                 <Icon icon="cast" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Charging</div>
                                 <Icon icon="charging" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Checkmark circle 2</div>
                                 <Icon icon="checkmark-circle-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Checkmark circle</div>
                                 <Icon icon="checkmark-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Checkmark</div>
                                 <Icon icon="checkmark" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Checkmark square 2</div>
                                 <Icon icon="checkmark-square-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Checkmark square</div>
                                 <Icon icon="checkmark-square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Chevron down</div>
                                 <Icon icon="chevron-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Chevron left</div>
                                 <Icon icon="chevron-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Chevron right</div>
                                 <Icon icon="chevron-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Chevron up</div>
                                 <Icon icon="chevron-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Clipboard</div>
                                 <Icon icon="clipboard" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Clock</div>
                                 <Icon icon="clock" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Close circle</div>
                                 <Icon icon="close-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Close</div>
                                 <Icon icon="close" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Close square</div>
                                 <Icon icon="close-square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Cloud download</div>
                                 <Icon icon="cloud-download" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Cloud upload</div>
                                 <Icon icon="cloud-upload" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Code download</div>
                                 <Icon icon="code-download" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Code</div>
                                 <Icon icon="code" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Collapse</div>
                                 <Icon icon="collapse" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Color palette</div>
                                 <Icon icon="color-palette" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Color picker</div>
                                 <Icon icon="color-picker" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Compass</div>
                                 <Icon icon="compass" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Copy</div>
                                 <Icon icon="copy" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner down left</div>
                                 <Icon icon="corner-down-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner down right</div>
                                 <Icon icon="corner-down-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner left down</div>
                                 <Icon icon="corner-left-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner left up</div>
                                 <Icon icon="corner-left-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner right down</div>
                                 <Icon icon="corner-right-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner right up</div>
                                 <Icon icon="corner-right-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner up left</div>
                                 <Icon icon="corner-up-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Corner up right</div>
                                 <Icon icon="corner-up-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Credit card</div>
                                 <Icon icon="credit-card" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Crop</div>
                                 <Icon icon="crop" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Cube</div>
                                 <Icon icon="cube" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Diagonal arrow left down</div>
                                 <Icon icon="diagonal-arrow-left-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Diagonal arrow left up</div>
                                 <Icon icon="diagonal-arrow-left-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Diagonal arrow right down</div>
                                 <Icon icon="diagonal-arrow-right-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Diagonal arrow right up</div>
                                 <Icon icon="diagonal-arrow-right-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Done all</div>
                                 <Icon icon="done-all" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Download</div>
                                 <Icon icon="download" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Droplet off</div>
                                 <Icon icon="droplet-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Droplet</div>
                                 <Icon icon="droplet" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Edit 2</div>
                                 <Icon icon="edit-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Edit</div>
                                 <Icon icon="edit" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Email</div>
                                 <Icon icon="email" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Expand</div>
                                 <Icon icon="expand" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">External link</div>
                                 <Icon icon="external-link" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Eye off 2</div>
                                 <Icon icon="eye-off-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Eye off</div>
                                 <Icon icon="eye-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Eye</div>
                                 <Icon icon="eye" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Facebook</div>
                                 <Icon icon="facebook" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">File add</div>
                                 <Icon icon="file-add" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">File</div>
                                 <Icon icon="file" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">File remove</div>
                                 <Icon icon="file-remove" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">File text</div>
                                 <Icon icon="file-text" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Film</div>
                                 <Icon icon="film" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Flag</div>
                                 <Icon icon="flag" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Flash off</div>
                                 <Icon icon="flash-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Flash</div>
                                 <Icon icon="flash" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Flip 2</div>
                                 <Icon icon="flip-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Flip</div>
                                 <Icon icon="flip" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Folder add</div>
                                 <Icon icon="folder-add" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Folder</div>
                                 <Icon icon="folder" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Folder remove</div>
                                 <Icon icon="folder-remove" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Funnel</div>
                                 <Icon icon="funnel" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Gift</div>
                                 <Icon icon="gift" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Github</div>
                                 <Icon icon="github" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Globe 2</div>
                                 <Icon icon="globe-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Globe</div>
                                 <Icon icon="globe" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Google</div>
                                 <Icon icon="google" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Grid</div>
                                 <Icon icon="grid" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Hard drive</div>
                                 <Icon icon="hard-drive" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Hash</div>
                                 <Icon icon="hash" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Headphones</div>
                                 <Icon icon="headphones" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Heart</div>
                                 <Icon icon="heart" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Home</div>
                                 <Icon icon="home" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Image</div>
                                 <Icon icon="image" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Inbox</div>
                                 <Icon icon="inbox" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Info</div>
                                 <Icon icon="info" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Keypad</div>
                                 <Icon icon="keypad" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Layers</div>
                                 <Icon icon="layers" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Layout</div>
                                 <Icon icon="layout" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Link 2</div>
                                 <Icon icon="link-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Link</div>
                                 <Icon icon="link" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Linkedin</div>
                                 <Icon icon="linkedin" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">List</div>
                                 <Icon icon="list" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Loader</div>
                                 <Icon icon="loader" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Lock</div>
                                 <Icon icon="lock" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Log in</div>
                                 <Icon icon="log-in" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Log out</div>
                                 <Icon icon="log-out" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Map</div>
                                 <Icon icon="map" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Maximize</div>
                                 <Icon icon="maximize" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Menu 2</div>
                                 <Icon icon="menu-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Menu arrow</div>
                                 <Icon icon="menu-arrow" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Menu</div>
                                 <Icon icon="menu" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Message circle</div>
                                 <Icon icon="message-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Message square</div>
                                 <Icon icon="message-square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Mic off</div>
                                 <Icon icon="mic-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Mic</div>
                                 <Icon icon="mic" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Minimize</div>
                                 <Icon icon="minimize" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Minus circle</div>
                                 <Icon icon="minus-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Minus</div>
                                 <Icon icon="minus" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Minus square</div>
                                 <Icon icon="minus-square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Monitor</div>
                                 <Icon icon="monitor" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Moon</div>
                                 <Icon icon="moon" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">More horizontal</div>
                                 <Icon icon="more-horizontal" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">More vertical</div>
                                 <Icon icon="more-vertical" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Move</div>
                                 <Icon icon="move" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Music</div>
                                 <Icon icon="music" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Navigation 2</div>
                                 <Icon icon="navigation-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Navigation</div>
                                 <Icon icon="navigation" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Npm</div>
                                 <Icon icon="npm" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Options 2</div>
                                 <Icon icon="options-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Options</div>
                                 <Icon icon="options" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Pantone</div>
                                 <Icon icon="pantone" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Paper plane</div>
                                 <Icon icon="paper-plane" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Pause circle</div>
                                 <Icon icon="pause-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">People</div>
                                 <Icon icon="people" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Percent</div>
                                 <Icon icon="percent" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">user add</div>
                                 <Icon icon="user-add" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">user delete</div>
                                 <Icon icon="user-delete" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">user done</div>
                                 <Icon icon="user-done" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">user</div>
                                 <Icon icon="user" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">user remove</div>
                                 <Icon icon="user-remove" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Phone call</div>
                                 <Icon icon="phone-call" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Phone missed</div>
                                 <Icon icon="phone-missed" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Phone off</div>
                                 <Icon icon="phone-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Phone</div>
                                 <Icon icon="phone" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Pie chart</div>
                                 <Icon icon="pie-chart" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Pin</div>
                                 <Icon icon="pin" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Play circle</div>
                                 <Icon icon="play-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Plus circle</div>
                                 <Icon icon="plus-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Plus</div>
                                 <Icon icon="plus" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Plus square</div>
                                 <Icon icon="plus-square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Power</div>
                                 <Icon icon="power" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Pricetags</div>
                                 <Icon icon="pricetags" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Printer</div>
                                 <Icon icon="printer" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Question mark circle</div>
                                 <Icon icon="question-mark-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Question mark</div>
                                 <Icon icon="question-mark" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Radio button off</div>
                                 <Icon icon="radio-button-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Radio button on</div>
                                 <Icon icon="radio-button-on" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Radio</div>
                                 <Icon icon="radio" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Recording</div>
                                 <Icon icon="recording" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Refresh</div>
                                 <Icon icon="refresh" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Repeat</div>
                                 <Icon icon="repeat" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Rewind left</div>
                                 <Icon icon="rewind-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Rewind right</div>
                                 <Icon icon="rewind-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Save</div>
                                 <Icon icon="save" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Scissors</div>
                                 <Icon icon="scissors" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Search</div>
                                 <Icon icon="search" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Settings 2</div>
                                 <Icon icon="settings-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Settings</div>
                                 <Icon icon="settings" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shake</div>
                                 <Icon icon="shake" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Share</div>
                                 <Icon icon="share" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shield off</div>
                                 <Icon icon="shield-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shield</div>
                                 <Icon icon="shield" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shopping bag</div>
                                 <Icon icon="shopping-bag" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shopping cart</div>
                                 <Icon icon="shopping-cart" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shuffle 2</div>
                                 <Icon icon="shuffle-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Shuffle</div>
                                 <Icon icon="shuffle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Step backwards</div>
                                 <Icon icon="step-backward" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Step forward</div>
                                 <Icon icon="step-forward" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Slash</div>
                                 <Icon icon="slash" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Smartphone</div>
                                 <Icon icon="smartphone" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Smiling face</div>
                                 <Icon icon="smiling-face" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Speaker</div>
                                 <Icon icon="speaker" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Square</div>
                                 <Icon icon="square" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Star</div>
                                 <Icon icon="star" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Stop circle</div>
                                 <Icon icon="stop-circle" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sun</div>
                                 <Icon icon="sun" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Swap</div>
                                 <Icon icon="swap" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Sync</div>
                                 <Icon icon="sync" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Text</div>
                                 <Icon icon="text" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Thermometer minus</div>
                                 <Icon icon="thermometer-minus" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Thermometer</div>
                                 <Icon icon="thermometer" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Thermometer plus</div>
                                 <Icon icon="thermometer-plus" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Toggle left</div>
                                 <Icon icon="toggle-left" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Toggle right</div>
                                 <Icon icon="toggle-right" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Trash 2</div>
                                 <Icon icon="trash-2" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Trash</div>
                                 <Icon icon="trash" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Trending down</div>
                                 <Icon icon="trending-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Trending up</div>
                                 <Icon icon="trending-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Tv</div>
                                 <Icon icon="tv" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Twitter</div>
                                 <Icon icon="twitter" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Umbrella</div>
                                 <Icon icon="umbrella" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Undo</div>
                                 <Icon icon="undo" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Unlock</div>
                                 <Icon icon="unlock" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Upload</div>
                                 <Icon icon="upload" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Video off</div>
                                 <Icon icon="video-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Video</div>
                                 <Icon icon="video" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Volume down</div>
                                 <Icon icon="volume-down" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Volume mute</div>
                                 <Icon icon="volume-mute" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Volume off</div>
                                 <Icon icon="volume-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Volume up</div>
                                 <Icon icon="volume-up" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Wifi off</div>
                                 <Icon icon="wifi-off" size={12}/>
                             </Card.Content>
                         </Card>
                         <Card>
-                            <Card.Content className="d-flex align-items-center justify-content-center flex-direction-column">
+                            <Card.Content
+                                className="d-flex align-items-center justify-content-center flex-direction-column">
                                 <div className="card-header-title mb-2">Wifi</div>
                                 <Icon icon="wifi" size={12}/>
                             </Card.Content>
@@ -1724,5 +1969,5 @@ ReactDom.render(
             </Container>
         </Page.Content>
     </Page>,
-    document.getElementById('root')
+document.getElementById('root')
 );
diff --git a/www/webpack.config.js b/www/webpack.config.js
index fc6ec09..a84f9dd 100644
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -71,7 +71,7 @@ module.exports = {
     mode: 'development',
     devServer: {
         host: 'localhost',
-        port: 3000,
+        port: 3333,
         open: true,
         historyApiFallback: true,
         publicPath: '/',

From e7ca3e14787b976262d754791344e74d17015af5 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 16 Dec 2020 19:46:23 +0100
Subject: [PATCH 3/5] Added base navigation

---
 .eslintrc                                     |    2 +-
 .../Navigation/Horizontal/Divider.tsx         |   17 +
 src/components/Navigation/Horizontal/List.tsx |   31 +
 .../Navigation/Horizontal/ListItem.tsx        |   44 +
 src/components/Navigation/Navigation.tsx      |   22 +-
 src/components/Page/Page.tsx                  |   33 +-
 src/components/Page/PageLeft.tsx              |   37 +
 src/components/Page/PageRight.tsx             |   38 +
 src/components/Page/Side.tsx                  |   12 +-
 src/style/base/_typography.scss               |    4 +
 src/style/base/_variables.scss                |    4 +-
 src/style/components/_navigation.scss         |   31 +-
 src/style/components/_page.scss               |   28 +-
 www/src/index.tsx                             | 3880 +++++++++--------
 14 files changed, 2215 insertions(+), 1968 deletions(-)
 create mode 100644 src/components/Navigation/Horizontal/Divider.tsx
 create mode 100644 src/components/Navigation/Horizontal/List.tsx
 create mode 100644 src/components/Navigation/Horizontal/ListItem.tsx
 create mode 100644 src/components/Page/PageLeft.tsx
 create mode 100644 src/components/Page/PageRight.tsx

diff --git a/.eslintrc b/.eslintrc
index f5b072b..98cbdca 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -15,7 +15,7 @@
         "node": true,
         "es6": true
     },
-    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js"],
+    "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js", "www"],
     "rules": {
         "comma-dangle": "off",
         "class-methods-use-this": "off",
diff --git a/src/components/Navigation/Horizontal/Divider.tsx b/src/components/Navigation/Horizontal/Divider.tsx
new file mode 100644
index 0000000..e24d4ad
--- /dev/null
+++ b/src/components/Navigation/Horizontal/Divider.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type NavigationDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const NavigationDivider = React.forwardRef<HTMLDivElement, NavigationDividerProps>((
+    _,
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className="vertical-navigation-divider"
+    />
+));
+
+NavigationDivider.displayName = 'NavigationDivider';
+
+export default NavigationDivider;
diff --git a/src/components/Navigation/Horizontal/List.tsx b/src/components/Navigation/Horizontal/List.tsx
new file mode 100644
index 0000000..01ed89c
--- /dev/null
+++ b/src/components/Navigation/Horizontal/List.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type NavigationListProps = React.HTMLAttributes<HTMLElement>;
+
+const NavigationList = React.forwardRef<HTMLElement, NavigationListProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <nav
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list',
+            className
+        )}
+    >
+        {children}
+    </nav>
+));
+
+NavigationList.displayName = 'NavigationList';
+NavigationList.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default NavigationList;
diff --git a/src/components/Navigation/Horizontal/ListItem.tsx b/src/components/Navigation/Horizontal/ListItem.tsx
new file mode 100644
index 0000000..d40b592
--- /dev/null
+++ b/src/components/Navigation/Horizontal/ListItem.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    icon?: React.ReactElement;
+}
+
+const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemProps>((
+    {
+        active,
+        children,
+        className,
+        icon
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'vertical-navigation-list-item',
+            active && 'active',
+            className
+        )}
+    >
+        {icon && (
+            <div className="vertical-navigation-list-item-icon">
+                {icon}
+            </div>
+        )}
+        {children}
+    </div>
+));
+
+NavigationListItem.displayName = 'NavigationListItem';
+NavigationListItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.element
+};
+
+export default NavigationListItem;
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 2809261..ae26fdd 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -15,20 +15,16 @@ const Navigation = React.forwardRef<HTMLElement, NavigationProps>((
     },
     ref
 ): React.ReactElement => (
-    <Panel
-        className="navigation"
+    <nav
+        ref={ref}
+        className={clsx(
+            'navigation-list',
+            sticky && 'navigation-sticky',
+            className
+        )}
     >
-        <nav
-            ref={ref}
-            className={clsx(
-                'navigation-list',
-                sticky && 'navigation-sticky',
-                className
-            )}
-        >
-            {children}
-        </nav>
-    </Panel>
+        {children}
+    </nav>
 ));
 
 Navigation.displayName = 'PageNavigation';
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 36936e8..19f9bb9 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,18 +1,36 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import PageHeader from '@/components/Page/Header';
 import PageContent from '@/components/Page/Content';
 import PageMain from '@/components/Page/Main';
 import Side from '@/components/Page/Side';
+import PageRight from '@/components/Page/PageRight';
+import PageLeft from '@/components/Page/PageLeft';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import PageSide from '@/components/Page/Side';
 
 export interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     sticky?: boolean;
 }
 
-const Page = ({
+export interface PageStatics {
+    Right: typeof PageRight;
+    Left: typeof PageLeft;
+    Header: typeof PageHeader;
+    Content: typeof PageContent;
+    Side: typeof PageSide;
+    Main: typeof PageMain;
+}
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Card is missing above CardStatics  properties. These will defined after the card component
+// is defined.
+// @ts-ignore
+const Page: ForwardComponentWithStatics<HTMLDivElement, PageProps, PageStatics> = React.forwardRef(({
     children,
     className,
-}: React.PropsWithChildren<PageProps>): React.ReactElement => (
+}): React.ReactElement => (
     <div
         className={clsx(
             'page',
@@ -21,11 +39,18 @@ const Page = ({
     >
         {children}
     </div>
-);
-
+));
+Page.displayName = 'Page';
+Page.Right = PageRight;
+Page.Left = PageLeft;
 Page.Header = PageHeader;
 Page.Content = PageContent;
 Page.Side = Side;
 Page.Main = PageMain;
 
+Page.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
 export default Page;
diff --git a/src/components/Page/PageLeft.tsx b/src/components/Page/PageLeft.tsx
new file mode 100644
index 0000000..865d6c7
--- /dev/null
+++ b/src/components/Page/PageLeft.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageLeft = React.forwardRef<HTMLDivElement, PageLeftProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.LEFT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageLeft.displayName = 'PageLeft';
+PageLeft.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+    variant: PropTypes.string
+}
+
+export default PageLeft;
diff --git a/src/components/Page/PageRight.tsx b/src/components/Page/PageRight.tsx
new file mode 100644
index 0000000..ea8fe3c
--- /dev/null
+++ b/src/components/Page/PageRight.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+import PageSide, { Position } from '@/components/Page/Side';
+
+export interface PageRightProps extends React.HTMLAttributes<HTMLDivElement> {
+    spaced?: boolean;
+    fixed?: boolean;
+    variant?: Variant | string;
+}
+
+const PageRight = React.forwardRef<HTMLDivElement, PageRightProps>((
+    {
+        children,
+        className,
+        fixed,
+    },
+    ref
+): React.ReactElement => (
+    <PageSide
+        ref={ref}
+        position={Position.RIGHT}
+        className={className}
+        fixed={fixed}
+    >
+        {children}
+    </PageSide>
+));
+
+PageRight.displayName = 'PageRight';
+PageRight.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+
+}
+
+export default PageRight;
diff --git a/src/components/Page/Side.tsx b/src/components/Page/Side.tsx
index a289b71..614cfd5 100644
--- a/src/components/Page/Side.tsx
+++ b/src/components/Page/Side.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Panel, Variant } from '@/components';
+import { Variant } from '@/components';
 
 export enum Position {
     LEFT = 'left',
@@ -10,7 +10,6 @@ export enum Position {
 
 export interface PageSideProps extends React.HTMLAttributes<HTMLDivElement> {
     position?: Position | string;
-    spaced?: boolean;
     fixed?: boolean;
     variant?: Variant | string;
 }
@@ -20,13 +19,11 @@ const PageSide = React.forwardRef<HTMLDivElement, PageSideProps>((
         children,
         className,
         position,
-        spaced,
         fixed,
-        variant
     },
     ref
 ): React.ReactElement => (
-    <Panel
+    <div
         ref={ref}
         className={clsx(
             'page-side',
@@ -34,11 +31,9 @@ const PageSide = React.forwardRef<HTMLDivElement, PageSideProps>((
             fixed && 'page-side-fixed',
             className
         )}
-        spaced={spaced}
-        variant={variant}
     >
         {children}
-    </Panel>
+    </div>
 ));
 
 PageSide.displayName = 'Side';
@@ -46,7 +41,6 @@ PageSide.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     position: PropTypes.string,
-    spaced: PropTypes.bool,
     fixed: PropTypes.bool,
     variant: PropTypes.string
 }
diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss
index 77e6cf6..9cd673c 100644
--- a/src/style/base/_typography.scss
+++ b/src/style/base/_typography.scss
@@ -142,3 +142,7 @@ h6 {
 .text-secondary {
     color: variables.color('gray', 'default');
 }
+
+.text-center {
+    text-align: center;
+}
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index db5c588..bba29c6 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -222,17 +222,15 @@ $panel-gutter: 2rem;
  * 4. Page
  */
 $page-gutter: 2rem;
-$page-side-background-color: hsl(0, 0%, 96%);
+$page-side-background-color: #fff;
 $page-side-border-color: hsl(0, 0%, 88%);
 $page-side-gutter: 1rem;
-$page-header-height: 120px;
 
 :root {
     --page-gutter: #{$page-gutter};
     --page-side-background-color: #{$page-side-background-color};
     --page-side-border-color: #{$page-side-border-color};
     --page-side-gutter: #{$page-side-gutter};
-    --page-header-height: #{$page-header-height}
 }
 
 /**
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
index 12a90a9..3f8f365 100644
--- a/src/style/components/_navigation.scss
+++ b/src/style/components/_navigation.scss
@@ -9,10 +9,10 @@
     position: relative;
 
     .vertical-navigation-top {
-        min-height: var(--page-header-height);
-        padding: 0 var(--base-gutter);
+        padding: var(--base-gutter);
         display: flex;
         align-items: center;
+        flex-direction: column;
     }
 
     .vertical-navigation-divider {
@@ -31,13 +31,13 @@
             color: currentColor;
             display: flex;
             padding: var(--base-gutter);
-            border-radius: var(--base-border-radius);
+            position: relative;
             font: {
                 weight: 500;
             }
 
             &:hover {
-                background: var(--vertical-navigation-active-item-background-color);
+                background: var(--vertical-navigation-hover-item-background-color);
             }
 
             .vertical-navigation-list-item-icon {
@@ -46,6 +46,27 @@
                     size: 1.1rem;
                 }
             }
+
+            &.active {
+                color: #fff;
+                background: var(--primary-color);
+                border-radius: var(--base-border-radius);
+
+                //&:before {
+                //    content: '';
+                //    position: absolute;
+                //    height: 100%;
+                //    width: 3px;
+                //    background: var(--primary-color);
+                //    border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+                //    left: 0;
+                //    top: 0;
+                //}
+            }
+
+            &:not(:last-child) {
+                margin-bottom: var(--base-gutter);
+            }
         }
     }
 }
@@ -54,7 +75,7 @@
     color: variables.color('deep-purple', 'background');
 
     .vertical-navigation-list-item {
-        color: currentColor;
+        color: #fff;
     }
 
     .vertical-navigation-divider {
diff --git a/src/style/components/_page.scss b/src/style/components/_page.scss
index a81df23..c29b3c6 100644
--- a/src/style/components/_page.scss
+++ b/src/style/components/_page.scss
@@ -2,26 +2,30 @@
 
 .page {
     display: flex;
+    flex-flow: row wrap;
 
     .page-main {
         display: flex;
         flex-direction: column;
-        flex: 1 1 100%;
+        flex: 1 1;
     }
 
     .page-header {
         border-bottom: solid 1px var(--base-border-color);
+        padding-top: var(--page-gutter);
         padding-right: var(--page-gutter);
         padding-left: var(--page-gutter);
-        height: var(--page-header-height);
-        display: flex;
-        align-items: center;
+
+        &:not(.with-title) {
+            padding-bottom: var(--page-gutter);
+        }
 
         .page-header-title {
             font-size: 2rem;
             color: variables.$base-font-color;
             font-weight: normal;
             margin: 0;
+            padding-bottom: var(--page-gutter);
         }
     }
 
@@ -30,7 +34,7 @@
     }
 
     .page-side {
-        flex: 1 1 auto;
+        flex: 0 0 auto;
         background: var(--page-side-background-color);
 
         &.page-side-right {
@@ -44,7 +48,19 @@
         &.page-side-fixed {
             align-self: flex-start;
             position: sticky;
-            top: 0; /* required */
+            top: 0;
+        }
+    }
+
+    .page-top {
+        width: 100%;
+        flex: 0 0 100%;
+        align-self: flex-start;
+        z-index: 9999;
+
+        &.page-top-sticky {
+            position: sticky;
+            top: 0;
         }
     }
 }
diff --git a/www/src/index.tsx b/www/src/index.tsx
index 9b9549a..0130513 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
 import * as ReactDom from 'react-dom';
-
 import '../../src/style/index.scss';
 import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
+import logo from '@/images/coderan/logo.svg';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
 import FormMessage from '../../src/components/Form/Message';
+import VerticalNavigation from '../../src/components/Navigation/VerticalNavigation';
 
 const TestControllable = () => {
     const [value, setValue] = useState('');
@@ -33,1941 +34,1966 @@ const TestControllable = () => {
 
 ReactDom.render(
     <Page>
-        <Page.Header title="Coderan UI"/>
-        <Page.Content>
-            <Container>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Buttons"/>
-                        <Card.Content>
-                            <Grid columns={7} gap={4} className="mb-8">
-                                <div>
-                                    <Button variant={Variant.PRIMARY}>Primary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.SECONDARY}>Secondary</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER}>Danger</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon right</Button>
-                                </div>
-                            </Grid>
-                            <h4>Button colors</h4>
-                            <Grid columns={7} gap={4} className="mb-8">
-                                <div>
-                                    <Button variant={Variant.RED} block>Rood</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PINK} block>Roze</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.PURPLE} block>Paars</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.DEEP_PURPLE} block>Diep-paars</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.INDIGO} block>Indigo</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BLUE} block>Blauw</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIGHT_BLUE} block>Lichtblauw</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.TEAL} block>Teal</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.GREEN} block>Groen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIGHT_GREEN} block>Lichtgroen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.LIME} block>Limoen</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.YELLOW} block>Geel</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.AMBER} block>Amber</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.ORANGE} block>Oranje</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BROWN} block>Bruin</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.GRAY} block>Grijs</Button>
-                                </div>
-                                <div>
-                                    <Button variant={Variant.BLUE_GRAY} block>Blauwgrijs</Button>
-                                </div>
-                            </Grid>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Card className="mb-8">
-                        <Card.Header title="Grid"/>
-                        <Card.Content>
-                            <Container fluid>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/1</Col>
-                                </Row>
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/2</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/2</Col>
-                                </Row>
+        <Page.Left fixed>
+            <VerticalNavigation>
+                <VerticalNavigation.Top className="justify-content-center mb-4">
+                    <img src={logo} width={160} className="mb-8" />
+                    <Button
+                        iconLeft={<Icon icon="" />}
+                        variant={Variant.PRIMARY_GHOST}
+                        block
+                    >
+                        Download now
+                    </Button>
+                </VerticalNavigation.Top>
+                <VerticalNavigation.Divider />
+                <VerticalNavigation.List>
+                    <VerticalNavigation.Item active icon={<Icon icon="home" />}>
+                        Home
+                    </VerticalNavigation.Item>
+                    <VerticalNavigation.Item icon={<Icon icon="user" />}>
+                        User
+                    </VerticalNavigation.Item>
+                </VerticalNavigation.List>
+            </VerticalNavigation>
+        </Page.Left>
+        <Page.Main>
+            <Page.Header title="Demo"/>
+            <Page.Content>
+                <Container>
+                    <Row>
+                        <Card className="mb-8">
+                            <Card.Header title="Buttons"/>
+                            <Card.Content>
+                                <Grid columns={7} gap={4} className="mb-8">
+                                    <div>
+                                        <Button variant={Variant.PRIMARY}>Primary</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.SECONDARY}>Secondary</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DANGER}>Danger</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY_GHOST}>Primary ghost</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DANGER_GHOST}>Danger ghost</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY} iconLeft={<Icon icon="home"/>}>Icon left</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PRIMARY} iconRight={<Icon icon="user"/>}>Icon right</Button>
+                                    </div>
+                                </Grid>
+                                <h4>Button colors</h4>
+                                <Grid columns={7} gap={4} className="mb-8">
+                                    <div>
+                                        <Button variant={Variant.RED} block>Rood</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PINK} block>Roze</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.PURPLE} block>Paars</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.DEEP_PURPLE} block>Diep-paars</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.INDIGO} block>Indigo</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BLUE} block>Blauw</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIGHT_BLUE} block>Lichtblauw</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.TEAL} block>Teal</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.GREEN} block>Groen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIGHT_GREEN} block>Lichtgroen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.LIME} block>Limoen</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.YELLOW} block>Geel</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.AMBER} block>Amber</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.ORANGE} block>Oranje</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BROWN} block>Bruin</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.GRAY} block>Grijs</Button>
+                                    </div>
+                                    <div>
+                                        <Button variant={Variant.BLUE_GRAY} block>Blauwgrijs</Button>
+                                    </div>
+                                </Grid>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row>
+                        <Card className="mb-8">
+                            <Card.Header title="Grid"/>
+                            <Card.Content>
+                                <Container fluid>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/1</Col>
+                                    </Row>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/2</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/2</Col>
+                                    </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                </Row>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                    </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/3</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                </Row>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/3</Col>
+                                        <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                    </Row>
 
-                                <Row className="mb-8">
-                                    <Col className="py-4 background-primary-light">Col 1/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 2/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 3/4</Col>
-                                    <Col className="py-4 background-primary-light">Col 4/4</Col>
-                                </Row>
-                            </Container>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row className="mb-8">
-                    <Card>
-                        <Card.Header title="Inputs"/>
-                        <Card.Content>
-                            <FormGroup>
-                                <h5 className="text-primary">Standard input</h5>
-                                <FormLabel htmlFor="a">Username</FormLabel>
-                                <TextField id="a"/>
-                            </FormGroup>
+                                    <Row className="mb-8">
+                                        <Col className="py-4 background-primary-light">Col 1/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 2/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 3/4</Col>
+                                        <Col className="py-4 background-primary-light">Col 4/4</Col>
+                                    </Row>
+                                </Container>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row className="mb-8">
+                        <Card>
+                            <Card.Header title="Inputs"/>
+                            <Card.Content>
+                                <FormGroup>
+                                    <h5 className="text-primary">Standard input</h5>
+                                    <FormLabel htmlFor="a">Username</FormLabel>
+                                    <TextField id="a"/>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with floating label</h5>
-                                <TextField label="Username"/>
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Input with floating label</h5>
+                                    <TextField label="Username"/>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with default value</h5>
-                                <TextField
-                                    label="With default value"
-                                    value="Hello world"
-                                />
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Input with default value</h5>
+                                    <TextField
+                                        label="With default value"
+                                        value="Hello world"
+                                    />
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Input with actions</h5>
-                                <TextField
-                                    label="Username"
-                                    type="password"
-                                    onChange={() => {
+                                <FormGroup>
+                                    <h5>Input with actions</h5>
+                                    <TextField
+                                        label="Username"
+                                        type="password"
+                                        onChange={() => {
 
-                                    }}
-                                    actions={[
-                                        <Button small variant={Variant.PRIMARY}><Icon icon="eye"/></Button>
-                                    ]}
-                                    valid={true}
-                                />
-                            </FormGroup>
+                                        }}
+                                        actions={[
+                                            <Button small variant={Variant.PRIMARY}><Icon icon="eye"/></Button>
+                                        ]}
+                                        valid={true}
+                                    />
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Invalid input</h5>
-                                <TextField
-                                    label="Invalid input"
-                                    valid={false}
-                                />
-                                <FormMessage valid={false}>
-                                    Input is invalid
-                                </FormMessage>
-                            </FormGroup>
+                                <FormGroup>
+                                    <h5>Invalid input</h5>
+                                    <TextField
+                                        label="Invalid input"
+                                        valid={false}
+                                    />
+                                    <FormMessage valid={false}>
+                                        Input is invalid
+                                    </FormMessage>
+                                </FormGroup>
 
-                            <FormGroup>
-                                <h5>Valid input</h5>
-                                <TextField
-                                    label="Valid input"
-                                    valid
-                                />
-                            </FormGroup>
-                            <FormGroup>
-                                <h5>Valid input</h5>
-                                <SelectField
-                                    label="Valid input"
-                                    valid
-                                >
-                                    <option value="b">A</option>
-                                    <option value="d">B</option>
-                                    <option value="e">C</option>
-                                    <option value="f">D</option>
-                                    <option value="g">E</option>
-                                </SelectField>
-                            </FormGroup>
-                            <TestControllable/>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row className="mb-8">
-                        <Card>
-                        <Card.Header title="Tags"/>
-                        <Card.Content>
-                            <Tag className="mb-4" variant={Variant.PRIMARY}>Primary</Tag>
-                            <Tag variant={Variant.DANGER}>Danger</Tag>
-                            <Tag variant={Variant.RED}>Rood</Tag>
-                            <Tag variant={Variant.PINK}>Roze</Tag>
-                            <Tag variant={Variant.PURPLE}>Paars</Tag>
-                            <Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
-                            <Tag variant={Variant.INDIGO}>Indigo</Tag>
-                            <Tag variant={Variant.BLUE}>Blauw</Tag>
-                            <Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
-                            <Tag variant={Variant.TEAL}>Teal</Tag>
-                            <Tag variant={Variant.GREEN}>Groen</Tag>
-                            <Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
-                            <Tag variant={Variant.LIME}>Limoen</Tag>
-                            <Tag variant={Variant.YELLOW}>Geel</Tag>
-                            <Tag variant={Variant.AMBER}>Amber</Tag>
-                            <Tag variant={Variant.ORANGE}>Oranje</Tag>
-                            <Tag variant={Variant.BROWN}>Bruin</Tag>
-                            <Tag variant={Variant.GRAY}>Grijs</Tag>
-                            <Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
-                        </Card.Content>
-                    </Card>
-                </Row>
-                <Row>
-                    <Grid columns={10} gap={4}>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Activity</div>
-                                <Icon icon="activity" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert circle</div>
-                                <Icon icon="alert-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Alert triangle</div>
-                                <Icon icon="alert-triangle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Archive</div>
-                                <Icon icon="archive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow left</div>
-                                <Icon icon="arrow-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle down</div>
-                                <Icon icon="arrow-circle-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle left</div>
-                                <Icon icon="arrow-circle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle right</div>
-                                <Icon icon="arrow-circle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow circle up</div>
-                                <Icon icon="arrow-circle-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="sort-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort down</div>
-                                <Icon icon="arrow-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow right</div>
-                                <Icon icon="arrow-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt left</div>
-                                <Icon icon="arrow-alt-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt down</div>
-                                <Icon icon="arrow-alt-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt right</div>
-                                <Icon icon="arrow-alt-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow alt up</div>
-                                <Icon icon="arrow-alt-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort left</div>
-                                <Icon icon="sort-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort right</div>
-                                <Icon icon="sort-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sort up</div>
-                                <Icon icon="sort-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Arrow up</div>
-                                <Icon icon="arrow-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double down</div>
-                                <Icon icon="chevron-double-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double left</div>
-                                <Icon icon="chevron-double-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double right</div>
-                                <Icon icon="chevron-double-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">chevron-double up</div>
-                                <Icon icon="chevron-double-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">At</div>
-                                <Icon icon="at" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach 2</div>
-                                <Icon icon="attach-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Attach</div>
-                                <Icon icon="attach" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Award</div>
-                                <Icon icon="award" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Backspace</div>
-                                <Icon icon="backspace" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart 2</div>
-                                <Icon icon="bar-chart-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bar chart</div>
-                                <Icon icon="bar-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Battery</div>
-                                <Icon icon="battery" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Behance</div>
-                                <Icon icon="behance" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell off</div>
-                                <Icon icon="bell-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bell</div>
-                                <Icon icon="bell" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bluetooth</div>
-                                <Icon icon="bluetooth" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book open</div>
-                                <Icon icon="book-open" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Book</div>
-                                <Icon icon="book" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bookmark</div>
-                                <Icon icon="bookmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Briefcase</div>
-                                <Icon icon="briefcase" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Browser</div>
-                                <Icon icon="browser" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Brush</div>
-                                <Icon icon="brush" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Bulb</div>
-                                <Icon icon="bulb" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Calendar</div>
-                                <Icon icon="calendar" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Camera</div>
-                                <Icon icon="camera" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Car</div>
-                                <Icon icon="car" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cast</div>
-                                <Icon icon="cast" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Charging</div>
-                                <Icon icon="charging" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle 2</div>
-                                <Icon icon="checkmark-circle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark circle</div>
-                                <Icon icon="checkmark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark</div>
-                                <Icon icon="checkmark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square 2</div>
-                                <Icon icon="checkmark-square-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Checkmark square</div>
-                                <Icon icon="checkmark-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron down</div>
-                                <Icon icon="chevron-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron left</div>
-                                <Icon icon="chevron-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron right</div>
-                                <Icon icon="chevron-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Chevron up</div>
-                                <Icon icon="chevron-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clipboard</div>
-                                <Icon icon="clipboard" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Clock</div>
-                                <Icon icon="clock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close circle</div>
-                                <Icon icon="close-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close</div>
-                                <Icon icon="close" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Close square</div>
-                                <Icon icon="close-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud download</div>
-                                <Icon icon="cloud-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cloud upload</div>
-                                <Icon icon="cloud-upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code download</div>
-                                <Icon icon="code-download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Code</div>
-                                <Icon icon="code" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Collapse</div>
-                                <Icon icon="collapse" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color palette</div>
-                                <Icon icon="color-palette" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Color picker</div>
-                                <Icon icon="color-picker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Compass</div>
-                                <Icon icon="compass" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Copy</div>
-                                <Icon icon="copy" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down left</div>
-                                <Icon icon="corner-down-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner down right</div>
-                                <Icon icon="corner-down-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left down</div>
-                                <Icon icon="corner-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner left up</div>
-                                <Icon icon="corner-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right down</div>
-                                <Icon icon="corner-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner right up</div>
-                                <Icon icon="corner-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up left</div>
-                                <Icon icon="corner-up-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Corner up right</div>
-                                <Icon icon="corner-up-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Credit card</div>
-                                <Icon icon="credit-card" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Crop</div>
-                                <Icon icon="crop" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Cube</div>
-                                <Icon icon="cube" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left down</div>
-                                <Icon icon="diagonal-arrow-left-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow left up</div>
-                                <Icon icon="diagonal-arrow-left-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right down</div>
-                                <Icon icon="diagonal-arrow-right-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Diagonal arrow right up</div>
-                                <Icon icon="diagonal-arrow-right-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Done all</div>
-                                <Icon icon="done-all" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Download</div>
-                                <Icon icon="download" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet off</div>
-                                <Icon icon="droplet-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Droplet</div>
-                                <Icon icon="droplet" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit 2</div>
-                                <Icon icon="edit-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Edit</div>
-                                <Icon icon="edit" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Email</div>
-                                <Icon icon="email" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Expand</div>
-                                <Icon icon="expand" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">External link</div>
-                                <Icon icon="external-link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off 2</div>
-                                <Icon icon="eye-off-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye off</div>
-                                <Icon icon="eye-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Eye</div>
-                                <Icon icon="eye" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Facebook</div>
-                                <Icon icon="facebook" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File add</div>
-                                <Icon icon="file-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File</div>
-                                <Icon icon="file" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File remove</div>
-                                <Icon icon="file-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">File text</div>
-                                <Icon icon="file-text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Film</div>
-                                <Icon icon="film" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flag</div>
-                                <Icon icon="flag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash off</div>
-                                <Icon icon="flash-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flash</div>
-                                <Icon icon="flash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip 2</div>
-                                <Icon icon="flip-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Flip</div>
-                                <Icon icon="flip" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder add</div>
-                                <Icon icon="folder-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder</div>
-                                <Icon icon="folder" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Folder remove</div>
-                                <Icon icon="folder-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Funnel</div>
-                                <Icon icon="funnel" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Gift</div>
-                                <Icon icon="gift" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Github</div>
-                                <Icon icon="github" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe 2</div>
-                                <Icon icon="globe-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Globe</div>
-                                <Icon icon="globe" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Google</div>
-                                <Icon icon="google" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Grid</div>
-                                <Icon icon="grid" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hard drive</div>
-                                <Icon icon="hard-drive" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Hash</div>
-                                <Icon icon="hash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Headphones</div>
-                                <Icon icon="headphones" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Heart</div>
-                                <Icon icon="heart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Home</div>
-                                <Icon icon="home" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Image</div>
-                                <Icon icon="image" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Inbox</div>
-                                <Icon icon="inbox" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Info</div>
-                                <Icon icon="info" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Keypad</div>
-                                <Icon icon="keypad" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layers</div>
-                                <Icon icon="layers" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Layout</div>
-                                <Icon icon="layout" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link 2</div>
-                                <Icon icon="link-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Link</div>
-                                <Icon icon="link" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Linkedin</div>
-                                <Icon icon="linkedin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">List</div>
-                                <Icon icon="list" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Loader</div>
-                                <Icon icon="loader" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Lock</div>
-                                <Icon icon="lock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log in</div>
-                                <Icon icon="log-in" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Log out</div>
-                                <Icon icon="log-out" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Map</div>
-                                <Icon icon="map" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Maximize</div>
-                                <Icon icon="maximize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu 2</div>
-                                <Icon icon="menu-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu arrow</div>
-                                <Icon icon="menu-arrow" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Menu</div>
-                                <Icon icon="menu" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message circle</div>
-                                <Icon icon="message-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Message square</div>
-                                <Icon icon="message-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic off</div>
-                                <Icon icon="mic-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Mic</div>
-                                <Icon icon="mic" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minimize</div>
-                                <Icon icon="minimize" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus circle</div>
-                                <Icon icon="minus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus</div>
-                                <Icon icon="minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Minus square</div>
-                                <Icon icon="minus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Monitor</div>
-                                <Icon icon="monitor" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Moon</div>
-                                <Icon icon="moon" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More horizontal</div>
-                                <Icon icon="more-horizontal" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">More vertical</div>
-                                <Icon icon="more-vertical" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Move</div>
-                                <Icon icon="move" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Music</div>
-                                <Icon icon="music" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation 2</div>
-                                <Icon icon="navigation-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Navigation</div>
-                                <Icon icon="navigation" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Npm</div>
-                                <Icon icon="npm" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options 2</div>
-                                <Icon icon="options-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Options</div>
-                                <Icon icon="options" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pantone</div>
-                                <Icon icon="pantone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Paper plane</div>
-                                <Icon icon="paper-plane" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pause circle</div>
-                                <Icon icon="pause-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">People</div>
-                                <Icon icon="people" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Percent</div>
-                                <Icon icon="percent" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user add</div>
-                                <Icon icon="user-add" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user delete</div>
-                                <Icon icon="user-delete" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user done</div>
-                                <Icon icon="user-done" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user</div>
-                                <Icon icon="user" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">user remove</div>
-                                <Icon icon="user-remove" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone call</div>
-                                <Icon icon="phone-call" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone missed</div>
-                                <Icon icon="phone-missed" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone off</div>
-                                <Icon icon="phone-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Phone</div>
-                                <Icon icon="phone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pie chart</div>
-                                <Icon icon="pie-chart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pin</div>
-                                <Icon icon="pin" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Play circle</div>
-                                <Icon icon="play-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus circle</div>
-                                <Icon icon="plus-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus</div>
-                                <Icon icon="plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Plus square</div>
-                                <Icon icon="plus-square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Power</div>
-                                <Icon icon="power" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Pricetags</div>
-                                <Icon icon="pricetags" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Printer</div>
-                                <Icon icon="printer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark circle</div>
-                                <Icon icon="question-mark-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Question mark</div>
-                                <Icon icon="question-mark" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button off</div>
-                                <Icon icon="radio-button-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio button on</div>
-                                <Icon icon="radio-button-on" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Radio</div>
-                                <Icon icon="radio" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Recording</div>
-                                <Icon icon="recording" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Refresh</div>
-                                <Icon icon="refresh" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Repeat</div>
-                                <Icon icon="repeat" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind left</div>
-                                <Icon icon="rewind-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Rewind right</div>
-                                <Icon icon="rewind-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Save</div>
-                                <Icon icon="save" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Scissors</div>
-                                <Icon icon="scissors" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Search</div>
-                                <Icon icon="search" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings 2</div>
-                                <Icon icon="settings-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Settings</div>
-                                <Icon icon="settings" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shake</div>
-                                <Icon icon="shake" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Share</div>
-                                <Icon icon="share" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield off</div>
-                                <Icon icon="shield-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shield</div>
-                                <Icon icon="shield" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping bag</div>
-                                <Icon icon="shopping-bag" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shopping cart</div>
-                                <Icon icon="shopping-cart" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle 2</div>
-                                <Icon icon="shuffle-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Shuffle</div>
-                                <Icon icon="shuffle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step backwards</div>
-                                <Icon icon="step-backward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Step forward</div>
-                                <Icon icon="step-forward" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Slash</div>
-                                <Icon icon="slash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smartphone</div>
-                                <Icon icon="smartphone" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Smiling face</div>
-                                <Icon icon="smiling-face" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Speaker</div>
-                                <Icon icon="speaker" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Square</div>
-                                <Icon icon="square" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Star</div>
-                                <Icon icon="star" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Stop circle</div>
-                                <Icon icon="stop-circle" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sun</div>
-                                <Icon icon="sun" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Swap</div>
-                                <Icon icon="swap" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Sync</div>
-                                <Icon icon="sync" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Text</div>
-                                <Icon icon="text" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer minus</div>
-                                <Icon icon="thermometer-minus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer</div>
-                                <Icon icon="thermometer" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Thermometer plus</div>
-                                <Icon icon="thermometer-plus" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle left</div>
-                                <Icon icon="toggle-left" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Toggle right</div>
-                                <Icon icon="toggle-right" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash 2</div>
-                                <Icon icon="trash-2" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trash</div>
-                                <Icon icon="trash" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending down</div>
-                                <Icon icon="trending-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Trending up</div>
-                                <Icon icon="trending-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Tv</div>
-                                <Icon icon="tv" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Twitter</div>
-                                <Icon icon="twitter" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Umbrella</div>
-                                <Icon icon="umbrella" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Undo</div>
-                                <Icon icon="undo" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Unlock</div>
-                                <Icon icon="unlock" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Upload</div>
-                                <Icon icon="upload" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video off</div>
-                                <Icon icon="video-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Video</div>
-                                <Icon icon="video" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume down</div>
-                                <Icon icon="volume-down" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume mute</div>
-                                <Icon icon="volume-mute" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume off</div>
-                                <Icon icon="volume-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Volume up</div>
-                                <Icon icon="volume-up" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi off</div>
-                                <Icon icon="wifi-off" size={12}/>
-                            </Card.Content>
-                        </Card>
-                        <Card>
-                            <Card.Content
-                                className="d-flex align-items-center justify-content-center flex-direction-column">
-                                <div className="card-header-title mb-2">Wifi</div>
-                                <Icon icon="wifi" size={12}/>
-                            </Card.Content>
-                        </Card>
-                    </Grid>
-                </Row>
-            </Container>
-        </Page.Content>
+                                <FormGroup>
+                                    <h5>Valid input</h5>
+                                    <TextField
+                                        label="Valid input"
+                                        valid
+                                    />
+                                </FormGroup>
+                                <FormGroup>
+                                    <h5>Valid input</h5>
+                                    <SelectField
+                                        label="Valid input"
+                                        valid
+                                    >
+                                        <option value="b">A</option>
+                                        <option value="d">B</option>
+                                        <option value="e">C</option>
+                                        <option value="f">D</option>
+                                        <option value="g">E</option>
+                                    </SelectField>
+                                </FormGroup>
+                                <TestControllable/>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row className="mb-8">
+                        <Card>
+                            <Card.Header title="Tags"/>
+                            <Card.Content>
+                                <Tag className="mb-4" variant={Variant.PRIMARY}>Primary</Tag>
+                                <Tag variant={Variant.DANGER}>Danger</Tag>
+                                <Tag variant={Variant.RED}>Rood</Tag>
+                                <Tag variant={Variant.PINK}>Roze</Tag>
+                                <Tag variant={Variant.PURPLE}>Paars</Tag>
+                                <Tag variant={Variant.DEEP_PURPLE}>Diep-paars</Tag>
+                                <Tag variant={Variant.INDIGO}>Indigo</Tag>
+                                <Tag variant={Variant.BLUE}>Blauw</Tag>
+                                <Tag variant={Variant.LIGHT_BLUE}>Lichtblauw</Tag>
+                                <Tag variant={Variant.TEAL}>Teal</Tag>
+                                <Tag variant={Variant.GREEN}>Groen</Tag>
+                                <Tag variant={Variant.LIGHT_GREEN}>Lichtgroen</Tag>
+                                <Tag variant={Variant.LIME}>Limoen</Tag>
+                                <Tag variant={Variant.YELLOW}>Geel</Tag>
+                                <Tag variant={Variant.AMBER}>Amber</Tag>
+                                <Tag variant={Variant.ORANGE}>Oranje</Tag>
+                                <Tag variant={Variant.BROWN}>Bruin</Tag>
+                                <Tag variant={Variant.GRAY}>Grijs</Tag>
+                                <Tag variant={Variant.BLUE_GRAY}>Blauwgrijs</Tag>
+                            </Card.Content>
+                        </Card>
+                    </Row>
+                    <Row>
+                        <Grid columns={10} gap={4}>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Activity</div>
+                                    <Icon icon="activity" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Alert circle</div>
+                                    <Icon icon="alert-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Alert triangle</div>
+                                    <Icon icon="alert-triangle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Archive</div>
+                                    <Icon icon="archive" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow left</div>
+                                    <Icon icon="arrow-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle down</div>
+                                    <Icon icon="arrow-circle-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle left</div>
+                                    <Icon icon="arrow-circle-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle right</div>
+                                    <Icon icon="arrow-circle-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow circle up</div>
+                                    <Icon icon="arrow-circle-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort down</div>
+                                    <Icon icon="sort-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort down</div>
+                                    <Icon icon="arrow-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow right</div>
+                                    <Icon icon="arrow-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt left</div>
+                                    <Icon icon="arrow-alt-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt down</div>
+                                    <Icon icon="arrow-alt-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt right</div>
+                                    <Icon icon="arrow-alt-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow alt up</div>
+                                    <Icon icon="arrow-alt-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort left</div>
+                                    <Icon icon="sort-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort right</div>
+                                    <Icon icon="sort-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sort up</div>
+                                    <Icon icon="sort-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Arrow up</div>
+                                    <Icon icon="arrow-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double down</div>
+                                    <Icon icon="chevron-double-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double left</div>
+                                    <Icon icon="chevron-double-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double right</div>
+                                    <Icon icon="chevron-double-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">chevron-double up</div>
+                                    <Icon icon="chevron-double-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">At</div>
+                                    <Icon icon="at" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Attach 2</div>
+                                    <Icon icon="attach-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Attach</div>
+                                    <Icon icon="attach" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Award</div>
+                                    <Icon icon="award" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Backspace</div>
+                                    <Icon icon="backspace" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bar chart 2</div>
+                                    <Icon icon="bar-chart-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bar chart</div>
+                                    <Icon icon="bar-chart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Battery</div>
+                                    <Icon icon="battery" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Behance</div>
+                                    <Icon icon="behance" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bell off</div>
+                                    <Icon icon="bell-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bell</div>
+                                    <Icon icon="bell" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bluetooth</div>
+                                    <Icon icon="bluetooth" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Book open</div>
+                                    <Icon icon="book-open" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Book</div>
+                                    <Icon icon="book" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bookmark</div>
+                                    <Icon icon="bookmark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Briefcase</div>
+                                    <Icon icon="briefcase" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Browser</div>
+                                    <Icon icon="browser" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Brush</div>
+                                    <Icon icon="brush" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Bulb</div>
+                                    <Icon icon="bulb" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Calendar</div>
+                                    <Icon icon="calendar" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Camera</div>
+                                    <Icon icon="camera" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Car</div>
+                                    <Icon icon="car" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cast</div>
+                                    <Icon icon="cast" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Charging</div>
+                                    <Icon icon="charging" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark circle 2</div>
+                                    <Icon icon="checkmark-circle-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark circle</div>
+                                    <Icon icon="checkmark-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark</div>
+                                    <Icon icon="checkmark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark square 2</div>
+                                    <Icon icon="checkmark-square-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Checkmark square</div>
+                                    <Icon icon="checkmark-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron down</div>
+                                    <Icon icon="chevron-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron left</div>
+                                    <Icon icon="chevron-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron right</div>
+                                    <Icon icon="chevron-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Chevron up</div>
+                                    <Icon icon="chevron-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Clipboard</div>
+                                    <Icon icon="clipboard" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Clock</div>
+                                    <Icon icon="clock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close circle</div>
+                                    <Icon icon="close-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close</div>
+                                    <Icon icon="close" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Close square</div>
+                                    <Icon icon="close-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cloud download</div>
+                                    <Icon icon="cloud-download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cloud upload</div>
+                                    <Icon icon="cloud-upload" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Code download</div>
+                                    <Icon icon="code-download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Code</div>
+                                    <Icon icon="code" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Collapse</div>
+                                    <Icon icon="collapse" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Color palette</div>
+                                    <Icon icon="color-palette" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Color picker</div>
+                                    <Icon icon="color-picker" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Compass</div>
+                                    <Icon icon="compass" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Copy</div>
+                                    <Icon icon="copy" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner down left</div>
+                                    <Icon icon="corner-down-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner down right</div>
+                                    <Icon icon="corner-down-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner left down</div>
+                                    <Icon icon="corner-left-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner left up</div>
+                                    <Icon icon="corner-left-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner right down</div>
+                                    <Icon icon="corner-right-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner right up</div>
+                                    <Icon icon="corner-right-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner up left</div>
+                                    <Icon icon="corner-up-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Corner up right</div>
+                                    <Icon icon="corner-up-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Credit card</div>
+                                    <Icon icon="credit-card" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Crop</div>
+                                    <Icon icon="crop" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Cube</div>
+                                    <Icon icon="cube" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow left down</div>
+                                    <Icon icon="diagonal-arrow-left-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow left up</div>
+                                    <Icon icon="diagonal-arrow-left-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow right down</div>
+                                    <Icon icon="diagonal-arrow-right-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Diagonal arrow right up</div>
+                                    <Icon icon="diagonal-arrow-right-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Done all</div>
+                                    <Icon icon="done-all" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Download</div>
+                                    <Icon icon="download" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Droplet off</div>
+                                    <Icon icon="droplet-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Droplet</div>
+                                    <Icon icon="droplet" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Edit 2</div>
+                                    <Icon icon="edit-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Edit</div>
+                                    <Icon icon="edit" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Email</div>
+                                    <Icon icon="email" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Expand</div>
+                                    <Icon icon="expand" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">External link</div>
+                                    <Icon icon="external-link" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye off 2</div>
+                                    <Icon icon="eye-off-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye off</div>
+                                    <Icon icon="eye-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Eye</div>
+                                    <Icon icon="eye" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Facebook</div>
+                                    <Icon icon="facebook" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File add</div>
+                                    <Icon icon="file-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File</div>
+                                    <Icon icon="file" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File remove</div>
+                                    <Icon icon="file-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">File text</div>
+                                    <Icon icon="file-text" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Film</div>
+                                    <Icon icon="film" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flag</div>
+                                    <Icon icon="flag" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flash off</div>
+                                    <Icon icon="flash-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flash</div>
+                                    <Icon icon="flash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flip 2</div>
+                                    <Icon icon="flip-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Flip</div>
+                                    <Icon icon="flip" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder add</div>
+                                    <Icon icon="folder-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder</div>
+                                    <Icon icon="folder" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Folder remove</div>
+                                    <Icon icon="folder-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Funnel</div>
+                                    <Icon icon="funnel" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Gift</div>
+                                    <Icon icon="gift" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Github</div>
+                                    <Icon icon="github" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Globe 2</div>
+                                    <Icon icon="globe-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Globe</div>
+                                    <Icon icon="globe" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Google</div>
+                                    <Icon icon="google" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Grid</div>
+                                    <Icon icon="grid" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Hard drive</div>
+                                    <Icon icon="hard-drive" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Hash</div>
+                                    <Icon icon="hash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Headphones</div>
+                                    <Icon icon="headphones" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Heart</div>
+                                    <Icon icon="heart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Home</div>
+                                    <Icon icon="home" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Image</div>
+                                    <Icon icon="image" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Inbox</div>
+                                    <Icon icon="inbox" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Info</div>
+                                    <Icon icon="info" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Keypad</div>
+                                    <Icon icon="keypad" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Layers</div>
+                                    <Icon icon="layers" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Layout</div>
+                                    <Icon icon="layout" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Link 2</div>
+                                    <Icon icon="link-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Link</div>
+                                    <Icon icon="link" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Linkedin</div>
+                                    <Icon icon="linkedin" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">List</div>
+                                    <Icon icon="list" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Loader</div>
+                                    <Icon icon="loader" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Lock</div>
+                                    <Icon icon="lock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Log in</div>
+                                    <Icon icon="log-in" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Log out</div>
+                                    <Icon icon="log-out" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Map</div>
+                                    <Icon icon="map" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Maximize</div>
+                                    <Icon icon="maximize" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu 2</div>
+                                    <Icon icon="menu-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu arrow</div>
+                                    <Icon icon="menu-arrow" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Menu</div>
+                                    <Icon icon="menu" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Message circle</div>
+                                    <Icon icon="message-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Message square</div>
+                                    <Icon icon="message-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Mic off</div>
+                                    <Icon icon="mic-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Mic</div>
+                                    <Icon icon="mic" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minimize</div>
+                                    <Icon icon="minimize" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus circle</div>
+                                    <Icon icon="minus-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus</div>
+                                    <Icon icon="minus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Minus square</div>
+                                    <Icon icon="minus-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Monitor</div>
+                                    <Icon icon="monitor" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Moon</div>
+                                    <Icon icon="moon" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">More horizontal</div>
+                                    <Icon icon="more-horizontal" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">More vertical</div>
+                                    <Icon icon="more-vertical" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Move</div>
+                                    <Icon icon="move" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Music</div>
+                                    <Icon icon="music" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Navigation 2</div>
+                                    <Icon icon="navigation-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Navigation</div>
+                                    <Icon icon="navigation" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Npm</div>
+                                    <Icon icon="npm" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Options 2</div>
+                                    <Icon icon="options-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Options</div>
+                                    <Icon icon="options" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pantone</div>
+                                    <Icon icon="pantone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Paper plane</div>
+                                    <Icon icon="paper-plane" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pause circle</div>
+                                    <Icon icon="pause-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">People</div>
+                                    <Icon icon="people" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Percent</div>
+                                    <Icon icon="percent" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user add</div>
+                                    <Icon icon="user-add" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user delete</div>
+                                    <Icon icon="user-delete" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user done</div>
+                                    <Icon icon="user-done" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user</div>
+                                    <Icon icon="user" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">user remove</div>
+                                    <Icon icon="user-remove" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone call</div>
+                                    <Icon icon="phone-call" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone missed</div>
+                                    <Icon icon="phone-missed" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone off</div>
+                                    <Icon icon="phone-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Phone</div>
+                                    <Icon icon="phone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pie chart</div>
+                                    <Icon icon="pie-chart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pin</div>
+                                    <Icon icon="pin" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Play circle</div>
+                                    <Icon icon="play-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus circle</div>
+                                    <Icon icon="plus-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus</div>
+                                    <Icon icon="plus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Plus square</div>
+                                    <Icon icon="plus-square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Power</div>
+                                    <Icon icon="power" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Pricetags</div>
+                                    <Icon icon="pricetags" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Printer</div>
+                                    <Icon icon="printer" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Question mark circle</div>
+                                    <Icon icon="question-mark-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Question mark</div>
+                                    <Icon icon="question-mark" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio button off</div>
+                                    <Icon icon="radio-button-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio button on</div>
+                                    <Icon icon="radio-button-on" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Radio</div>
+                                    <Icon icon="radio" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Recording</div>
+                                    <Icon icon="recording" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Refresh</div>
+                                    <Icon icon="refresh" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Repeat</div>
+                                    <Icon icon="repeat" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Rewind left</div>
+                                    <Icon icon="rewind-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Rewind right</div>
+                                    <Icon icon="rewind-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Save</div>
+                                    <Icon icon="save" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Scissors</div>
+                                    <Icon icon="scissors" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Search</div>
+                                    <Icon icon="search" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Settings 2</div>
+                                    <Icon icon="settings-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Settings</div>
+                                    <Icon icon="settings" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shake</div>
+                                    <Icon icon="shake" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Share</div>
+                                    <Icon icon="share" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shield off</div>
+                                    <Icon icon="shield-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shield</div>
+                                    <Icon icon="shield" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shopping bag</div>
+                                    <Icon icon="shopping-bag" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shopping cart</div>
+                                    <Icon icon="shopping-cart" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shuffle 2</div>
+                                    <Icon icon="shuffle-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Shuffle</div>
+                                    <Icon icon="shuffle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Step backwards</div>
+                                    <Icon icon="step-backward" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Step forward</div>
+                                    <Icon icon="step-forward" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Slash</div>
+                                    <Icon icon="slash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Smartphone</div>
+                                    <Icon icon="smartphone" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Smiling face</div>
+                                    <Icon icon="smiling-face" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Speaker</div>
+                                    <Icon icon="speaker" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Square</div>
+                                    <Icon icon="square" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Star</div>
+                                    <Icon icon="star" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Stop circle</div>
+                                    <Icon icon="stop-circle" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sun</div>
+                                    <Icon icon="sun" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Swap</div>
+                                    <Icon icon="swap" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Sync</div>
+                                    <Icon icon="sync" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Text</div>
+                                    <Icon icon="text" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer minus</div>
+                                    <Icon icon="thermometer-minus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer</div>
+                                    <Icon icon="thermometer" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Thermometer plus</div>
+                                    <Icon icon="thermometer-plus" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Toggle left</div>
+                                    <Icon icon="toggle-left" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Toggle right</div>
+                                    <Icon icon="toggle-right" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trash 2</div>
+                                    <Icon icon="trash-2" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trash</div>
+                                    <Icon icon="trash" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trending down</div>
+                                    <Icon icon="trending-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Trending up</div>
+                                    <Icon icon="trending-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Tv</div>
+                                    <Icon icon="tv" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Twitter</div>
+                                    <Icon icon="twitter" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Umbrella</div>
+                                    <Icon icon="umbrella" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Undo</div>
+                                    <Icon icon="undo" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Unlock</div>
+                                    <Icon icon="unlock" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Upload</div>
+                                    <Icon icon="upload" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Video off</div>
+                                    <Icon icon="video-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Video</div>
+                                    <Icon icon="video" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume down</div>
+                                    <Icon icon="volume-down" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume mute</div>
+                                    <Icon icon="volume-mute" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume off</div>
+                                    <Icon icon="volume-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Volume up</div>
+                                    <Icon icon="volume-up" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Wifi off</div>
+                                    <Icon icon="wifi-off" size={12}/>
+                                </Card.Content>
+                            </Card>
+                            <Card>
+                                <Card.Content
+                                    className="d-flex align-items-center justify-content-center flex-direction-column">
+                                    <div className="card-header-title mb-2">Wifi</div>
+                                    <Icon icon="wifi" size={12}/>
+                                </Card.Content>
+                            </Card>
+                        </Grid>
+                    </Row>
+                </Container>
+            </Page.Content>
+        </Page.Main>
     </Page>,
 document.getElementById('root')
 );

From b65ba5907f3670a813661a7bfe29c4ceaa15fc29 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 16 Dec 2020 22:11:01 +0100
Subject: [PATCH 4/5] WIP

---
 .../Navigation/Vertical/ListItem.tsx          |  4 +-
 .../Vertical/VerticalNavigationScope.ts       |  4 ++
 .../Navigation/VerticalNavigation.tsx         | 42 +++++++++++++------
 src/style/base/_variables.scss                |  4 +-
 src/style/components/_navigation.scss         | 38 ++++++++++++-----
 www/src/index.tsx                             | 38 ++++++++---------
 6 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 src/components/Navigation/Vertical/VerticalNavigationScope.ts

diff --git a/src/components/Navigation/Vertical/ListItem.tsx b/src/components/Navigation/Vertical/ListItem.tsx
index d40b592..77bdda6 100644
--- a/src/components/Navigation/Vertical/ListItem.tsx
+++ b/src/components/Navigation/Vertical/ListItem.tsx
@@ -29,7 +29,9 @@ const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemPr
                 {icon}
             </div>
         )}
-        {children}
+        <span className="vertical-navigation-list-item-text">
+            {children}
+        </span>
     </div>
 ));
 
diff --git a/src/components/Navigation/Vertical/VerticalNavigationScope.ts b/src/components/Navigation/Vertical/VerticalNavigationScope.ts
new file mode 100644
index 0000000..0cacd31
--- /dev/null
+++ b/src/components/Navigation/Vertical/VerticalNavigationScope.ts
@@ -0,0 +1,4 @@
+export interface VerticalNavigationScope {
+    collapsed: boolean;
+    collapse: () => void;
+}
diff --git a/src/components/Navigation/VerticalNavigation.tsx b/src/components/Navigation/VerticalNavigation.tsx
index 83afac7..d092134 100644
--- a/src/components/Navigation/VerticalNavigation.tsx
+++ b/src/components/Navigation/VerticalNavigation.tsx
@@ -7,6 +7,8 @@ import NavigationTop from '@/components/Navigation/Vertical/Top';
 import NavigationList from '@/components/Navigation/Vertical/List';
 import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
 import NavigationDivider from '@/components/Navigation/Vertical/Divider';
+import { useState } from 'react';
+import { VerticalNavigationScope } from './Vertical/VerticalNavigationScope';
 
 export interface VerticalNavigationStatics {
     Top: typeof NavigationTop;
@@ -17,6 +19,8 @@ export interface VerticalNavigationStatics {
 
 export interface SideNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: Variant | string;
+    collapsable?: boolean;
+    children: React.ReactNode | ((scope: VerticalNavigationScope) => React.ReactNode);
 }
 
 // @ts-ignore
@@ -28,18 +32,32 @@ const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNaviga
             variant
         },
         ref
-    ): React.ReactElement => (
-        <div
-            ref={ref}
-            className={clsx(
-                'vertical-navigation-container',
-                variant && `navigation-${variant}`,
-                className
-            )}
-        >
-            {children}
-        </div>
-    ));
+    ): React.ReactElement => {
+        const [collapsed, setCollapsed] = useState<boolean>(false);
+
+        const makeScope = (): VerticalNavigationScope => ({
+            collapsed,
+            collapse: () => setCollapsed(!collapsed)
+        });
+
+        children = typeof children === 'function'
+            ? (children as (scope: VerticalNavigationScope) => React.ReactNode)(makeScope())
+            : children;
+
+        return (
+            <div
+                ref={ref}
+                className={clsx(
+                    'vertical-navigation-container',
+                    collapsed && 'is-collapsed',
+                    variant && `navigation-${variant}`,
+                    className
+                )}
+            >
+                {children}
+            </div>
+        )
+    });
 
 VerticalNavigation.displayName = 'VerticalNavigation';
 VerticalNavigation.propTypes = {
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
index bba29c6..9d4beff 100644
--- a/src/style/base/_variables.scss
+++ b/src/style/base/_variables.scss
@@ -579,9 +579,11 @@ $form-field-font-size: 1rem;
  * 9. Navigation
  */
 $vertical-navigation-border-color: hsl(0, 0%, 88%);
-$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .05);
+$vertical-navigation-hover-item-background-color: rgba(0, 0, 0, .05);
+$vertical-navigation-active-item-background-color: rgba(0, 0, 0, .1);
 
 :root {
     --vertical-navigation-border-color: #{$vertical-navigation-border-color};
+    --vertical-navigation-hover-item-background-color: #{$vertical-navigation-hover-item-background-color};
     --vertical-navigation-active-item-background-color: #{$vertical-navigation-active-item-background-color};
 }
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
index 3f8f365..ad93355 100644
--- a/src/style/components/_navigation.scss
+++ b/src/style/components/_navigation.scss
@@ -40,6 +40,10 @@
                 background: var(--vertical-navigation-hover-item-background-color);
             }
 
+            &:active {
+                background: var(--vertical-navigation-active-item-background-color);
+            }
+
             .vertical-navigation-list-item-icon {
                 margin-right: var(--base-gutter);
                 font: {
@@ -51,17 +55,6 @@
                 color: #fff;
                 background: var(--primary-color);
                 border-radius: var(--base-border-radius);
-
-                //&:before {
-                //    content: '';
-                //    position: absolute;
-                //    height: 100%;
-                //    width: 3px;
-                //    background: var(--primary-color);
-                //    border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
-                //    left: 0;
-                //    top: 0;
-                //}
             }
 
             &:not(:last-child) {
@@ -69,6 +62,29 @@
             }
         }
     }
+
+    &.is-collapsed {
+        min-width: auto;
+
+        .vertical-navigation-list-item {
+            position: relative;
+            .vertical-navigation-list-item-icon {
+                margin-right: 0;
+            }
+
+            .vertical-navigation-list-item-text {
+                display: none;
+            }
+
+            &:hover {
+                white-space: nowrap;
+
+                .vertical-navigation-list-item-text {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 
 .navigation-primary {
diff --git a/www/src/index.tsx b/www/src/index.tsx
index 0130513..6df380b 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -35,26 +35,24 @@ const TestControllable = () => {
 ReactDom.render(
     <Page>
         <Page.Left fixed>
-            <VerticalNavigation>
-                <VerticalNavigation.Top className="justify-content-center mb-4">
-                    <img src={logo} width={160} className="mb-8" />
-                    <Button
-                        iconLeft={<Icon icon="" />}
-                        variant={Variant.PRIMARY_GHOST}
-                        block
-                    >
-                        Download now
-                    </Button>
-                </VerticalNavigation.Top>
-                <VerticalNavigation.Divider />
-                <VerticalNavigation.List>
-                    <VerticalNavigation.Item active icon={<Icon icon="home" />}>
-                        Home
-                    </VerticalNavigation.Item>
-                    <VerticalNavigation.Item icon={<Icon icon="user" />}>
-                        User
-                    </VerticalNavigation.Item>
-                </VerticalNavigation.List>
+            <VerticalNavigation collapsable>
+                {({ collapse }) => (
+                    <>
+                        <VerticalNavigation.Top className="justify-content-center mb-4">
+                            <button onClick={collapse}></button>
+                            <img src={logo} width={160} className="mb-8" />
+                        </VerticalNavigation.Top>
+                        <VerticalNavigation.Divider />
+                        <VerticalNavigation.List>
+                            <VerticalNavigation.Item active icon={<Icon icon="home" />}>
+                                Home
+                            </VerticalNavigation.Item>
+                            <VerticalNavigation.Item icon={<Icon icon="user" />}>
+                                User
+                            </VerticalNavigation.Item>
+                        </VerticalNavigation.List>
+                    </>
+                )}
             </VerticalNavigation>
         </Page.Left>
         <Page.Main>

From 820ab5858f4c45441a563bd85f57556bf9e619db Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 28 Dec 2020 11:02:27 +0100
Subject: [PATCH 5/5] WIP navigation

---
 .../Navigation/Vertical/ListItem.tsx          | 46 +++++++-----
 .../Navigation/Vertical/NavigationContext.ts  | 10 +++
 .../Navigation/VerticalNavigation.tsx         | 71 ++++++++++++++-----
 src/components/Overlay/OverlayTrigger.tsx     |  6 +-
 src/components/Overlay/index.tsx              |  7 +-
 src/style/components/_navigation.scss         | 13 ++--
 www/src/index.tsx                             | 29 +++++---
 7 files changed, 123 insertions(+), 59 deletions(-)
 create mode 100644 src/components/Navigation/Vertical/NavigationContext.ts

diff --git a/src/components/Navigation/Vertical/ListItem.tsx b/src/components/Navigation/Vertical/ListItem.tsx
index 77bdda6..04d82f4 100644
--- a/src/components/Navigation/Vertical/ListItem.tsx
+++ b/src/components/Navigation/Vertical/ListItem.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { NavigationContext } from './NavigationContext';
 
 interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     active?: boolean;
+    content?: React.ReactNode;
     icon?: React.ReactElement;
 }
 
@@ -15,25 +17,31 @@ const NavigationListItem = React.forwardRef<HTMLDivElement, NavigationListItemPr
         icon
     },
     ref
-): React.ReactElement => (
-    <div
-        ref={ref}
-        className={clsx(
-            'vertical-navigation-list-item',
-            active && 'active',
-            className
-        )}
-    >
-        {icon && (
-            <div className="vertical-navigation-list-item-icon">
-                {icon}
-            </div>
-        )}
-        <span className="vertical-navigation-list-item-text">
-            {children}
-        </span>
-    </div>
-));
+): React.ReactElement => {
+    return (
+        <NavigationContext.Consumer>
+            {() => (
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-list-item',
+                        active && 'active',
+                        className
+                    )}
+                >
+                    {icon && (
+                        <div className="vertical-navigation-list-item-icon">
+                            {icon}
+                        </div>
+                    )}
+                    <span className="vertical-navigation-list-item-text">
+                        {children}
+                    </span>
+                </div>
+            )}
+        </NavigationContext.Consumer>
+    )
+});
 
 NavigationListItem.displayName = 'NavigationListItem';
 NavigationListItem.propTypes = {
diff --git a/src/components/Navigation/Vertical/NavigationContext.ts b/src/components/Navigation/Vertical/NavigationContext.ts
new file mode 100644
index 0000000..2c8c86e
--- /dev/null
+++ b/src/components/Navigation/Vertical/NavigationContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export interface NavigationContextProps {
+    tooltipsWhenCollapsed: boolean;
+    collapsed: boolean;
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+    tooltipsWhenCollapsed: true,
+    collapsed: false
+});
diff --git a/src/components/Navigation/VerticalNavigation.tsx b/src/components/Navigation/VerticalNavigation.tsx
index d092134..9b40ec9 100644
--- a/src/components/Navigation/VerticalNavigation.tsx
+++ b/src/components/Navigation/VerticalNavigation.tsx
@@ -7,8 +7,9 @@ import NavigationTop from '@/components/Navigation/Vertical/Top';
 import NavigationList from '@/components/Navigation/Vertical/List';
 import NavigationListItem from '@/components/Navigation/Vertical/ListItem';
 import NavigationDivider from '@/components/Navigation/Vertical/Divider';
-import { useState } from 'react';
-import { VerticalNavigationScope } from './Vertical/VerticalNavigationScope';
+import { useEffect, useState } from 'react';
+import { VerticalNavigationScope } from '@/components/Navigation/Vertical/VerticalNavigationScope';
+import { NavigationContext } from './Vertical/NavigationContext';
 
 export interface VerticalNavigationStatics {
     Top: typeof NavigationTop;
@@ -17,26 +18,51 @@ export interface VerticalNavigationStatics {
     Divider: typeof NavigationDivider;
 }
 
-export interface SideNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface VerticalNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Variant of the menu. With this prop, the color of the menu can be set.
+     */
     variant?: Variant | string;
+    /**
+     * Indicates whether the menu collapse is controllable.
+     */
     collapsable?: boolean;
+    /**
+     * Indicating whether the menu is collapsed. Can be used to make the navigation a controllable component
+     */
+    collapsed?: boolean;
+    /**
+     * Indicates whether a tooltip with the menu text must be shown when menu is collapsed. Default: true
+     */
+    tooltipsWhenCollapsed?: boolean;
+    /**
+     * Children of the menu. This can be either a React ChildNode or callback function to access various actions
+     */
     children: React.ReactNode | ((scope: VerticalNavigationScope) => React.ReactNode);
 }
 
 // @ts-ignore
-const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNavigationProps, VerticalNavigationStatics> =
+const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, VerticalNavigationProps, VerticalNavigationStatics> =
     React.forwardRef((
         {
             children,
             className,
-            variant
+            variant,
+            collapsed,
+            tooltipsWhenCollapsed = true
         },
         ref
     ): React.ReactElement => {
-        const [collapsed, setCollapsed] = useState<boolean>(false);
+        const [isCollapsed, setCollapsed] = useState<boolean>(false);
+
+        useEffect(() => {
+            if (collapsed) {
+                setCollapsed(collapsed);
+            }
+        }, [collapsed])
 
         const makeScope = (): VerticalNavigationScope => ({
-            collapsed,
+            collapsed: isCollapsed,
             collapse: () => setCollapsed(!collapsed)
         });
 
@@ -45,17 +71,24 @@ const VerticalNavigation: ForwardComponentWithStatics<HTMLDivElement, SideNaviga
             : children;
 
         return (
-            <div
-                ref={ref}
-                className={clsx(
-                    'vertical-navigation-container',
-                    collapsed && 'is-collapsed',
-                    variant && `navigation-${variant}`,
-                    className
-                )}
+            <NavigationContext.Provider
+                value={{
+                    tooltipsWhenCollapsed: tooltipsWhenCollapsed,
+                    collapsed: isCollapsed
+                }}
             >
-                {children}
-            </div>
+                <div
+                    ref={ref}
+                    className={clsx(
+                        'vertical-navigation-container',
+                        isCollapsed && 'is-collapsed',
+                        variant && `navigation-${variant}`,
+                        className
+                    )}
+                >
+                    {children}
+                </div>
+            </NavigationContext.Provider>
         )
     });
 
@@ -63,7 +96,9 @@ VerticalNavigation.displayName = 'VerticalNavigation';
 VerticalNavigation.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    variant: PropTypes.string
+    variant: PropTypes.string,
+    collapsed: PropTypes.bool,
+    tooltipsWhenCollapsed: PropTypes.bool
 }
 
 VerticalNavigation.Top = NavigationTop;
diff --git a/src/components/Overlay/OverlayTrigger.tsx b/src/components/Overlay/OverlayTrigger.tsx
index a6b7630..125eefe 100644
--- a/src/components/Overlay/OverlayTrigger.tsx
+++ b/src/components/Overlay/OverlayTrigger.tsx
@@ -5,6 +5,7 @@ import Overlay from '@/components/Overlay/index';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
 import { AnimatePresence } from 'framer-motion';
+import { Modifier } from '@popperjs/core/lib/types';
 
 interface OverlayTriggerProps {
     arrow?: boolean;
@@ -15,6 +16,7 @@ interface OverlayTriggerProps {
     className?: string;
     trigger?: Trigger | string;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const OverlayTrigger = ({
@@ -25,7 +27,8 @@ const OverlayTrigger = ({
     placement,
     positionStrategy,
     trigger = 'hover',
-    motion
+    motion,
+    config
 }: OverlayTriggerProps): React.ReactElement => {
     const [shown, setShown] = useState<boolean>(false);
     const triggerRef = useRef<HTMLElement>();
@@ -71,6 +74,7 @@ const OverlayTrigger = ({
             placement={placement}
             positionStrategy={positionStrategy}
             className={className}
+            config={config}
         >
             {overlay}
         </Overlay>
diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx
index 14f4840..3a3cb88 100644
--- a/src/components/Overlay/index.tsx
+++ b/src/components/Overlay/index.tsx
@@ -20,6 +20,7 @@ interface OverlayProps {
     arrow?: boolean;
     positionStrategy?: PositioningStrategy;
     motion?: string;
+    config?: Array<Partial<Modifier<any, any>>>;
 }
 
 const Overlay = ({
@@ -29,7 +30,8 @@ const Overlay = ({
     placement = 'top',
     arrow = true,
     positionStrategy = 'absolute',
-    motion: triggerMotion
+    motion: triggerMotion,
+    config
 }: React.PropsWithChildren<OverlayProps>): React.ReactElement => {
     const ref = useRef<HTMLDivElement | null>(null);
     const popper = useRef<PopperInstance>();
@@ -40,7 +42,8 @@ const Overlay = ({
             options: {
                 element: '.arrow'
             }
-        }] : [])
+        }] : []),
+        ...(config || [])
     ]);
 
     const createPopperOptions = (): PopperOptions => ({
diff --git a/src/style/components/_navigation.scss b/src/style/components/_navigation.scss
index ad93355..047b9d2 100644
--- a/src/style/components/_navigation.scss
+++ b/src/style/components/_navigation.scss
@@ -75,14 +75,6 @@
             .vertical-navigation-list-item-text {
                 display: none;
             }
-
-            &:hover {
-                white-space: nowrap;
-
-                .vertical-navigation-list-item-text {
-                    display: block;
-                }
-            }
         }
     }
 }
@@ -98,3 +90,8 @@
         background: var(--primary-color-light-background);
     }
 }
+
+.vertical-navigation-tooltip {
+    margin-left: 0.5rem;
+    background: #000;
+}
diff --git a/www/src/index.tsx b/www/src/index.tsx
index 08cc18d..79b4808 100644
--- a/www/src/index.tsx
+++ b/www/src/index.tsx
@@ -3,7 +3,8 @@ import { useState } from 'react';
 import * as ReactDom from 'react-dom';
 import '../../src/style/index.scss';
 import { Button, Card, Col, Grid, Icon, Page, Row, SelectField, Tag, TextField, Variant } from '../../src';
-import logo from '@/images/coderan/logo.svg';
+import logoFull from '@/images/coderan/logo.svg';
+import logoLetter from '@/images/coderan/logo-letter.svg';
 import Container from '../../src/components/Container/Container';
 import FormGroup from '../../src/components/Form/Group';
 import FormLabel from '../../src/components/Form/Label';
@@ -36,21 +37,27 @@ const TestControllable = () => {
 ReactDom.render(
     <Page>
         <Page.Left fixed>
-            <VerticalNavigation collapsable>
-                {({ collapse }) => (
+            <VerticalNavigation collapsed>
+                {({ collapse, collapsed }) => (
                     <>
                         <VerticalNavigation.Top className="justify-content-center mb-4">
-                            <button onClick={collapse}></button>
-                            <img src={logo} width={160} className="mb-8" />
+                            {collapsed ? (
+                                <img src={logoLetter} height={36} />
+                            ) : (
+                                <img src={logoFull} height={36} />
+                            )}
                         </VerticalNavigation.Top>
                         <VerticalNavigation.Divider />
                         <VerticalNavigation.List>
-                            <VerticalNavigation.Item active icon={<Icon icon="home" />}>
-                                Home
-                            </VerticalNavigation.Item>
-                            <VerticalNavigation.Item icon={<Icon icon="user" />}>
-                                User
-                            </VerticalNavigation.Item>
+                            <VerticalNavigation.Item
+                                active
+                                icon={<Icon icon="home" />}
+                                content="Home"
+                            />
+                            <VerticalNavigation.Item
+                                icon={<Icon icon="user" />}
+                                content="Tooltips"
+                            />
                         </VerticalNavigation.List>
                     </>
                 )}