playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,1382 @@
+import React from 'react'
+
+import Avatar from '../../pb_avatar/_avatar'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Layout from '../../pb_layout/_layout'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+import Timestamp from '../../pb_timestamp/_timestamp'
+import Title from '../../pb_title/_title'
+
+const LayoutKanban = (props) => {
+  return (
+    <div>
+      <Layout layout="kanban">
+        <Layout.Body>
+          <Caption>{'Queue'}</Caption>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Design Homepage'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Change Old App Icon'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Dashboard Updates'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Usability Testing'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'New Icons'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Build Full Page Example'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Design System Documentation'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Prop Bug'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Discovery Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Design Exploration'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Fix Sketch Bugs'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Test Out Figma'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Ship New Feature'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Meet with Client'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Re-engineer Old Modal'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Setup Permissions'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Build Prototype'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Collaborate with Team'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Interview Candidates'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Run Testing Suite'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Live Coding Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Growth Engineering Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Re-rendering Bug'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Gather Resources'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Growth Engineering Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'All Hands Meeting'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <Icon icon="clock" />
+                  <Timestamp text="00:00:00 h" />
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Card>
+          <Card
+              padding="sm"
+              shadow="deep"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Pairing'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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"
+              {...props}
+          >
+            <Flex
+                orientation="row"
+                spacing="between"
+                {...props}
+            >
+              <FlexItem>
+                <Title size="4">{'Design Session'}</Title>
+              </FlexItem>
+              <FlexItem>
+                <Icon icon="ellipsis-h" />
+              </FlexItem>
+            </Flex>
+            <Flex
+                orientation="row"
+                spacing="between"
+                vertical="bottom"
+                {...props}
+            >
+              <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"
+                    {...props}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Flex
+                    orientation="row"
+                    vertical="center"
+                    {...props}
+                >
+                  <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