Module to visually separate content
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.
<Panel
color="blue"
header="Hamburger"
footer="Bacon">
<p/>
</Panel>
Props | Type | Default | Description |
---|---|---|---|
header | string or component | false | Header content |
footer | string or component | false | Footer content |
color | string | silver | Color style |
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>
Props | Type | Default | Description |
---|---|---|---|
color | string | blue | |
active | boolean | false | |
outline | boolean | false | Outline button style |
transparent | boolean | false | Transparent button style |
size | string | false | Big and small size modifier |
flush | boolean | false | Remove space betweed buttons |
justified | boolean | false | Sets display block and centers text |
Used to label states and properties
<h1 className="m0">
Hamburger
<Badge color="blue">
Badge
</Badge>
</h1>
Props | Type | Default | Description |
---|---|---|---|
color | string | false | Color theme |
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>
Props | Type | Default | Description |
---|---|---|---|
wrap | boolean | true | Sets flex wrap |
justified | boolean | false | Sets flex auto and centered text on all children |
outline | boolean | false | Apply outline prop to children |
transparent | boolean | false | Apply transparent prop to children |
Progressive disclosure for showing lists of actions (Note: this uses the Dropdown.Item Subcomponent)
<Dropdown
label="Actions"
color="blue">
<Item
label="Action"
href="#dropdown"/>
<Item
label="Action"
href="#!"/>
<Item
label="Action"
href="#!"/>
</Dropdown>
Props | Type | Default | Description |
---|---|---|---|
label | string | '' | Label for dropdown toggle button |
right | boolean | false | Align the menu to the right edge of the toggle |
top | boolean | false | Position menu above the toggle |
flush | boolean | false | Remove space on the right side of the toggle button |
color | string | silver | Color theme |
Visual grouping for navigation links and other components
<Navbar color="blue">
<Item
label="Navbar.Item"
href="#Navbar"/>
<Item
label="Navbar.Item"
href="#Navbar"/>
<Spacer/>
<Toggle>
More
<Arrow/>
</Toggle>
<Drawer className="bg-darken-2">
<Item
label="Navbar.Item"
href="#Navbar"/>
<Item
label="Navbar.Item"
href="#Navbar"/>
<Group className="px2 py1">
<input
type="text"
className="field-dark"
placeholder="Search"/>
<Button className="white bg-darken-3">
Go
</Button>
</Group>
</Drawer>
</Navbar>
Props | Type | Default | Description |
---|---|---|---|
compact | boolean | false | Small navbar |
justified | boolean | false | Sets flex auto and centers text on all children |
wrap | boolean | true | Sets flex wrap |
color | string | silver | Color theme |
Hero banner with support for background images
Pastrami bacon wrapped hot dogs
<Banner
color="blue"
align="center"
backgroundImage="url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)"
header="Banner header"
footer="Banner footer">
<h1 className="h1 h1-responsive m0">
Hamburger
</h1>
<p className="h3 bold m0">
Pastrami bacon wrapped hot dogs
</p>
</Banner>
Props | Type | Default | Description |
---|---|---|---|
align | string | left | Text alignment |
header | string or component | false | Banner header content |
footer | string or component | false | Banner footer content |
color | string | black | Color theme |
backgroundImage | string | false | Background image style (can be url, linear-gradient, etc) |
backgroundPosition | string | center | Background position style |
backgroundSize | string | cover | Background size style |
Header element with visual spacing for page-level hierarchy
Bacon wrapped hot dogs
<PageHeader
title="Hamburger"
description="Bacon wrapped hot dogs"
right="Onion Rings"
size="big"/>
Props | Type | Default | Description |
---|---|---|---|
title | string or component |
| Page title |
description | string | false | Page description |
right | string or component | false | Content displayed on the right side |
size | string | medium | Font size for h1 title (medium, big, or huge) |
Flexbox based media object with alignment props
<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>
Props | Type | Default | Description |
---|---|---|---|
align | string | top | Flexbox vertical alignment (middle, top, bottom) |
Stateless pagination controls
<Pagination pages={[{"number":1,"href":"#Pagination"},{"number":2,"href":"#Pagination"},{"number":3,"href":"#Pagination"}]}/>
Props | Type | Default | Description |
---|---|---|---|
pages | array | [] | Array of page objects consisting of number and href |
currentIndex | number | 0 | Current page in pages array |
onClick | function | function() {} | Callback with the page number clicked passed as an argument |
previous | function | function() {} | onClick callback for the previous button |
next | function | function() {} | onClick callback for the next button |
color | string | blue | Color theme |
Link-based wayfinding for deep hierarchies
<Breadcrumbs links={[{"name":"Home","href":"#Breadcrumbs"},{"name":"Hamburgers","href":"#Breadcrumbs"},{"name":"Bacon Cheeseburger","href":"#Breadcrumbs"}]}/>
Props | Type | Default | Description |
---|---|---|---|
links | array | [] | Array of link objects consisting of name and href |
color | string | blue | Color theme |
Styled progress element
<Progress value={0.375}/>
Props | Type | Default | Description |
---|---|---|---|
value | number | 0 | Progress value between 0 and 1. Min and max can be set to any number |
color | string | blue | Color theme |
Modal overlay for handling discrete interactions
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. Drumstick pork fatback pork chop doner pork belly prosciutto pastrami sausage. Ground round prosciutto shank pastrami corned beef venison tail. Turkey short loin tenderloin jerky porchetta pork loin.
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. Drumstick pork fatback pork chop doner pork belly prosciutto pastrami sausage. Ground round prosciutto shank pastrami corned beef venison tail. Turkey short loin tenderloin jerky porchetta pork loin.
<Modal
header="Hamburger"
isOpen={false}
onDismiss={false}>
<p/>
</Modal>
Props | Type | Default | Description |
---|---|---|---|
open | boolean | false | When set to open, modal is visible |
onDismiss | function | function() {} | onClick callback when either the close button or overlay is clicked |
header | string or component |
| Header content |
size | string | medium | Width of modal (small, medium, big) |
fullBleed | boolean | false | Sets the modal to be full screen when open |
flush | boolean | false | Removes padding from modal body |
color | string | silver | Color theme |
Triangle arrow affordance used in the Dropdown component
<div>
<Arrow/>
<Arrow up={true}/>
</div>
Props | Type | Default | Description |
---|---|---|---|
up | boolean |
| Displays the arrow pointing upward |
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>
Props | Type | Default | Description |
---|---|---|---|
name | string |
| Camel cased icon id |
width | string |
| SVG width attribute |
height | string |
| SVG height attribute |
fill | string |
| SVG fill attribute |