10.12.0

Samples

/

Full Page Samples

News Magazine

Copy to Clipboard
import React from 'react' import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from 'playbook-ui' const NewsMagazine = () => { window.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('[class*="pb_image_kit"]').forEach((element) => { element.style.width = '100%' element.style.height = '200px' }) }) return ( <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://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" /> <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 headerColor="category_2"> <Caption dark text="World" /> </Card.Header> <Card.Body padding="none"> <Image url="https://images.unsplash.com/photo-1500202352583-7b2fc394ed15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /> <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 headerColor="category_3"> <Caption dark text="Books" /> </Card.Header> <Card.Body padding="none"> <Image url="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" /> <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 headerColor="category_4"> <Caption dark text="National" /> </Card.Header> <Card.Body padding="none"> <Image url="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80" /> <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 headerColor="category_5"> <Caption dark text="Books, News, and Features" /> </Card.Header> <Card.Body padding="none"> <Image url="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /> <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 headerColor="category_6"> <Caption dark text="Science" /> </Card.Header> <Card.Body padding="none"> <Image url="https://images.unsplash.com/photo-1558677949-260173506bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80" /> <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 NewsMagazine
import React from 'react'
import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from 'playbook-ui'

const NewsMagazine = () => {
  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[class*="pb_image_kit"]').forEach((element) => {
      element.style.width = '100%'
      element.style.height = '200px'
    })
  })

  return (
    <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://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" />
              <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 headerColor="category_2">
              <Caption
                  dark
                  text="World"
              />
            </Card.Header>
            <Card.Body padding="none">
              <Image url="https://images.unsplash.com/photo-1500202352583-7b2fc394ed15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
              <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 headerColor="category_3">
              <Caption
                  dark
                  text="Books"
              />
            </Card.Header>
            <Card.Body padding="none">
              <Image url="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
              <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 headerColor="category_4">
              <Caption
                  dark
                  text="National"
              />
            </Card.Header>
            <Card.Body padding="none">
              <Image url="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80" />
              <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 headerColor="category_5">
              <Caption
                  dark
                  text="Books, News, and Features"
              />
            </Card.Header>
            <Card.Body padding="none">
              <Image url="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" />
              <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 headerColor="category_6">
              <Caption
                  dark
                  text="Science"
              />
            </Card.Header>
            <Card.Body padding="none">
              <Image url="https://images.unsplash.com/photo-1558677949-260173506bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80" />
              <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 NewsMagazine