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

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

<Flex align="center">
  <Heading level={4}>
    Rebass 
    <Space x={1} />
    <Badge type="info">
      0.2.0
    </Badge>
  </Heading>
  <Space x={2} />
  <Heading level={4}>
    Pill 
    <Space x={1} />
    <Badge
      pill={true}
      type="info"
    >
      Pill
    </Badge>
  </Heading>
  <Space x={2} />
  <Heading level={4}>
    Circular Things 
    <Space x={1} />
    <Badge
      circle={true}
      type="error"
    >
      4
    </Badge>
  </Heading>
</Flex>

<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://placehold.it/128/08e/fff">
    <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>

<Flex
  align="center"
  justify="space-between"
  wrap={true}
>
  <ButtonCircle title="Like">
    <Icon
      fill="currentColor"
      height="1em"
      name="heart"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Comment">
    <Icon
      fill="currentColor"
      height="1em"
      name="chat"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Repost">
    <Icon
      fill="currentColor"
      height="1em"
      name="repost"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Bookmark">
    <Icon
      fill="currentColor"
      height="1em"
      name="bookmark"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Tag">
    <Icon
      fill="currentColor"
      height="1em"
      name="tag"
      width="1em"
    />
  </ButtonCircle>
</Flex>

<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/08e/fff" />
  <Heading
    level={2}
    size={3}
  >
    Card
  </Heading>
  <Text>
    Cats like cards too
  </Text>
</Card>

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

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

<Close />

<Container>
  Container
</Container>

<div>
  <Divider />
  <Divider
    ml={0}
    width={128}
  />
</div>

<Flex
  align="center"
  justify="space-between"
  wrap={true}
>
  <Donut
    size={256}
    strokeWidth={32}
    value={0.5625}
  />
  <Donut
    size={128}
    strokeWidth={8}
    value={0.5625}
  >
    9/16
  </Donut>
  <Donut
    size={128}
    strokeWidth={8}
    value={0.625}
  />
  <Donut
    size={128}
    strokeWidth={8}
    value={0.125}
  />
</Flex>

<div>
  <DotIndicator
    active={0}
    length={3}
    onClick={function noRefCheck() {}}
  />
</div>

<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/KO_3Qgib6RQ"
  />
</Embed>

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

<InlineForm
  buttonLabel="Go"
  label="InlineForm"
  name="inline_form"
  onChange={function noRefCheck() {}}
  onClick={function noRefCheck() {}}
/>

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

<Label>
  Label for form elements
</Label>

LinkBlock

<LinkBlock
  Component="a"
  href="#LinkBlock"
>
  <Media
    align="center"
    img="http://placehold.it/96/08e/fff"
  >
    <Heading level={3}>
      LinkBlock
    </Heading>
  </Media>
</LinkBlock>

Media Object

With alignment options

<Media
  align="center"
  img="http://placehold.it/128/08e/fff"
>
  <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>

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

<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"
/>

<Rating value={3.5} />

<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}]}
/>

<SequenceMap
  active={1}
  steps={[{children: 'Sign In', href: '#!'}, {children: 'Shipping Address', href: '#!'}, {children: 'Payment Method', href: '#!'}, {children: 'Place Order', href: '#!'}]}
/>

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

<Flex
  justify="space-between"
  wrap={true}
>
  <Stat
    label="Memory"
    unit="GB"
    value="512"
  />
  <Stat
    label="PetaFLOPS"
    value="32"
  />
  <Stat
    label="Upload"
    unit="Mbps"
    value="512"
  />
  <Stat
    label="Download"
    unit="Mbps"
    value="1,024"
  />
</Flex>

<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>