Accordions

 
<div class="accordion">
    <div class="accordion_section">
        <div class="accordion_title">Accordion Title</div>
        <div class="accordion_content">
            <p>Lorem ipsum.</p>
        </div>
    </div>
    <div class="accordion_section">
        <div class="accordion_title">Accordion Title</div>
        <div class="accordion_content">
            <p>Lorem ipsum.</p>
        </div>
    </div>
</div>

Alert Bars

 
<div class="alert-bar">Alert Bar - Lorem ipsum dolor sit amet.</div>

 
<div class="alert-bar-error">Error Alert Bar - Lorem ipsum dolor sit amet.</div>

 
<div class="alert-bar-success">Success Alert Bar - Lorem ipsum dolor sit amet.</div>

 
<div class="alert-bar-help">Help Alert Bar - Lorem ipsum dolor sit amet.</div>

 
<div class="alert-bar-info">Info Alert Bar - Lorem ipsum dolor sit amet.</div>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget vulputate augue. Donec magna libero, ullamcorper a facilisis in, aliquet sit amet dui. Nam quis quam venenatis, dignissim eros ut, commodo ligula. In id interdum leo, vel ornare dui. In nec accumsan velit, non pellentesque sapien. Nunc vitae tellus erat. Vestibulum volutpat neque eu lorem pretium, at vestibulum orci dignissim. In bibendum, arcu fermentum euismod placerat, elit sapien pellentesque justo, in tristique nibh elit egestas purus. Integer augue ante, viverra quis nisi sit amet, faucibus placerat leo.

 
<blockquote class="blockquote">
    <p class="blockquote_content">....</p>
</blockquote>

Buttons

Default

 
<button class="button">Button</button>

Sizes

 
<button class="button-base">Button</button>

 
<button class="button-size-1">Button</button>

 
<button class="button-size-2">Button</button>

 
<button class="button-size-3">Button</button>

 
<button class="button-size-4">Button</button>

 
<button class="button-size-5">Button</button>

 
<button class="button-size-6">Button</button>

 
<button class="button-size-7">Button</button>

 
<button class="button-size-8">Button</button>

 
<button class="button-size-9">Button</button>

Colors

Brand Colors

 
<button class="button-brand-1">Button</button>

 
<button class="button-brand-2">Button</button>

 
<button class="button-brand-3">Button</button>

Greyscale Colors

 
<button class="button-white">Button</button>

 
<button class="button-grey-1">Button</button>

 
<button class="button-grey-2">Button</button>

 
<button class="button-grey-3">Button</button>

 
<button class="button-grey-4">Button</button>

 
<button class="button-grey-5">Button</button>

 
<button class="button-grey-6">Button</button>

 
<button class="button-black">Button</button>

Alert Colors

 
<button class="button-error">Button</button>

 
<button class="button-help">Button</button>

 
<button class="button-info">Button</button>

 
<button class="button-success">Button</button>

Social Colors

 
<button class="button-facebook">Button</button>

 
<button class="button-twitter">Button</button>

 
<button class="button-linkedin">Button</button>

 
<button class="button-github">Button</button>

 
<button class="button-skype">Button</button>

 
<button class="button-pinterest">Button</button>

 
<button class="button-instagram">Button</button>

 
<button class="button-rss">Button</button>

 
<button class="button-youtube">Button</button>

 
<button class="button-flickr">Button</button>

 
<button class="button-vimeo">Button</button>

 
<button class="button-dribbble">Button</button>

 
<button class="button-behance">Button</button>

 
<button class="button-deviantart">Button</button>

 
<button class="button-reddit">Button</button>

 
<button class="button-google-plus">Button</button>

 
<button class="button-email">Button</button>

 
<button class="button-stumbleupon">Button</button>

Modifiers

 
<button class="button-block">Button</button>

 
<button class="button-border">Button</button>

 
<button class="button-disabled">Button</button>

 
<button class="button-round">Button</button>

 
<button class="button-oval">Button</button>

 
<button class="button-circle">Button</button>

 
<button class="button-sharp">Button</button>

 
<button class="button-icon">Button</button>

 
<button class="button-icon-plain"><i class="fa fa-star"></i></button>

 
<button class="button-active">Button</button>

Custom Styles

 
<button class="button-primary">Button</button>

 
<button class="button-secondary">Button</button>

Components

 
<div class="button_group">
    <button class="button">button</button>
    <button class="button">button</button>
    <button class="button">button</button>
</div>

 
<div class="button_group-pills">
    <button class="button">button</button>
    <button class="button">button</button>
    <button class="button">button</button>
</div>

 
<div class="button_group-pills">
    <button class="button-round">button</button>
    <button class="button-round">button</button>
    <button class="button-round">button</button>
</div>

Forms

Modals