<Button rounded={true}>
  Arrow
  <Arrow direction="down" />
</Button>

<Avatar
  size={48}
  src="http://lorempixel.com/64/64/cats"
/>

<div>
  <Heading level={2}>
    Rebass
    <Space x={1} />
    <Badge type="info">
      0.2.0
    </Badge>
  </Heading>
</div>

<Banner
  align="center"
  backgroundImage="https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg"
>
  <Heading
    level={2}
    size={0}
  >
    Rebass
  </Heading>
</Banner>

Block

Generic box for containing things

<Block
  borderLeft={true}
  color="blue"
>
  <Media img="http://lorempixel.com/128/128/cats">
    <Heading
      level={2}
      size={0}
    >
      Block
    </Heading>
    <Text>
      Generic box for containing things
    </Text>
  </Media>
</Block>

<Breadcrumbs links={[{children: 'Jxnblk', href: '#!'}, {children: 'Rebass', href: '#!'}, {children: 'Breadcrumbs', href: '#!'}]} />

<div>
  <Button rounded={true}>
    Button
  </Button>
</div>

<div>
  <ButtonOutline rounded="left">
    Button
  </ButtonOutline>
  <ButtonOutline
    rounded={false}
    style={{marginLeft: -1}}
  >
    Group
  </ButtonOutline>
  <Button
    rounded="right"
    style={{marginLeft: -1}}
  >
    Button
  </Button>
</div>

Card

Cats like cards too

<Card width={256}>
  <CardImage src="http://placehold.it/320" />
  <Heading
    level={2}
    size={3}
  >
    Card
  </Heading>
  <Text>
    Cats like cards too
  </Text>
</Card>

<div style={{maxWidth: 192}}>
  <CardImage src="http://placehold.it/320" />
</div>

<Checkbox
  label="Checkbox"
  name="checkbox_example"
/>

<Close />

<Container>
  Container
</Container>

<Divider />

<a href="demo">
  See Demo Page
</a>

<Block>
  <Dropdown>
    <Button rounded={true}>
      Dropdown 
      <Arrow direction="down" />
    </Button>
    <DropdownMenu open={true}>
      <NavItem Component="a">
        Hello
      </NavItem>
      <NavItem Component="a">
        Hi
      </NavItem>
    </DropdownMenu>
  </Dropdown>
</Block>

<a href="#Dropdown">
  See Dropdown Example
</a>

<Embed ratio={0.5625}>
  <iframe
    allowFullScreen={true}
    src="https://www.youtube.com/embed/658WsCFwm9A"
  />
</Embed>

<Footer>
  Footer™ ©2016 Jxnblk
</Footer>

<Input
  label="Input"
  name="input_example"
  placeholder="Placeholder"
  rounded={true}
  type="text"
/>

<Label>
  Label for form elements
</Label>

Media Object

With alignment options

<Media
  align="center"
  img="http://placehold.it/128"
>
  <Heading level={3}>
    Media Object
  </Heading>
  <Text>
    With alignment options
  </Text>
</Media>

<Menu>
  <NavItem Component="a">
    Menu
  </NavItem>
  <NavItem Component="a">
    NavItem
  </NavItem>
  <NavItem Component="a">
    NavItem
  </NavItem>
</Menu>

<Message type="success">
  Hello Message!
  <Space
    auto={true}
    x={1}
  />
  <Close />
</Message>

<PageHeader
  description="Description about the page"
  heading="Page Header"
/>

<Panel type="info">
  <PanelHeader type="default">
    Panel
  </PanelHeader>
  <Text>
    Panels are great for visually separating UI, content, or data from the rest of the page.
  </Text>
  <PanelFooter type="default">
    The footer is a good place for less important information
  </PanelFooter>
</Panel>

const pre = { preformatted: 'text' }

<Pre>
  const pre = { preformatted: 'text' }
</Pre>

<Progress value={0.25} />

<Radio
  label="Radio"
  name="radio_example"
/>

<Section>
  Section
</Section>

<Section>
  <SectionHeader
    description="With linked header"
    heading="Section Header"
  />
  Section
</Section>

<Select
  label="Select"
  name="select_example"
  options={[{label: 'Two', value: 2}, {label: 'Four', value: 4}, {label: 'Eight', value: 8}, {label: 'Sixteen', value: 16}, {label: 'Thirty-Two', value: 32}, {label: 'Sixty-Four', value: 64}]}
/>

<div>
  <Button rounded={true}>
    Button
  </Button>
  <Space x={1} />
  <Button rounded={true}>
    With
  </Button>
  <Space x={4} />
  <Button rounded={true}>
    Space
  </Button>
</div>

<Toolbar>
  <NavItem Component="a">
    Toolbar
  </NavItem>
  <NavItem Component="a">
    NavItem
  </NavItem>
  <Space
    auto={true}
    x={1}
  />
  <NavItem Component="a">
    NavItem
  </NavItem>
</Toolbar>

<Tooltip title="Hello!">
  <Heading level={3}>
    Tooltip
  </Heading>
</Tooltip>