10.12.0

Samples

/

Full Page Samples

Crowdsourced Posts

Copy to Clipboard
import React from 'react' import { Background, Badge, Body, Button, Caption, Card, Flex, FlexItem, Icon, IconCircle, IconValue, Image, Layout, Nav, NavItem, Pill, SectionSeparator, TextInput, Title, } from 'playbook-ui' const trendingStories = [ { headerColor: 'category_1', headerText: 'Finance', imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/jkuYZ6rB/readit_image_1.png', cardText: 'IRS will allow employers to match their employees\' student loan...', icon: 'dollar-sign', variant: 'green', subReadit: 'r/PersonalFinance and more', }, { headerColor: 'category_2', headerText: 'World News', imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/wbuK75AO/readit_image_2.png', cardText: 'Hong Kong democrat Ted Hui confirms he will go into exile...', icon: 'globe', variant: 'yellow', subReadit: 'r/WorldNews and more', }, { headerColor: 'category_3', headerText: 'Space', imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/geuooly9/readit_image_3.png', cardText: 'Relaxing Inside the Space Station\'s Window to the World...', icon: 'space-shuttle', variant: 'blue', subReadit: 'r/Space and more', }, { headerColor: 'category_4', headerText: 'Tech', imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/WnulJpwd/readit_image_4.png', cardText: 'MIT programmed AI that can design its own robots...', icon: 'microchip', variant: 'royal', subReadit: 'r/Technology and more', }, ] const communities = [ { subReadit: 'r/Fishing', variant: 'teal', icon: 'fish' }, { subReadit: 'r/Outdoors', variant: 'green', icon: 'trees' }, { subReadit: 'r/MostBeautiful', variant: 'yellow', icon: 'sun' }, { subReadit: 'r/Camping', variant: 'red', icon: 'campfire' }, { subReadit: 'r/Homestead', variant: 'blue', icon: 'farm' }, ] const trendingCommunities = [ { subReadit: 'r/Food', variant: 'blue', icon: 'utensils', members: '1,239,257 members' }, { subReadit: 'r/Gaming', variant: 'red', icon: 'gamepad', members: '4,125,270 members' }, { subReadit: 'r/aww', variant: 'yellow', icon: 'paw', members: '2,037,816 members' }, { subReadit: 'r/Movies', variant: 'royal', icon: 'camera-movie', members: '1,392,777 members' }, { subReadit: 'r/GraphicDesign', variant: 'purple', icon: 'pencil-paintbrush', members: '28,270 members' }, ] const CrowdsourcedPosts = () => { window.addEventListener('DOMContentLoaded', () => { const desktopOnly = document.querySelectorAll('.desktop-only') const mobileOnly = document.querySelectorAll('.mobile-only') const textInput = document.querySelector('.text-input-flex-item') const trendingImages = document.querySelectorAll('.trending-image') const postImageDesktop = document.querySelector('.post-image-desktop') const postImageMobile = document.querySelector('.post-image-mobile') const bodyContainer = document.querySelector('.body-container') const viewSize = () => { if (window.innerWidth < 1385) { desktopOnly.forEach((element) => element.style.display = 'none') mobileOnly.forEach((element) => element.style.display = '') bodyContainer.style.flexBasis = '' textInput.style.flexBasis = '60%' bodyContainer.style.marginRight = '8px' bodyContainer.style.marginLeft = '8px' postImageMobile.style.width = '100%' } else { mobileOnly.forEach((element) => element.style.display = 'none') desktopOnly.forEach((element) => element.style.display = '') bodyContainer.style.flexBasis = '65%' postImageDesktop.style.width = '75%' postImageDesktop.style.display = 'block' postImageDesktop.style.margin = 'auto' } trendingImages.forEach((element) => element.style.width = '100%') } viewSize() window.addEventListener('resize', () => viewSize()) }) return ( <> {/* Start header bar */} <Background backgroundColor="white" paddingLeft="md" paddingY="xs" > <Flex classname="flex-container" spacing="between" vertical="center" > <FlexItem> <Flex vertical="center"> <FlexItem> <IconCircle icon="robot" size="md" variant="royal" /> </FlexItem> <FlexItem> <Title className="desktop-only" marginLeft="xs" size={2} text="readit" /> </FlexItem> </Flex> </FlexItem> <FlexItem className="text-input-flex-item" fixedSize="30%" > <TextInput marginTop="sm" placeholder="Search" /> </FlexItem> <FlexItem> <Button className="desktop-only" marginRight="sm" text="Log In" variant="secondary" /> <Button className="desktop-only" marginRight="sm" text="Sign Up" /> <Button marginRight="md" padding="none" variant="link" > <Icon icon="user" /> <Icon icon="caret-down" /> </Button> </FlexItem> </Flex> </Background> {/* End header bar */} <Flex horizontal="center"> <FlexItem className="body-container"> {/* Start trending today */} <Caption paddingBottom="xs" paddingTop="sm" text="Trending Today" /> <Layout header layout="collection" > <Layout.Body> {trendingStories.map((story) => ( <Card key={story.headerText} padding="none" > <Card.Header headerColor={story.headerColor} padding="sm" > <Caption dark text={story.headerText} /> </Card.Header> <Card.Body padding="none"> <Image className="trending-image" url={story.imageUrl} /> <Body padding="xs" paddingY="none" text={story.cardText} /> <Flex classname="flex-container" padding="xs" vertical="center" > <FlexItem> <IconCircle icon={story.icon} size="xs" variant={story.variant} /> </FlexItem> <FlexItem marginLeft="xs"> <Caption size="xs" text={story.subReadit} /> </FlexItem> </Flex> </Card.Body> </Card> ))} </Layout.Body> </Layout> {/* End trending today */} {/* Start popular posts */} <Caption paddingBottom="xs" paddingTop="sm" text="Popular Posts" /> <div className="mobile-only"> {/* Mobile nav */} <Card padding="none"> <Nav className="mobile-only" orientation="vertical" > <NavItem active iconLeft="rocket" link="#" text="Best" /> <NavItem iconLeft="fire" link="#" text="Hot" /> <NavItem iconLeft="star" link="#" text="New" /> <NavItem iconLeft="chart-line" link="#" text="Top" /> </Nav> </Card> {/* Mobile post 1 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem padding="sm" > <Flex vertical="center"> <IconCircle icon="lightbulb-on" size="xs" variant="yellow" /> <Title marginLeft="xs" size={4} text="r/LifeProTips" /> <Body color="light" marginLeft="xs" text="• Posted by u/xhuljanomuca" /> </Flex> <Body paddingTop="xs" text="LPT: If you ever need a program you want for free (for example a video/photo editor) don’t search \ for “free,” search for “open source” to avoid limited trial versions, adverts and malware" /> <Pill marginTop="sm" text="Computers" variant="primary" /> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> {/* Mobile post 2 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem fixedSize="100%" padding="sm" > <Flex vertical="center"> <IconCircle icon="camera" size="xs" variant="blue" /> <Title marginLeft="xs" size={4} text="r/Pics" /> <Body color="light" marginLeft="xs" text="• Posted by u/stephenmckeon" /> </Flex> <FlexItem> <Flex paddingBottom="sm" paddingTop="xs" vertical="center" > <FlexItem> <Body text="Foggy morning." /> </FlexItem> <FlexItem marginLeft="xs"> <Pill text="OC" variant="success" /> </FlexItem> </Flex> </FlexItem> <Image className="post-image-mobile" url="https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/d5uPEJbY/readit_image_5.png" /> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> {/* Mobile post 3 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem padding="sm" > <Flex vertical="center"> <IconCircle icon="browser" size="xs" variant="purple" /> <Title marginLeft="xs" size={4} text="r/WebDesign" /> <Body color="light" marginLeft="xs" text="• Posted by u/creativebloq" /> </Flex> <Title paddingRight="md" paddingTop="xs" size="4" text="Use white space!" /> <Body paddingTop="sm" text="It seems to be the hardest concept for developers to grasp: the biggest benefit to having the proper amount of \ white space is giving the user a break. Breaks are important for processing information, especially when there's \ a fair amount to process. It's why we have paragraphs and sentences instead of just a single, long block of running text." /> <Body paddingTop="sm" text="The key is to ensure that white space has a relationship with other objects on the page, including the other space. \ If you have a single column of white space, make sure there's another single column of white space around to balance it." /> <Body color="light" paddingTop="sm" text="For vertical space, just use fractions of the body font size. I tend to keep things simple and use a scale of .25, \ but there are several other scales that you can use." /> <Body color="light" paddingTop="sm" text="For example, if the body font size is 16px(1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. \ This allows for choosing font sizes by simply moving up and down the scale as I want larger or smaller type..." /> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> </div> <div className="desktop-only"> <Layout position="right" size="xl" > <Layout.Body> {/* Desktop nav bar */} <Card padding="none"> <Flex spacing="between"> <FlexItem> <Flex> <Nav orientation="horizontal"> <NavItem active iconLeft="rocket" link="#" text="Best" /> <NavItem iconLeft="fire" link="#" text="Hot" /> <NavItem iconLeft="star" link="#" text="New" /> <NavItem iconLeft="chart-line" link="#" text="Top" /> </Nav> <Button marginTop="xs" variant="link" > <Icon icon="ellipsis-h" /> </Button> </Flex> </FlexItem> <FlexItem> <Button marginTop="xs" paddingRight="md" variant="link" > <Icon icon="th-large" /> <Icon icon="caret-down" /> </Button> </FlexItem> </Flex> </Card> {/* Desktop post 1 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem marginLeft="sm" marginTop="sm" > <Icon icon="arrow-alt-up" marginLeft="none" size="1x" /> <Title margin="xs" marginLeft="none" size={4} text="66.2k" /> <Icon icon="arrow-alt-down" marginLeft="none" size="1x" /> </FlexItem> <FlexItem paddingX="xs" paddingY="sm" > <Flex vertical="center"> <IconCircle icon="lightbulb-on" size="xs" variant="yellow" /> <Title marginLeft="xs" size={4} text="r/LifeProTips" /> <Body color="light" marginLeft="xs" text="• Posted by u/xhuljanomuca 1 month ago" /> </Flex> <Body paddingRight="md" paddingTop="xs" text="LPT: If you ever need a program you want for free (for example a video/photo editor) don’t search \ for “free,” search for “open source” to avoid limited trial versions, adverts and malware" /> <Pill marginTop="sm" text="Computers" variant="primary" /> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> {/* Desktop post 2 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem marginLeft="sm" marginTop="sm" > <Icon icon="arrow-alt-up" marginLeft="none" size="1x" /> <Title margin="xs" marginLeft="none" size={4} text="8297" /> <Icon icon="arrow-alt-down" marginLeft="none" size="1x" /> </FlexItem> <FlexItem fixedSize="85%" paddingX="xs" paddingY="sm" > <Flex vertical="center"> <IconCircle icon="camera" size="xs" variant="blue" /> <Title marginLeft="xs" size={4} text="r/Pics" /> <Body color="light" marginLeft="xs" text="• Posted by u/stephenmckeon 13 hours ago" /> </Flex> <FlexItem> <Flex paddingTop="xs" vertical="center" > <FlexItem> <Body text="Foggy morning." /> </FlexItem> <FlexItem marginLeft="xs"> <Pill text="OC" variant="success" /> </FlexItem> </Flex> </FlexItem> <Flex marginTop="sm"> <Image className="post-image-desktop" url="https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/d5uPEJbY/readit_image_5.png" /> </Flex> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> {/* Desktop post 3 */} <Card marginTop="sm" padding="none" > <Flex> <FlexItem marginLeft="sm" marginTop="sm" > <Icon icon="arrow-alt-up" marginLeft="none" size="1x" /> <Title margin="xs" marginLeft="none" size={4} text="467" /> <Icon icon="arrow-alt-down" marginLeft="none" size="1x" /> </FlexItem> <FlexItem paddingLeft="xs" paddingRight="xl" paddingY="sm" > <Flex vertical="center"> <IconCircle icon="browser" size="xs" variant="purple" /> <Title marginLeft="xs" size={4} text="r/WebDesign" /> <Body color="light" marginLeft="xs" text="• Posted by u/creativebloq 1 week ago" /> </Flex> <Title paddingRight="md" paddingTop="xs" size="4" text="Use white space!" /> <Body paddingTop="sm" text="It seems to be the hardest concept for developers to grasp: the biggest benefit to having the proper amount of \ white space is giving the user a break. Breaks are important for processing information, especially when there's \ a fair amount to process. It's why we have paragraphs and sentences instead of just a single, long block of running text." /> <Body paddingTop="sm" text="The key is to ensure that white space has a relationship with other objects on the page, including the other space. \ If you have a single column of white space, make sure there's another single column of white space around to balance it." /> <Body color="light" paddingTop="sm" text="For vertical space, just use fractions of the body font size. I tend to keep things simple and use a scale of .25, \ but there are several other scales that you can use." /> <Body color="light" paddingTop="sm" text="For example, if the body font size is 16px(1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. \ This allows for choosing font sizes by simply moving up and down the scale as I want larger or smaller type..." /> <Flex paddingTop="sm"> <IconValue icon="comment-alt" text="1.4k Comments" /> <IconValue icon="share" marginLeft="sm" text="Share" /> <IconValue icon="folder-plus" marginLeft="sm" text="Save" /> <IconValue icon="ellipsis-h" marginLeft="sm" text="" /> </Flex> </FlexItem> </Flex> </Card> </Layout.Body> {/* Start side bar (desktop only) */} <Background backgroundColor="light"> <Layout.Side marginLeft="md"> {/* Communities card */} <Card header padding="none" shadow="deeper" > <Card.Header headerColor="category_1" padding="xs" > <Flex vertical="center"> <Body dark padding="xs" paddingRight="sm" > <Icon icon="tree-large" size="4x" /> </Body> <Body dark margin="xs" marginRight="xs" text="Outdoor communities — they're really out there" /> </Flex> </Card.Header> {communities.map((community) => ( <> <Flex padding="xs" paddingLeft="sm" vertical="center" > <FlexItem> <IconCircle icon={community.icon} size="sm" variant={community.variant} /> </FlexItem> <FlexItem> <Title marginLeft="xs" size={4} text={community.subReadit} /> </FlexItem> </Flex> <If condition={community !== communities[communities.length - 1]}> <SectionSeparator /> </If> </> ))} <Layout.Body paddingX="sm"> <Button fullWidth marginTop="xs" text="VIEW ALL" /> <Flex paddingY="sm" spacing="between" > <Badge padding="xs" text="Top" variant="neutral" /> <Badge padding="xs" text="Near You" variant="neutral" /> <Badge padding="xs" text="Aww" variant="neutral" /> <Badge padding="xs" text="Fitness" variant="neutral" /> </Flex> </Layout.Body> </Card> {/* Readit premium card */} <Card marginTop="sm" padding="xs" shadow="deeper" > <Flex margin="xs" spacing="between" vertical="center" > <FlexItem> <Icon icon="shield-alt" marginRight="sm" size="2x" /> </FlexItem> <FlexItem> <Title size={4} text="Readit Premium" /> <Caption size="xs" text="The best Readit experience, with monthly Coins" /> </FlexItem> <FlexItem> <Button paddingX="sm" text="TRY NOW" variant="secondary" /> </FlexItem> </Flex> </Card> {/* Trending communities card */} <Card marginTop="sm" padding="sm" shadow="deeper" > <Title padding="xs" size={4} text="Trending Communities" /> {trendingCommunities.map((community) => ( <Flex key={community.subReadit} marginY="xs" spacing="between" vertical="center" > <FlexItem> <Flex> <FlexItem> <IconCircle icon={community.icon} size="sm" variant={community.variant} /> </FlexItem> <FlexItem> <Title marginLeft="xs" size={4} text={community.subReadit} /> <Body color="light" marginLeft="xs" text={community.members} /> </FlexItem> </Flex> </FlexItem> <FlexItem> <Button text="Join" variant="secondary" /> </FlexItem> </Flex> ))} </Card> </Layout.Side> </Background> {/* End side bar (desktop only) */} </Layout> </div> {/* End popular posts */} </FlexItem> </Flex> </> ) } export default CrowdsourcedPosts
import React from 'react'
import {
  Background,
  Badge,
  Body,
  Button,
  Caption,
  Card,
  Flex,
  FlexItem, Icon,
  IconCircle,
  IconValue,
  Image,
  Layout,
  Nav,
  NavItem,
  Pill,
  SectionSeparator,
  TextInput,
  Title,
} from 'playbook-ui'

const trendingStories = [
  {
    headerColor: 'category_1',
    headerText: 'Finance',
    imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/jkuYZ6rB/readit_image_1.png',
    cardText: 'IRS will allow employers to match their employees\' student loan...',
    icon: 'dollar-sign',
    variant: 'green',
    subReadit: 'r/PersonalFinance and more',
  },
  {
    headerColor: 'category_2',
    headerText: 'World News',
    imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/wbuK75AO/readit_image_2.png',
    cardText: 'Hong Kong democrat Ted Hui confirms he will go into exile...',
    icon: 'globe',
    variant: 'yellow',
    subReadit: 'r/WorldNews and more',
  },
  {
    headerColor: 'category_3',
    headerText: 'Space',
    imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/geuooly9/readit_image_3.png',
    cardText: 'Relaxing Inside the Space Station\'s Window to the World...',
    icon: 'space-shuttle',
    variant: 'blue',
    subReadit: 'r/Space and more',
  },
  {
    headerColor: 'category_4',
    headerText: 'Tech',
    imageUrl: 'https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/WnulJpwd/readit_image_4.png',
    cardText: 'MIT programmed AI that can design its own robots...',
    icon: 'microchip',
    variant: 'royal',
    subReadit: 'r/Technology and more',
  },
]

const communities = [
  { subReadit: 'r/Fishing', variant: 'teal', icon: 'fish' },
  { subReadit: 'r/Outdoors', variant: 'green', icon: 'trees' },
  { subReadit: 'r/MostBeautiful', variant: 'yellow', icon: 'sun' },
  { subReadit: 'r/Camping', variant: 'red', icon: 'campfire' },
  { subReadit: 'r/Homestead', variant: 'blue', icon: 'farm' },
]

const trendingCommunities = [
  { subReadit: 'r/Food', variant: 'blue', icon: 'utensils', members: '1,239,257 members' },
  { subReadit: 'r/Gaming', variant: 'red', icon: 'gamepad', members: '4,125,270 members' },
  { subReadit: 'r/aww', variant: 'yellow', icon: 'paw', members: '2,037,816 members' },
  { subReadit: 'r/Movies', variant: 'royal', icon: 'camera-movie', members: '1,392,777 members' },
  { subReadit: 'r/GraphicDesign', variant: 'purple', icon: 'pencil-paintbrush', members: '28,270 members' },
]

const CrowdsourcedPosts = () => {
  window.addEventListener('DOMContentLoaded', () => {
    const desktopOnly = document.querySelectorAll('.desktop-only')
    const mobileOnly = document.querySelectorAll('.mobile-only')
    const textInput = document.querySelector('.text-input-flex-item')
    const trendingImages = document.querySelectorAll('.trending-image')
    const postImageDesktop = document.querySelector('.post-image-desktop')
    const postImageMobile = document.querySelector('.post-image-mobile')
    const bodyContainer = document.querySelector('.body-container')

    const viewSize = () => {
      if (window.innerWidth < 1385) {
        desktopOnly.forEach((element) => element.style.display = 'none')
        mobileOnly.forEach((element) => element.style.display = '')
        bodyContainer.style.flexBasis = ''
        textInput.style.flexBasis = '60%'
        bodyContainer.style.marginRight = '8px'
        bodyContainer.style.marginLeft = '8px'
        postImageMobile.style.width = '100%'
      } else {
        mobileOnly.forEach((element) => element.style.display = 'none')
        desktopOnly.forEach((element) => element.style.display = '')
        bodyContainer.style.flexBasis = '65%'
        postImageDesktop.style.width = '75%'
        postImageDesktop.style.display = 'block'
        postImageDesktop.style.margin = 'auto'
      }
      trendingImages.forEach((element) => element.style.width = '100%')
    }
    viewSize()

    window.addEventListener('resize', () => viewSize())
  })

  return (
    <>
      {/* Start header bar */}
      <Background
          backgroundColor="white"
          paddingLeft="md"
          paddingY="xs"
      >
        <Flex
            classname="flex-container"
            spacing="between"
            vertical="center"
        >
          <FlexItem>
            <Flex vertical="center">
              <FlexItem>
                <IconCircle
                    icon="robot"
                    size="md"
                    variant="royal"
                />
              </FlexItem>
              <FlexItem>
                <Title
                    className="desktop-only"
                    marginLeft="xs"
                    size={2}
                    text="readit"
                />
              </FlexItem>
            </Flex>
          </FlexItem>
          <FlexItem
              className="text-input-flex-item"
              fixedSize="30%"
          >
            <TextInput
                marginTop="sm"
                placeholder="Search"
            />
          </FlexItem>
          <FlexItem>
            <Button
                className="desktop-only"
                marginRight="sm"
                text="Log In"
                variant="secondary"
            />
            <Button
                className="desktop-only"
                marginRight="sm"
                text="Sign Up"
            />
            <Button
                marginRight="md"
                padding="none"
                variant="link"
            >
              <Icon icon="user" />
              <Icon icon="caret-down" />
            </Button>
          </FlexItem>
        </Flex>
      </Background>
      {/* End header bar */}

      <Flex horizontal="center">
        <FlexItem className="body-container">
          {/* Start trending today */}
          <Caption
              paddingBottom="xs"
              paddingTop="sm"
              text="Trending Today"
          />
          <Layout
              header
              layout="collection"
          >
            <Layout.Body>
              {trendingStories.map((story) => (
                <Card
                    key={story.headerText}
                    padding="none"
                >
                  <Card.Header
                      headerColor={story.headerColor}
                      padding="sm"
                  >
                    <Caption
                        dark
                        text={story.headerText}
                    />
                  </Card.Header>
                  <Card.Body padding="none">
                    <Image
                        className="trending-image"
                        url={story.imageUrl}
                    />
                    <Body
                        padding="xs"
                        paddingY="none"
                        text={story.cardText}
                    />
                    <Flex
                        classname="flex-container"
                        padding="xs"
                        vertical="center"
                    >
                      <FlexItem>
                        <IconCircle
                            icon={story.icon}
                            size="xs"
                            variant={story.variant}
                        />
                      </FlexItem>
                      <FlexItem marginLeft="xs">
                        <Caption
                            size="xs"
                            text={story.subReadit}
                        />
                      </FlexItem>
                    </Flex>
                  </Card.Body>
                </Card>
              ))}
            </Layout.Body>
          </Layout>
          {/* End trending today */}

          {/* Start popular posts */}
          <Caption
              paddingBottom="xs"
              paddingTop="sm"
              text="Popular Posts"
          />

          <div className="mobile-only">
            {/* Mobile nav */}
            <Card padding="none">
              <Nav
                  className="mobile-only"
                  orientation="vertical"
              >
                <NavItem
                    active
                    iconLeft="rocket"
                    link="#"
                    text="Best"
                />
                <NavItem
                    iconLeft="fire"
                    link="#"
                    text="Hot"
                />
                <NavItem
                    iconLeft="star"
                    link="#"
                    text="New"
                />
                <NavItem
                    iconLeft="chart-line"
                    link="#"
                    text="Top"
                />
              </Nav>
            </Card>

            {/* Mobile post 1 */}
            <Card
                marginTop="sm"
                padding="none"
            >
              <Flex>
                <FlexItem
                    padding="sm"
                >
                  <Flex vertical="center">
                    <IconCircle
                        icon="lightbulb-on"
                        size="xs"
                        variant="yellow"
                    />
                    <Title
                        marginLeft="xs"
                        size={4}
                        text="r/LifeProTips"
                    />
                    <Body
                        color="light"
                        marginLeft="xs"
                        text="• Posted by u/xhuljanomuca"
                    />
                  </Flex>
                  <Body
                      paddingTop="xs"
                      text="LPT: If you ever need a program you want for free (for example a video/photo editor) dont search \
                            for free,” search for open source to avoid limited trial versions, adverts and malware"
                  />
                  <Pill
                      marginTop="sm"
                      text="Computers"
                      variant="primary"
                  />
                  <Flex paddingTop="sm">
                    <IconValue
                        icon="comment-alt"
                        text="1.4k Comments"
                    />
                    <IconValue
                        icon="share"
                        marginLeft="sm"
                        text="Share"
                    />
                    <IconValue
                        icon="folder-plus"
                        marginLeft="sm"
                        text="Save"
                    />
                    <IconValue
                        icon="ellipsis-h"
                        marginLeft="sm"
                        text=""
                    />
                  </Flex>
                </FlexItem>
              </Flex>
            </Card>

            {/* Mobile post 2 */}
            <Card
                marginTop="sm"
                padding="none"
            >
              <Flex>
                <FlexItem
                    fixedSize="100%"
                    padding="sm"
                >
                  <Flex vertical="center">
                    <IconCircle
                        icon="camera"
                        size="xs"
                        variant="blue"
                    />
                    <Title
                        marginLeft="xs"
                        size={4}
                        text="r/Pics"
                    />
                    <Body
                        color="light"
                        marginLeft="xs"
                        text="• Posted by u/stephenmckeon"
                    />
                  </Flex>
                  <FlexItem>
                    <Flex
                        paddingBottom="sm"
                        paddingTop="xs"
                        vertical="center"
                    >
                      <FlexItem>
                        <Body text="Foggy morning." />
                      </FlexItem>
                      <FlexItem marginLeft="xs">
                        <Pill
                            text="OC"
                            variant="success"
                        />
                      </FlexItem>
                    </Flex>
                  </FlexItem>
                  <Image
                      className="post-image-mobile"
                      url="https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/d5uPEJbY/readit_image_5.png"
                  />
                  <Flex paddingTop="sm">
                    <IconValue
                        icon="comment-alt"
                        text="1.4k Comments"
                    />
                    <IconValue
                        icon="share"
                        marginLeft="sm"
                        text="Share"
                    />
                    <IconValue
                        icon="folder-plus"
                        marginLeft="sm"
                        text="Save"
                    />
                    <IconValue
                        icon="ellipsis-h"
                        marginLeft="sm"
                        text=""
                    />
                  </Flex>
                </FlexItem>
              </Flex>
            </Card>

            {/* Mobile post 3 */}
            <Card
                marginTop="sm"
                padding="none"
            >
              <Flex>
                <FlexItem
                    padding="sm"
                >
                  <Flex vertical="center">
                    <IconCircle
                        icon="browser"
                        size="xs"
                        variant="purple"
                    />
                    <Title
                        marginLeft="xs"
                        size={4}
                        text="r/WebDesign"
                    />
                    <Body
                        color="light"
                        marginLeft="xs"
                        text="• Posted by u/creativebloq"
                    />
                  </Flex>
                  <Title
                      paddingRight="md"
                      paddingTop="xs"
                      size="4"
                      text="Use white space!"
                  />
                  <Body
                      paddingTop="sm"
                      text="It seems to be the hardest concept for developers to grasp: the biggest benefit to having the proper amount of \
                            white space is giving the user a break. Breaks are important for processing information, especially when there's \
                            a fair amount to process. It's why we have paragraphs and sentences instead of just a single, long block of running text."
                  />
                  <Body
                      paddingTop="sm"
                      text="The key is to ensure that white space has a relationship with other objects on the page, including the other space. \
                            If you have a single column of white space, make sure there's another single column of white space around to balance it."
                  />
                  <Body
                      color="light"
                      paddingTop="sm"
                      text="For vertical space, just use fractions of the body font size. I tend to keep things simple and use a scale of .25, \
                            but there are several other scales that you can use."
                  />
                  <Body
                      color="light"
                      paddingTop="sm"
                      text="For example, if the body font size is 16px(1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. \
                            This allows for choosing font sizes by simply moving up and down the scale as I want larger or smaller type..."
                  />
                  <Flex paddingTop="sm">
                    <IconValue
                        icon="comment-alt"
                        text="1.4k Comments"
                    />
                    <IconValue
                        icon="share"
                        marginLeft="sm"
                        text="Share"
                    />
                    <IconValue
                        icon="folder-plus"
                        marginLeft="sm"
                        text="Save"
                    />
                    <IconValue
                        icon="ellipsis-h"
                        marginLeft="sm"
                        text=""
                    />
                  </Flex>
                </FlexItem>
              </Flex>
            </Card>
          </div>

          <div className="desktop-only">
            <Layout
                position="right"
                size="xl"
            >
              <Layout.Body>
                {/* Desktop nav bar */}
                <Card padding="none">
                  <Flex spacing="between">
                    <FlexItem>
                      <Flex>
                        <Nav orientation="horizontal">
                          <NavItem
                              active
                              iconLeft="rocket"
                              link="#"
                              text="Best"
                          />
                          <NavItem
                              iconLeft="fire"
                              link="#"
                              text="Hot"
                          />
                          <NavItem
                              iconLeft="star"
                              link="#"
                              text="New"
                          />
                          <NavItem
                              iconLeft="chart-line"
                              link="#"
                              text="Top"
                          />
                        </Nav>
                        <Button
                            marginTop="xs"
                            variant="link"
                        >
                          <Icon icon="ellipsis-h" />
                        </Button>
                      </Flex>
                    </FlexItem>
                    <FlexItem>
                      <Button
                          marginTop="xs"
                          paddingRight="md"
                          variant="link"
                      >
                        <Icon icon="th-large" />
                        <Icon icon="caret-down" />
                      </Button>
                    </FlexItem>
                  </Flex>
                </Card>

                {/* Desktop post 1 */}
                <Card
                    marginTop="sm"
                    padding="none"
                >
                  <Flex>
                    <FlexItem
                        marginLeft="sm"
                        marginTop="sm"
                    >
                      <Icon
                          icon="arrow-alt-up"
                          marginLeft="none"
                          size="1x"
                      />
                      <Title
                          margin="xs"
                          marginLeft="none"
                          size={4}
                          text="66.2k"
                      />
                      <Icon
                          icon="arrow-alt-down"
                          marginLeft="none"
                          size="1x"
                      />
                    </FlexItem>
                    <FlexItem
                        paddingX="xs"
                        paddingY="sm"
                    >
                      <Flex vertical="center">
                        <IconCircle
                            icon="lightbulb-on"
                            size="xs"
                            variant="yellow"
                        />
                        <Title
                            marginLeft="xs"
                            size={4}
                            text="r/LifeProTips"
                        />
                        <Body
                            color="light"
                            marginLeft="xs"
                            text="• Posted by u/xhuljanomuca 1 month ago"
                        />
                      </Flex>
                      <Body
                          paddingRight="md"
                          paddingTop="xs"
                          text="LPT: If you ever need a program you want for free (for example a video/photo editor) dont search \
                                for free,” search for open source to avoid limited trial versions, adverts and malware"
                      />
                      <Pill
                          marginTop="sm"
                          text="Computers"
                          variant="primary"
                      />
                      <Flex paddingTop="sm">
                        <IconValue
                            icon="comment-alt"
                            text="1.4k Comments"
                        />
                        <IconValue
                            icon="share"
                            marginLeft="sm"
                            text="Share"
                        />
                        <IconValue
                            icon="folder-plus"
                            marginLeft="sm"
                            text="Save"
                        />
                        <IconValue
                            icon="ellipsis-h"
                            marginLeft="sm"
                            text=""
                        />
                      </Flex>
                    </FlexItem>
                  </Flex>
                </Card>

                {/* Desktop post 2 */}
                <Card
                    marginTop="sm"
                    padding="none"
                >
                  <Flex>
                    <FlexItem
                        marginLeft="sm"
                        marginTop="sm"
                    >
                      <Icon
                          icon="arrow-alt-up"
                          marginLeft="none"
                          size="1x"
                      />
                      <Title
                          margin="xs"
                          marginLeft="none"
                          size={4}
                          text="8297"
                      />
                      <Icon
                          icon="arrow-alt-down"
                          marginLeft="none"
                          size="1x"
                      />
                    </FlexItem>
                    <FlexItem
                        fixedSize="85%"
                        paddingX="xs"
                        paddingY="sm"
                    >
                      <Flex vertical="center">
                        <IconCircle
                            icon="camera"
                            size="xs"
                            variant="blue"
                        />
                        <Title
                            marginLeft="xs"
                            size={4}
                            text="r/Pics"
                        />
                        <Body
                            color="light"
                            marginLeft="xs"
                            text="• Posted by u/stephenmckeon 13 hours ago"
                        />
                      </Flex>
                      <FlexItem>
                        <Flex
                            paddingTop="xs"
                            vertical="center"
                        >
                          <FlexItem>
                            <Body text="Foggy morning." />
                          </FlexItem>
                          <FlexItem marginLeft="xs">
                            <Pill
                                text="OC"
                                variant="success"
                            />
                          </FlexItem>
                        </Flex>
                      </FlexItem>
                      <Flex marginTop="sm">
                        <Image
                            className="post-image-desktop"
                            url="https://p-a6fbdk.t4.n0.cdn.getcloudapp.com/items/d5uPEJbY/readit_image_5.png"
                        />
                      </Flex>
                      <Flex paddingTop="sm">
                        <IconValue
                            icon="comment-alt"
                            text="1.4k Comments"
                        />
                        <IconValue
                            icon="share"
                            marginLeft="sm"
                            text="Share"
                        />
                        <IconValue
                            icon="folder-plus"
                            marginLeft="sm"
                            text="Save"
                        />
                        <IconValue
                            icon="ellipsis-h"
                            marginLeft="sm"
                            text=""
                        />
                      </Flex>
                    </FlexItem>
                  </Flex>
                </Card>

                {/* Desktop post 3 */}
                <Card
                    marginTop="sm"
                    padding="none"
                >
                  <Flex>
                    <FlexItem
                        marginLeft="sm"
                        marginTop="sm"
                    >
                      <Icon
                          icon="arrow-alt-up"
                          marginLeft="none"
                          size="1x"
                      />
                      <Title
                          margin="xs"
                          marginLeft="none"
                          size={4}
                          text="467"
                      />
                      <Icon
                          icon="arrow-alt-down"
                          marginLeft="none"
                          size="1x"
                      />
                    </FlexItem>
                    <FlexItem
                        paddingLeft="xs"
                        paddingRight="xl"
                        paddingY="sm"
                    >
                      <Flex vertical="center">
                        <IconCircle
                            icon="browser"
                            size="xs"
                            variant="purple"
                        />
                        <Title
                            marginLeft="xs"
                            size={4}
                            text="r/WebDesign"
                        />
                        <Body
                            color="light"
                            marginLeft="xs"
                            text="• Posted by u/creativebloq 1 week ago"
                        />
                      </Flex>
                      <Title
                          paddingRight="md"
                          paddingTop="xs"
                          size="4"
                          text="Use white space!"
                      />
                      <Body
                          paddingTop="sm"
                          text="It seems to be the hardest concept for developers to grasp: the biggest benefit to having the proper amount of \
                                white space is giving the user a break. Breaks are important for processing information, especially when there's \
                                a fair amount to process. It's why we have paragraphs and sentences instead of just a single, long block of running text."
                      />
                      <Body
                          paddingTop="sm"
                          text="The key is to ensure that white space has a relationship with other objects on the page, including the other space. \
                                If you have a single column of white space, make sure there's another single column of white space around to balance it."
                      />
                      <Body
                          color="light"
                          paddingTop="sm"
                          text="For vertical space, just use fractions of the body font size. I tend to keep things simple and use a scale of .25, \
                                but there are several other scales that you can use."
                      />
                      <Body
                          color="light"
                          paddingTop="sm"
                          text="For example, if the body font size is 16px(1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. \
                                This allows for choosing font sizes by simply moving up and down the scale as I want larger or smaller type..."
                      />
                      <Flex paddingTop="sm">
                        <IconValue
                            icon="comment-alt"
                            text="1.4k Comments"
                        />
                        <IconValue
                            icon="share"
                            marginLeft="sm"
                            text="Share"
                        />
                        <IconValue
                            icon="folder-plus"
                            marginLeft="sm"
                            text="Save"
                        />
                        <IconValue
                            icon="ellipsis-h"
                            marginLeft="sm"
                            text=""
                        />
                      </Flex>
                    </FlexItem>
                  </Flex>
                </Card>
              </Layout.Body>

              {/* Start side bar (desktop only) */}
              <Background backgroundColor="light">
                <Layout.Side marginLeft="md">
                  {/* Communities card */}
                  <Card
                      header
                      padding="none"
                      shadow="deeper"
                  >
                    <Card.Header
                        headerColor="category_1"
                        padding="xs"
                    >
                      <Flex vertical="center">
                        <Body
                            dark
                            padding="xs"
                            paddingRight="sm"
                        >
                          <Icon
                              icon="tree-large"
                              size="4x"
                          />
                        </Body>
                        <Body
                            dark
                            margin="xs"
                            marginRight="xs"
                            text="Outdoor communities — they're really out there"
                        />
                      </Flex>
                    </Card.Header>

                    {communities.map((community) => (
                      <>
                        <Flex
                            padding="xs"
                            paddingLeft="sm"
                            vertical="center"
                        >
                          <FlexItem>
                            <IconCircle
                                icon={community.icon}
                                size="sm"
                                variant={community.variant}
                            />
                          </FlexItem>
                          <FlexItem>
                            <Title
                                marginLeft="xs"
                                size={4}
                                text={community.subReadit}
                            />
                          </FlexItem>
                        </Flex>
                        <If condition={community !== communities[communities.length - 1]}>
                          <SectionSeparator />
                        </If>
                      </>
                    ))}

                    <Layout.Body paddingX="sm">
                      <Button
                          fullWidth
                          marginTop="xs"
                          text="VIEW ALL"
                      />
                      <Flex
                          paddingY="sm"
                          spacing="between"
                      >
                        <Badge
                            padding="xs"
                            text="Top"
                            variant="neutral"
                        />
                        <Badge
                            padding="xs"
                            text="Near You"
                            variant="neutral"
                        />
                        <Badge
                            padding="xs"
                            text="Aww"
                            variant="neutral"
                        />
                        <Badge
                            padding="xs"
                            text="Fitness"
                            variant="neutral"
                        />
                      </Flex>
                    </Layout.Body>
                  </Card>

                  {/* Readit premium card */}
                  <Card
                      marginTop="sm"
                      padding="xs"
                      shadow="deeper"
                  >
                    <Flex
                        margin="xs"
                        spacing="between"
                        vertical="center"
                    >
                      <FlexItem>
                        <Icon
                            icon="shield-alt"
                            marginRight="sm"
                            size="2x"
                        />
                      </FlexItem>
                      <FlexItem>
                        <Title
                            size={4}
                            text="Readit Premium"
                        />
                        <Caption
                            size="xs"
                            text="The best Readit experience, with monthly Coins"
                        />
                      </FlexItem>
                      <FlexItem>
                        <Button
                            paddingX="sm"
                            text="TRY NOW"
                            variant="secondary"
                        />
                      </FlexItem>
                    </Flex>
                  </Card>

                  {/* Trending communities card */}
                  <Card
                      marginTop="sm"
                      padding="sm"
                      shadow="deeper"
                  >
                    <Title
                        padding="xs"
                        size={4}
                        text="Trending Communities"
                    />

                    {trendingCommunities.map((community) => (
                      <Flex
                          key={community.subReadit}
                          marginY="xs"
                          spacing="between"
                          vertical="center"
                      >
                        <FlexItem>
                          <Flex>
                            <FlexItem>
                              <IconCircle
                                  icon={community.icon}
                                  size="sm"
                                  variant={community.variant}
                              />
                            </FlexItem>
                            <FlexItem>
                              <Title
                                  marginLeft="xs"
                                  size={4}
                                  text={community.subReadit}
                              />
                              <Body
                                  color="light"
                                  marginLeft="xs"
                                  text={community.members}
                              />
                            </FlexItem>
                          </Flex>
                        </FlexItem>
                        <FlexItem>
                          <Button
                              text="Join"
                              variant="secondary"
                          />
                        </FlexItem>
                      </Flex>
                    ))}
                  </Card>
                </Layout.Side>
              </Background>
              {/* End side bar (desktop only) */}
            </Layout>
          </div>
          {/* End popular posts */}
        </FlexItem>
      </Flex>
    </>
  )
}

export default CrowdsourcedPosts