Github

Made by Jxnblk

Components

Panel

Module to visually separate content

Hamburger

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.

Bacon
<Panel
  color="blue"
  header="Hamburger"
  footer="Bacon">
  <p/>
</Panel>
PropsTypeDefaultDescription
headerstring or componentfalseHeader content
footerstring or componentfalseFooter content
colorstringsilverColor style

Button

Themeable button component with solid, outline, and transparent variations

<div>
  <Button color="blue">
    Button
  </Button>
  <Button
    color="blue"
    outline={true}>
    Button
  </Button>
  <Button
    color="blue"
    transparent={true}>
    Button
  </Button>
</div>
PropsTypeDefaultDescription
colorstringblue
activebooleanfalse
outlinebooleanfalseOutline button style
transparentbooleanfalseTransparent button style
sizestringfalseBig and small size modifier
flushbooleanfalseRemove space betweed buttons
justifiedbooleanfalseSets display block and centers text

Badge

Used to label states and properties

Hamburger Badge

<h1 className="m0">
  Hamburger 
  <Badge color="blue">
    Badge
  </Badge>
</h1>
PropsTypeDefaultDescription
colorstringfalseColor theme

Group

Groups buttons and inputs together

<Group>
  <input
    type="text"
    className="m0 field-light border-blue"/>
  <Button
    color="blue"
    outline={true}>
    Go
  </Button>
  <Button color="blue">
    Bacon
  </Button>
</Group>
PropsTypeDefaultDescription
wrapbooleantrueSets flex wrap
justifiedbooleanfalseSets flex auto and centered text on all children
outlinebooleanfalseApply outline prop to children
transparentbooleanfalseApply transparent prop to children

Media

Flexbox based media object with alignment props

Media Object
Media Object
Media Object
Media Object
<div>
  <Media>
    <Img src="//placehold.it/64"/>
    <Body>
      Media Object
    </Body>
  </Media>
  <Media align="middle">
    <Img>
      <div/>
    </Img>
    <Body>
      Media Object
    </Body>
  </Media>
  <Media align="bottom">
    <Img src="//placehold.it/64"/>
    <Body>
      Media Object
    </Body>
  </Media>
  <Media align="middle">
    <Body>
      Media Object
    </Body>
    <Img src="//placehold.it/64"/>
  </Media>
</div>
PropsTypeDefaultDescription
alignstringtopFlexbox vertical alignment (middle, top, bottom)

Pagination

Stateless pagination controls

123
<Pagination pages={[{"number":1,"href":"#Pagination"},{"number":2,"href":"#Pagination"},{"number":3,"href":"#Pagination"}]}/>
PropsTypeDefaultDescription
pagesarray[]Array of page objects consisting of number and href
currentIndexnumber0Current page in pages array
onClickfunctionfunction() {}Callback with the page number clicked passed as an argument
previousfunctionfunction() {}onClick callback for the previous button
nextfunctionfunction() {}onClick callback for the next button
colorstringblueColor theme

Progress

Styled progress element

0.375
<Progress value={0.375}/>
PropsTypeDefaultDescription
valuenumber0Progress value between 0 and 1. Min and max can be set to any number
colorstringblueColor theme

Arrow

Triangle arrow affordance used in the Dropdown component

<div>
  <Arrow/>
  <Arrow up={true}/>
</div>
PropsTypeDefaultDescription
upbooleanDisplays the arrow pointing upward

Icon

Icons from Geomicons

<div className="h2 flex flex-center flex-wrap mxn2 blue">
  <Icon
    name="bookmark"
    className="m2"/>
  <Icon
    name="calendar"
    className="m2"/>
  <Icon
    name="camera"
    className="m2"/>
  <Icon
    name="chat"
    className="m2"/>
  <Icon
    name="check"
    className="m2"/>
  <Icon
    name="chevronDown"
    className="m2"/>
  <Icon
    name="chevronLeft"
    className="m2"/>
  <Icon
    name="chevronRight"
    className="m2"/>
  <Icon
    name="chevronUp"
    className="m2"/>
  <Icon
    name="clock"
    className="m2"/>
  <Icon
    name="close"
    className="m2"/>
  <Icon
    name="cloud"
    className="m2"/>
  <Icon
    name="cog"
    className="m2"/>
  <Icon
    name="compose"
    className="m2"/>
  <Icon
    name="expand"
    className="m2"/>
  <Icon
    name="external"
    className="m2"/>
  <Icon
    name="file"
    className="m2"/>
  <Icon
    name="folder"
    className="m2"/>
  <Icon
    name="geolocation"
    className="m2"/>
  <Icon
    name="grid"
    className="m2"/>
  <Icon
    name="heart"
    className="m2"/>
  <Icon
    name="home"
    className="m2"/>
  <Icon
    name="info"
    className="m2"/>
  <Icon
    name="link"
    className="m2"/>
  <Icon
    name="list"
    className="m2"/>
  <Icon
    name="lock"
    className="m2"/>
  <Icon
    name="mail"
    className="m2"/>
  <Icon
    name="musicNote"
    className="m2"/>
  <Icon
    name="next"
    className="m2"/>
  <Icon
    name="no"
    className="m2"/>
  <Icon
    name="pause"
    className="m2"/>
  <Icon
    name="picture"
    className="m2"/>
  <Icon
    name="pin"
    className="m2"/>
  <Icon
    name="play"
    className="m2"/>
  <Icon
    name="previous"
    className="m2"/>
  <Icon
    name="refresh"
    className="m2"/>
  <Icon
    name="repost"
    className="m2"/>
  <Icon
    name="search"
    className="m2"/>
  <Icon
    name="shoppingCart"
    className="m2"/>
  <Icon
    name="skull"
    className="m2"/>
  <Icon
    name="speakerVolume"
    className="m2"/>
  <Icon
    name="speaker"
    className="m2"/>
  <Icon
    name="star"
    className="m2"/>
  <Icon
    name="tag"
    className="m2"/>
  <Icon
    name="trash"
    className="m2"/>
  <Icon
    name="triangleDown"
    className="m2"/>
  <Icon
    name="triangleLeft"
    className="m2"/>
  <Icon
    name="triangleRight"
    className="m2"/>
  <Icon
    name="triangleUp"
    className="m2"/>
  <Icon
    name="user"
    className="m2"/>
  <Icon
    name="video"
    className="m2"/>
  <Icon className="m2"/>
</div>
PropsTypeDefaultDescription
namestringCamel cased icon id
widthstringSVG width attribute
heightstringSVG height attribute
fillstringSVG fill attribute