playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

data/app/views/playbook/pages/utilities.html.slim

@@ -0,0 +1,116 @@
+= pb_rails("title", props: { text: "Utilities", tag: "h1", size: 1 })
+
+br
+= pb_rails("title", props: { text: "Colors", tag: "h3", size: 3 })
+
+// Text ----------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Text Colors",
+    usage: "Used for text",
+    colors: [{name: "Default", variable: "text_lt_default"},
+        {name: "Light", variable: "text_lt_light"},
+        {name: "Lighter", variable: "text_lt_lighter"},
+        {name: "Default Dk", variable: "text_dk_default", dark: true},
+        {name: "Light Dk", variable: "text_dk_light", dark: true},
+        {name: "Lighter Dk", variable: "text_dk_lighter", dark: true}]}
+
+// Backgrounds ---------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Backgrounds",
+    usage: "Used for backgrounds",
+    colors: [{name: "Bg Light", variable: "bg_light"},
+        {name: "Bg Dark", variable: "bg_dark"},
+        {name: "Bg Gradient", class: "bg_gradient"}]}
+
+// Cards ---------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Cards",
+    usage: "Used for card backgrounds",
+    colors: [{name: "Card Light", variable: "card_light"},
+        {name: "Card Dark", variable: "card_dark", dark: true}]}
+
+// Status --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Status",
+    usage: "Used for status indicators",
+    colors: [{name: "Success", variable: "success"},
+        {name: "Warning", variable: "warning"},
+        {name: "Error", variable: "error"},
+        {name: "Info", variable: "info"},
+        {name: "Neutral", variable: "neutral"}]}
+
+// Data ----------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Data",
+    usage: "Used in graphs, charts and stats",
+    colors: [{name: "Data 1", variable: "data_1"},
+        {name: "Data 2", variable: "data_2"},
+        {name: "Data 3", variable: "data_3"},
+        {name: "Data 4", variable: "data_4"},
+        {name: "Data 5", variable: "data_5"},
+        {name: "Data 6", variable: "data_6"},
+        {name: "Data 7", variable: "data_7"},
+        {name: "Data 8", variable: "data_8"}]}
+
+// Actions -------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Actions",
+    usage: "Used for links and action buttons",
+    colors: [{name: "Primary", variable: "primary_action"}]}
+
+// Active --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Active",
+    usage: "Used for active or selected states",
+    colors: [{name: "Active Light", variable: "active_light"},
+        {name: "Active Dark", variable: "active_dark", dark: true}]}
+
+// Border --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Border",
+    colors: [{name: "Border Light", variable: "border_light"},
+        {name: "Border Dark", variable: "border_dark", dark: true}]}
+
+// Shadow --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Shadow",
+    colors: [{name: "Shadow", variable: "shadow"}]}
+
+// Products ------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Product Colors",
+    usage: "Used for specific product indicators",
+    colors: [{name: "Windows", variable: "windows"},
+        {name: "Siding", variable: "siding"},
+        {name: "Doors", variable: "doors"},
+        {name: "Solar", variable: "solar"},
+        {name: "Roofing", variable: "roofing"},
+        {name: "Gutters", variable: "gutters"},
+        {name: "Attic Insulation", variable: "insulation"}]}
+
+// Category ------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Category Colors",
+    usage: "Used for categorization",
+    colors: [{name: "Category 1", variable: "category_1"},
+        {name: "Category 2", variable: "category_2"},
+        {name: "Category 3", variable: "category_3"},
+        {name: "Category 4", variable: "category_4"},
+        {name: "Category 5", variable: "category_5"},
+        {name: "Category 6", variable: "category_6"},
+        {name: "Category 7", variable: "category_7"},
+        {name: "Category 8", variable: "category_8"},
+        {name: "Category 9", variable: "category_9"},
+        {name: "Category 10", variable: "category_10"},
+        {name: "Category 11", variable: "category_11"},
+        {name: "Category 12", variable: "category_12"},
+        {name: "Category 13", variable: "category_13"},
+        {name: "Category 14", variable: "category_14"},
+        {name: "Category 15", variable: "category_15"},
+        {name: "Category 16", variable: "category_16"},
+        {name: "Category 17", variable: "category_17"},
+        {name: "Category 18", variable: "category_18"},
+        {name: "Category 19", variable: "category_19"},
+        {name: "Category 20", variable: "category_20"},
+        {name: "Category 21", variable: "category_21"}]}
+        

data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim

@@ -0,0 +1,15 @@
+
+br
+= pb_rails("title", props: { text: title, tag: "h4", size: 4 })
+- if defined?(usage) && usage.present?
+  = pb_rails("body", props: {"tag": "p"})
+    usage
+
+ul.pb--utlities-color
+  - colors.each do |item|
+    - variable = (defined?(item[:variable]) && !item[:variable].nil?) ? "$#{item[:variable]}" : ""
+    - item[:dark] ||= false
+    - item[:class] ||= item[:variable]
+
+    li class=(item[:dark] == true ? "dark" : "") data-name="#{item[:name]}" data-variable="#{variable}"
+      div class="pb--color_#{item[:class]}"

data/app/views/playbook/samples/collection_detail/index.html.erb

@@ -0,0 +1,169 @@
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", layout: "collection_detail" }) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("card", props: { padding: "none" }) do %>
+    <%= pb_rails("caption", props: { text: "News Stories", size: 'lg', margin: "md" }) %>
+    <%= pb_rails("section_separator") %>
+        <%= pb_rails("nav", props: {link: "#", padding_top:"sm" }) do %>
+            <%= pb_rails("nav/item", props: { text: "All News", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Top Stories", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "National", link: "#", active: true }) %>
+                <%= pb_rails("nav", props: {variant: "subtle", highlight: false }) do %>
+                    <%= pb_rails("nav/item", props: { text: "All", link: "#", active: true  }) %>
+                    <%= pb_rails("nav/item", props: { text: "Planet Money", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Books", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Books, News, and Features", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Science", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Politics", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "National Security", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Environment", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Shots - Health News", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Analysis", link: "#" }) %>
+                <% end %>
+            <%= pb_rails("nav/item", props: { text: "World", link: "#" }) %>
+        <% end %>    
+    <% end %>  
+    <% end %>
+
+    <%= pb_rails("layout/body") do %> 
+    <!-- START PLANET MONEY CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
+                <%= pb_rails("caption", props: { text: "Planet Money", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/292f0C2i3f2z2f2A0P0n/Screen%20Shot%202020-07-09%20at%201.23.31%20PM.png?X-CloudApp-Visitor-Id=3399053&v=ed16c3c4" }) %>
+                <%= pb_rails("title", props: { text: "Where’d the Money Go, and Other Questions", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "391" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "2,039" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END PLANET MONEY CARD -->
+    <!-- START WORLD CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 2 }) do %>
+                <%= pb_rails("caption", props: { text: "World", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/0n07340O0c3R0V0L1V0P/Screen%20Shot%202020-07-09%20at%201.41.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=b532b3f0" }) %>
+                <%= pb_rails("title", props: { text: "U.K. Willing To Admit 3 Million If China Adopts Security Law", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "304" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "5,032" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "102" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END WORLD CARD -->
+    <!-- START BOOKS CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 3 }) do %>
+                <%= pb_rails("caption", props: { text: "Books", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/1j2k1g3f2H2W2f1v3225/Screen%20Shot%202020-07-09%20at%201.42.32%20PM.png?X-CloudApp-Visitor-Id=3399053&v=2ab46cb6" }) %>
+                <%= pb_rails("title", props: { text: "Opinion: Harry Potter's Magic Fades When His Creator Tweets", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "201" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "890" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "2" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END BOOKS CARD -->
+    <!-- START NATIONAL CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 4 }) do %>
+                <%= pb_rails("caption", props: { text: "National", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/2j0G2k3I0f3W3a2c2q3o/Screen%20Shot%202020-07-09%20at%201.43.40%20PM.png?X-CloudApp-Visitor-Id=3399053&v=d2667a0b" }) %>
+                <%= pb_rails("title", props: { text: "1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "245" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "10,302" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END NATIONAL CARD -->
+    <!-- START BOOKS, NEWS, AND FEATURES CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 5 }) do %>
+                <%= pb_rails("caption", props: { text: "Books, News, and Features", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/0m353s3A3I3B0w3N3W2U/Screen%20Shot%202020-07-09%20at%201.44.30%20PM.png?X-CloudApp-Visitor-Id=3399053&v=5b24787c" }) %>
+                <%= pb_rails("title", props: { text: "Publishers Sue Internet Archive For Mass Copyright Infringement", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "84" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "5,592" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "104" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END BOOKS, NEWS, AND FEATURES CARD -->
+    <!-- START SCIENCE CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 6 }) do %>
+                <%= pb_rails("caption", props: { text: "Science", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= pb_rails("image", props: { url: "https://djenjyj46f9j9.cloudfront.net/items/0n1b1V1F4614343t3547/Screen%20Shot%202020-07-09%20at%201.45.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=a3cc4d20" }) %>
+                <%= pb_rails("title", props: { text: "New Book Argues Migration Isn’t A Crisis — It’s The Solution", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "54" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "3,982" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "12" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END SCIENCE CARD -->
+    <% end %>
+<% end %>
+
+

data/app/views/playbook/samples/collection_detail/index.jsx

@@ -0,0 +1,372 @@
+import React from 'react'
+import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from '../../../../pb_kits/playbook'
+
+const CollectionDetail = () => (
+  <div>
+
+    <Layout
+        layout="collection_detail"
+        padding="lg"
+    >
+      <Card padding="none">
+        <Caption
+            padding="md"
+            size="lg"
+            text="News Stories"
+        />
+        <SectionSeparator />
+        {
+          <Nav
+              link="#"
+              marginTop="sm"
+              orientation="vertical"
+          >
+            <NavItem
+                link="#"
+                text="All News"
+            />
+            <NavItem
+                link="#"
+                text="Top Stories"
+            />
+            <NavItem
+                active
+                link="#"
+                text="National"
+            />
+            <Nav variant="subtle">
+              <NavItem
+                  active
+                  link="#"
+                  text="All"
+              />
+              <NavItem
+                  link="#"
+                  text="Planet Money"
+              />
+              <NavItem
+                  link="#"
+                  text="Books"
+              />
+              <NavItem
+                  link="#"
+                  text="Books, News, and Features"
+              />
+              <NavItem
+                  link="#"
+                  text="Science"
+              />
+              <NavItem
+                  link="#"
+                  text="Politics"
+              />
+              <NavItem
+                  link="#"
+                  text="National Security"
+              />
+              <NavItem
+                  link="#"
+                  text="Environment"
+              />
+              <NavItem
+                  link="#"
+                  text="Shots - Health News"
+              />
+              <NavItem
+                  link="#"
+                  text="Analysis"
+              />
+            </Nav>
+            <NavItem
+                link="#"
+                text="Files"
+            />
+          </Nav>
+        }
+      </Card>
+
+      <Layout.Body>
+        {/* START PLANET MONEY */}
+        <Card padding="none">
+          <Card.Header>
+            <Caption
+                dark
+                text="Planet Money"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/292f0C2i3f2z2f2A0P0n/Screen%20Shot%202020-07-09%20at%201.23.31%20PM.png?X-CloudApp-Visitor-Id=3399053&v=ed16c3c4" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Where’d the Money Go, and Other Questions"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="391"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="2,039"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END PLANET MONEY */}
+        {/* START WORLD CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={2}>
+            <Caption
+                dark
+                text="World"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n07340O0c3R0V0L1V0P/Screen%20Shot%202020-07-09%20at%201.41.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=b532b3f0" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="U.K. Willing To Admit 3 Million If China Adopts Security Law"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="304"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,032"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="102"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END WORLD CARD */}
+        {/* START BOOKS CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={3}>
+            <Caption
+                dark
+                text="Books"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/1j2k1g3f2H2W2f1v3225/Screen%20Shot%202020-07-09%20at%201.42.32%20PM.png?X-CloudApp-Visitor-Id=3399053&v=2ab46cb6" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Opinion: Harry Potter's Magic Fades When His Creator Tweets"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="201"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="890"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="2"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS CARD */}
+        {/* START NATIONAL CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={4}>
+            <Caption
+                dark
+                text="National"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/2j0G2k3I0f3W3a2c2q3o/Screen%20Shot%202020-07-09%20at%201.43.40%20PM.png?X-CloudApp-Visitor-Id=3399053&v=d2667a0b" />
+            <Title
+                paddingTop="sm"
+                paddingX="sm"
+                size={4}
+                tag="h4"
+                text="1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="245"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="10,302"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END NATIONAL CARD */}
+        {/* START BOOKS, NEWS, AND FEATURES CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={5}>
+            <Caption
+                dark
+                text="Books, News, and Features"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0m353s3A3I3B0w3N3W2U/Screen%20Shot%202020-07-09%20at%201.44.30%20PM.png?X-CloudApp-Visitor-Id=3399053&v=5b24787c" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Publishers Sue Internet Archive For Mass Copyright Infringement"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="84"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,592"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="104"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS, NEWS, AND FEATURES CARD */}
+        {/* START SCIENCE CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={6}>
+            <Caption
+                dark
+                text="Science"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n1b1V1F4614343t3547/Screen%20Shot%202020-07-09%20at%201.45.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=a3cc4d20" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="New Book Argues Migration Isn’t A Crisis — It’s The Solution"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="54"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="3,982"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="12"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END SCIENCE CARD */}
+
+      </Layout.Body>
+
+    </Layout>
+
+  </div>
+)
+export default CollectionDetail