playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -3,81 +3,154 @@
 @import "../tokens/screen_sizes";
 @import "./layout_mixin";
 
+$list-width: 300px;
+$gap: $space_sm;
+$scrollbar-thickness: $space_md;
+$list-header-height: $space_lg;
+$list-footer-height: $space_lg;
+$list-border-radius: $border_rad_lighter;
+$card-border-radius: $border_rad_lightest;
+
+
 [class^=pb_layout_kit] {
-  $layout_sizes: (
-    "xs":   64px,
-    "sm":   200px,
-    "md":   250px,
-    "lg":   300px,
-    "xl":   365px,
-  );
-  $positions: (
-    "left",
-    "right",
-  );
-  $colors: (
-    "light",
-    "dark",
-    "gradient",
-    "transparent",
-  );
 
-  // Sections
-  &[class*=_section] {
-    padding: $space_sm $space_xl;
-    &[class*=_border] {
+  &[class*=_collection]{
+    div.layout_body{
+      display: grid;
+      grid-template-rows: 1fr;
+      grid-column-gap: $space_sm;
+      grid-row-gap: $space_sm;
+      grid-template-columns: repeat(4, 1fr);
+      
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+       @media screen and (max-width: $screen-xs-min) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  
+  }
+
+  &[class*=_kanban]{
+    display: flex;
+    overflow-x: auto;
+
+    > * {
+      flex: 0 0 auto;
+      margin-left: $gap;
+    }
+    &::after {
+      content: '';
+      flex: 0 0 $gap;
+    }
+    
+    div.layout_body{
+      width: $list-width;
+      height: 100vh;
+      list-style: none;
+      margin: 0;
+      overflow-y: auto;
+
+      & > * {
+        margin: $space_xs $space_xs $space_xs;
+        &:not(:last-child) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  // For future release as of 6/18/2020
+  &[class*=_kanban_responsive] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    &::after {
+      flex: none;
+      content: none;
+    }
+    div.layout_body{
+      width: 100%;
+    }
+  }
+  
+
+  &[class*=_sidebar]{
+    $layout_sizes: (
+      "xs":   64px,
+      "sm":   200px,
+      "md":   250px,
+      "lg":   300px,
+      "xl":   365px,
+    );
+    $positions: (
+      "left",
+      "right",
+    );
+    $colors: (
+      "light",
+      "dark",
+      "gradient",
+      "transparent",
+    );
+
+    // Sections
+    &[class*=_section] {
       padding: $space_sm $space_xl;
-      border-bottom: 1px solid $border_light;
-      &[class*=_margin] {
-        margin: $space_sm $space_xl;
+      &[class*=_border] {
+        padding: $space_sm $space_xl;
         border-bottom: 1px solid $border_light;
+        &[class*=_margin] {
+          margin: $space_sm $space_xl;
+          border-bottom: 1px solid $border_light;
+        }
       }
     }
-  }
 
-  // sidebar and Body
-  @each $name, $size in $layout_sizes {
-    &[class*=_size_#{$name}] {
-      @each $position in $positions {
-        &[class*=_#{$position}] {
-          @each $color in $colors {
-            &[class*=_#{$color}] {
-              @include layout_settings($size, $position, $color, "#{&}");
+    // sidebar and Body
+    @each $name, $size in $layout_sizes {
+      &[class*=_size_#{$name}] {
+        @each $position in $positions {
+          &[class*=_#{$position}] {
+            @each $color in $colors {
+              &[class*=_#{$color}] {
+                @include layout_settings($size, $position, $color, "#{&}");
+              }
             }
           }
         }
       }
     }
-  }
 
 
-  // Collapse Settings
-  @each $position in $positions {
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &_#{$position}_collapse_#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          @if $position == 'left' {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
-            grid-template-rows: auto 1fr;
+    // Collapse Settings
+    @each $position in $positions {
+      @each $breakpoint_name, $breakpoint in $breakpoints {
+        &_#{$position}_collapse_#{$breakpoint_name} {
+          @include break_at($breakpoint) {
+            @if $position == 'left' {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
+              grid-template-rows: auto 1fr;
 
-          } @else {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
-            grid-template-rows: 1fr auto;
-          }
-          grid-template-columns: 1fr;
-          &.full {
-            min-height: auto !important;
-          }
-          .layout_sidebar {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
-            border-width: 0 0 1px 0;
-          }
-          .layout_body {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            } @else {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
+              grid-template-rows: 1fr auto;
+            }
+            grid-template-columns: 1fr;
+            &.full {
+              min-height: auto !important;
+            }
+            .layout_sidebar {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
+              border-width: 0 0 1px 0;
+            }
+            .layout_body {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            }
           }
         }
       }
     }
   }
-
 }

data/app/pb_kits/playbook/pb_layout/body.rb

@@ -7,6 +7,10 @@ module Playbook
 
       partial "pb_layout/body"
 
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[ul li span div],
+                 default: "div"
+
       def classname
         generate_classname("layout_body")
       end

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("layout", props: {layout: "collection"}) do %>
+  <%= pb_rails("layout/body") do %>
+
+ <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+   <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+
+    <% end %>
+     <%= pb_rails("card" ) do %>
+        <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+      Card content 
+    <% end %>
+      <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card" ) do %>
+     <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Card, Layout } from '../../'
+
+const LayoutCollection = () => {
+  return (
+    <div>
+      <Layout
+          layout="collection"
+      >
+        <Layout.Body>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutCollection

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb

@@ -0,0 +1,140 @@
+<%= pb_rails("layout", props: {layout: "kanban"}) do %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Queued'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'In Progress'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item    
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item   
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Validation'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item    
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item   
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item    
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Done'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'OKRs'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item 
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Bugs'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item 
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Another Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item 
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Another Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'A Final Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx

@@ -0,0 +1,1234 @@
+import React from 'react'
+import {
+  Avatar,
+  Caption,
+  Card,
+  Flex,
+  FlexItem,
+  Icon,
+  Layout,
+  MultipleUsers,
+  Timestamp,
+  Title,
+} from '../../'
+
+const LayoutKanban = () => {
+  return (
+    <div>
+      <Layout layout="kanban">
+        <Layout.Body>
+          <Caption>{'Queue'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Design Homepage'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Change Old App Icon'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'In Progress'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Dashboard Updates'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1509868918748-a554ad25f858?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=3159ec467959b2aada4b75d565c270aa"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Usability Testing'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <MultipleUsers
+                    paddingLeft="xs"
+                    users={[
+                    {
+                      name: 'Shawn Palmer',
+                      imageUrl:
+                        'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=74daec1914d1d105202bca8a310a6a71',
+                    },
+                    {
+                      name: 'Andrew Murray Cooper Craig',
+                      imageUrl:
+                        'https://images.unsplash.com/photo-1513732822839-24f03a92f633?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+                    },
+                  ]}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'New Icons'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Validation'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Build Full Page Example'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Design System Documentation'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Prop Bug'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Discovery Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Design Exploration'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1513732822839-24f03a92f633?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Fix Sketch Bugs'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Test Out Figma'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Ship New Feature'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Meet with Client'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Re-engineer Old Modal'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Setup Permissions'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Build Prototype'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Collaborate with Team'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Interview Candidates'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Run Testing Suite'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Live Coding Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
+                    name="Michelle Smith"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Growth Engineering Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Done'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Re-rendering Bug'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Gather Resources'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Another Column'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1544817747-b11e3e3b6ac2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Growth Engineering Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Another Column'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=73a9df4b7bd1b330db1e903e08575ec1"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Pairing'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Another Column'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'Design Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+            >
+              <FlexItem>
+                <Title size="4">{'UX Engineering Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+            >
+              <FlexItem marginTop="xs">
+                <Avatar
+                    imageUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
+                    name="Roger Donahue"
+                    size="sm"
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutKanban