ratchet/docs/components.html

---
layout: default
title: Components · Ratchet
---

<div class="docs-sub-header">
  {% include masthead.html %}
  <div class="container">
    <div class="column-group">
      <div class="column units-2">
        <div class="docs-sub-content">
          <h2 class="page-title">Components</h2>
          <p class="page-description">Design patterns that serve as basic building blocks</p>
        </div>
      </div>
    </div>
    {% include ad.html %}
  </div>
  {% include toolbar.html %}
</div>

<div class="container">
  <!-- Components -->
  <div class="docs-components column-group">  
    <div class="device-column column units-2 lg-units-5 pull-right">
      <!-- In phone examples -->
      <div class="device js-device">
        <div class="device-content">
          <div id="iwindow">
            <header class="bar bar-nav">
              <h1 class="title">Title</h1>
            </header>
          </div>
        </div>
      </div>
    </div>

    <div class="column units-2 lg-units-7">
      <!-- Bars -->
      <article class="component active" id="bars">
        <h3 class="component-title">Title bar</h3>
        <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>

        <div class="component-example component-example-fullbleed">
          <header class="bar bar-nav">
            <h1 class="title">Title</h1>
          </header>
        </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">Title</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">Title bar with buttons</h3>
      <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-right</code> utility classes to float the buttons. Also, be sure to place any floated elements bofore the title.</p>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <a class="btn pull-left">
            Left
          </a>
          <a class="btn pull-right">
            Right
          </a>
          <h1 class="title">Title</h1>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <a class="btn pull-left">
    Left
  </a>
  <a class="btn pull-right">
    Right
  </a>
  <h1 class="title">Title</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">Title bar with icons</h3>
      <p class="component-description">Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.</p>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <a class="icon icon-left-nav pull-left"></a>
          <a class="icon icon-compose pull-right"></a>
          <h1 class="title">Title</h1>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <a class="icon icon-left-nav pull-left"></a>
  <a class="icon icon-compose pull-right"></a>
  <h1 class="title">Title</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">Title bar with link buttons and icons</h3>
      <p class="component-description">Link buttons can be used in tool bars to remove the outline. Use these in conjuction with icons to recreate the nav feel from iOS7. Note the use of <code>.btn-nav</code> to bring the buttons a little bit closer to the edge of the viewport.</p>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <a class="btn btn-link btn-nav pull-left">
            <span class="icon icon-left-nav"></span>
            Left
          </a>
          <a class="btn btn-link btn-nav pull-right">
            Right
            <span class="icon icon-right-nav"></span>
          </a>
          <h1 class="title">Title</h1>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <a class="btn btn-link btn-nav pull-left">
    <span class="icon icon-left-nav"></span>
    Left
  </a>
  <a class="btn btn-link btn-nav pull-right">
    Right
    <span class="icon icon-right-nav"></span>
  </a>
  <h1 class="title">Title</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">Title bar with segmented control</h3>
      <p class="component-description">Title bars can also house segmented controls. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <a class="btn pull-left">
            Left
          </a>
          <a class="btn pull-right">
            Right
          </a>
          <div class="segmented-control">
            <a class="control-item active">One</a>
            <a class="control-item">Two</a>
            <a class="control-item">Three</a>
          </div>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <a class="btn pull-left">
    Left
  </a>
  <a class="btn pull-right">
    Right
  </a>
  <div class="segmented-control">
    <a class="control-item active">One</a>
    <a class="control-item">Two</a>
    <a class="control-item">Three</a>
  </div>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">Tab bar</h3>
      <p class="component-description">Use Ratchicons in the <code>.tab-bar</code> to represent different sections of your app.</p>

      <div class="component-example component-example-fullbleed">
        <nav class="bar bar-tab">
          <a class="tab-item active" href="#">
            <span class="icon icon-home"></span>
            <span class="tab-label">Label</span>
          </a>
          <a class="tab-item" href="#">
            <span class="icon icon-person"></span>
            <span class="tab-label">Label</span>
          </a>
          <a class="tab-item" href="#">
            <span class="icon icon-star-filled"></span>
            <span class="tab-label">Label</span>
          </a>
          <a class="tab-item" href="#">
            <span class="icon icon-search"></span>
            <span class="tab-label">Label</span>
          </a>
          <a class="tab-item" href="#">
            <span class="icon icon-gear"></span>
            <span class="tab-label">Label</span>
          </a>
        </nav>
      </div>

{% highlight html %}
<nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">Home</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-person"></span>
    <span class="tab-label">Profile</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-star-filled"></span>
    <span class="tab-label">Favorites</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-search"></span>
    <span class="tab-label">Search</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-gear"></span>
    <span class="tab-label">Settings</span>
  </a>
</nav>
{% endhighlight %}

    <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
  </article>

  <article class="component">
      <h3 class="component-title">Tab bar (labels only)</h3>
      <p class="component-description">If you don't want to use icons, that's okay too. The text will appear larger to use the additional space.</p>

      <div class="component-example component-example-fullbleed">
        <nav class="bar bar-tab">
          <a class="tab-item active" href="#">
            Label
          </a>
          <a class="tab-item" href="#">
            Label
          </a>
          <a class="tab-item" href="#">
            Label
          </a>
        </nav>
      </div>

{% highlight html %}
<nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    Label
  </a>
  <a class="tab-item" href="#">
    Label
  </a>
  <a class="tab-item" href="#">
    Label
  </a>
</nav>
{% endhighlight %}

    <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
  </article>

  <article class="component">
      <h3 class="component-title">Standard bars</h3>
      <p class="component-description">Standard bars are basic fixed elements that can be positioned in four places. These can be used to house buttons, icons, or segmented controls (see following examples).</p>

      <div class="component-example component-example-fullbleed">
        <!-- Segmented control in standard bar fixed to top -->
        <nav class="bar bar-standard">
          <div class="segmented-control">
            <a class="control-item active">Thing one</a>
            <a class="control-item">Thing two</a>
            <a class="control-item">Thing three</a>
          </div>
        </nav>

        <!-- Block button in standard bar fixed below top bar -->
        <div class="bar bar-standard bar-header-secondary">
          <a class="btn btn-block">Block level button</a>
        </div>


        <!-- Block button in standard bar fixed below top bar -->
        <div class="bar bar-standard bar-footer">
          <a class="btn btn-block">Block level button</a>
        </div>
      </div>

{% highlight html %}
<!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard">
  <div class="segmented-control">
    <a class="control-item active">Thing one</a>
    <a class="control-item">Thing two</a>
    <a class="control-item">Thing three</a>
  </div>
</nav>

<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
  <a class="btn btn-block">Block level button</a>
</div>

<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-standard bar-footer-secondary">
  <a class="btn btn-block">Block level button</a>
</div>

<!-- Icons in standard bar fixed to the bottom of the screen -->
<div class="bar bar-standard bar-footer">
  <a class="icon icon-compose pull-left"></a>
  <a class="icon icon-gear pull-right"></a>
</div>
{% endhighlight %}

  </article>

  <!-- Typography -->
  <article class="component" id="typography">
    <h3 class="component-title">Typography</h3>
    <p class="component-description">Use headings and paragraphs to title and describe sections of your app. Apply or wrap elements with <code>.content-padded</code> to give the content space around the screen.</p>

    <div class="component-example component-example-fullbleed">
      <div class="content-padded">
        <h1>h1. Heading</h1>
        <h2>h2. Heading</h2>
        <h3>h3. Heading</h3>
        <h4>h4. Heading</h4>
        <h5>h5. Heading</h5>
        <h6>h6. Heading</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco.</p>
      </div>
    </div>

{% highlight html %}
<div class="content-padded">
  <h1>h1. Heading</h1>
  <h2>h2. Heading</h2>
  <h3>h3. Heading</h3>
  <h4>h4. Heading</h4>
  <h5>h5. Heading</h5>
  <h6>h6. Heading</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco.</p>
</div>
{% endhighlight %}

  </article>

  <!-- Table views -->
  <article class="component" id="table-views">
    <h3 class="component-title">Table views</h3>
    <p class="component-description">Table views can be used for organizing data, showing collections of links, or a series of controls.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">Item 1</li>
        <li class="table-view-cell">Item 2</li>
        <li class="table-view-cell table-view-divider">Divider</li>
        <li class="table-view-cell">Item 3</li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">Item 1</li>
  <li class="table-view-cell table-view-cell">Item 2</li>
  <li class="table-view-divider">Divider</li>
  <li class="table-view-cell">Item 3</li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with chevrons</h3>
    <p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.push-right</code> or <code>.push-left</code> to use a chevron.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">
          <a class="push-right">
            Item 1
          </a>
        </li>
        <li class="table-view-cell">
          <a class="push-right">
            Item 2
          </a>
        </li>
        <li class="table-view-cell">
          <a class="push-right">
            Item 3
          </a>
        </li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">
    <a class="push-right">
      Item 1
    </a>
  </li>
  <li class="table-view-cell">
    <a class="push-right">
      Item 2
    </a>
  </li>
  <li class="table-view-cell">
    <a class="push-right">
      Item 3
    </a>
  </li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with badges</h3>
    <p class="component-description">Badges are a great way of showing data.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
        <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
        <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
  <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
  <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with badges and chevrons</h3>
    <p class="component-description">Feel free to use chevrons and badges together. They'll automatically positon themselves correctly.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">
          <a class="push-right">
            <span class="badge">5</span>
            Item 1
          </a>
        </li>
        <li class="table-view-cell">
          <a class="push-right">
            <span class="badge">5</span>
            Item 2
          </a>
        </li>
        <li class="table-view-cell">
          <a class="push-right">
            <span class="badge">5</span>
            Item 3
          </a>
        </li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">
    <a class="push-right">
      <span class="badge">5</span>
      Item 1
    </a>
  </li>
  <li class="table-view-cell">
    <a class="push-right">
      <span class="badge">5</span>
      Item 2
    </a>
  </li>
  <li class="table-view-cell">
    <a class="push-right">
      <span class="badge">5</span>
      Item 3
    </a>
  </li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with media (images)</h3>
    <p class="component-description">Showing media inside table views is easy. This component to perfect for images and text.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell media">
          <a class="push-right">
            <img class="media-object pull-left" src="http://placehold.it/42x42">
            <div class="media-body">
              Item 1
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
          </a>
        </li>
        <li class="table-view-cell media">
          <a class="push-right">
            <img class="media-object pull-left" src="http://placehold.it/42x42">
            <div class="media-body">
              Item 1
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
          </a>
        </li>
        <li class="table-view-cell media">
          <a class="push-right">
            <img class="media-object pull-left" src="http://placehold.it/42x42">
            <div class="media-body">
              Item 1
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell media">
    <a class="push-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="push-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="push-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with media (icons)</h3>
    <p class="component-description">Ratchicons can also used instead of images.</p>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell media">
          <a class="push-right">
            <span class="media-object pull-left icon icon-trash"></span>
            <div class="media-body">
              Item 1
            </div>
          </a>
        </li>
        <li class="table-view-cell media">
          <a class="push-right">
            <span class="media-object pull-left icon icon-gear"></span>
            <div class="media-body">
              Item 2
            </div>
          </a>
        </li>
        <li class="table-view-cell media">
          <a class="push-right">
            <span class="media-object pull-left icon icon-pages"></span>
            <div class="media-body">
              Item 3
            </div>
          </a>
        </li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell media">
    <a class="push-right">
      <span class="media-object pull-left icon icon-trash"></span>
      <div class="media-body">
        Item 1
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="push-right">
      <span class="media-object pull-left icon icon-gear"></span>
      <div class="media-body">
        Item 2
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="push-right">
      <span class="media-object pull-left icon icon-pages"></span>
      <div class="media-body">
        Item 3
      </div>
    </a>
  </li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with buttons</h3>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
        <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
        <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
        <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
  <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
  <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
  <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Table view with toggles</h3>

    <div class="component-example component-example-fullbleed">
      <ul class="table-view">
        <li class="table-view-cell">
          Item 1
          <div class="toggle">
            <div class="toggle-handle"></div>
          </div>
        </li>
        <li class="table-view-cell">
          Item 2
          <div class="toggle active">
            <div class="toggle-handle"></div>
          </div>
        </li>
        <li class="table-view-cell">
          Item 3
          <div class="toggle">
            <div class="toggle-handle"></div>
          </div>
        </li>
      </ul>
    </div>

{% highlight html %}
<ul class="table-view">
  <li class="table-view-cell">
    Item 1
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 2
    <div class="toggle active">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 3
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
</ul>
{% endhighlight %}

  </article>

  <article class="component">
    <h3 class="component-title">Carded table views</h3>
    <p class="component-description">Use <code>.card</code> to wrap any content in a padded element.</p>

    <div class="component-example">
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">Item 1</li>
          <li class="table-view-cell">Item 2</li>
          <li class="table-view-cell table-view-divider">Divider</li>
          <li class="table-view-cell">Item 3</li>
          <li class="table-view-cell">Item 4</li>
        </ul>
      </div>
    </div>

{% highlight html %}
<div class="card">
  <ul class="table-view">
    <li class="table-view-cell">Item 1</li>
    <li class="table-view-cell">Item 2</li>
    <li class="table-view-cell table-view-divider">Divider</li>
    <li class="table-view-cell">Item 3</li>
    <li class="table-view-cell">Item 4</li>
  </ul>
</div>
{% endhighlight %}

  </article>

  <!-- Buttons -->
  <article class="component" id="buttons">
    <h3 class="component-title">Buttons</h3>
    <p class="component-description">Buttons come in many flavors and should be used for user actions.</p>

    <div class="component-example">
      <a class="btn">Button</a>
      <a class="btn btn-primary">Button</a>
      <a class="btn btn-positive">Button</a>
      <a class="btn btn-negative">Button</a>
      <a class="btn btn-link">Button</a>
    </div>

{% highlight html %}
<a class="btn">Button</a>
<a class="btn btn-primary">Button</a>
<a class="btn btn-positive">Button</a>
<a class="btn btn-negative">Button</a>
<a class="btn btn-link">Button</a>
      
<a class="btn">
  <span class="icon icon-search"></span>
  Button
</a>
<a class="btn btn-primary">
  <span class="icon icon-search"></span>
  Button
</a>
<a class="btn btn-positive">
  <span class="icon icon-search"></span>
  Button
</a>
<a class="btn btn-negative">
  <span class="icon icon-search"></span>
  Button
</a>
<a class="btn btn-link">
  <span class="icon icon-left"></span>
  Button
</a>
{% endhighlight %}

  </article>

  <article class="component" id="buttonsBadges">
    <h3 class="component-title">Buttons with badges</h3>

    <div class="component-example">
      <a class="btn">Badge button <span class="badge">1</span></a>
      <a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
      <a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
      <a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
    </div>

{% highlight html %}
<a class="btn">Badge button <span class="badge">1</span></a>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>

<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a>
<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
{% endhighlight %}

  </article>

  <article class="component" id="blockButtons">
    <h3 class="component-title">Block buttons</h3>

    <div class="component-example">
      <a class="btn btn-block">Block button</a>
      <a class="btn btn-primary btn-block">Block button</a>
      <a class="btn btn-positive btn-block">Block button</a>
      <a class="btn btn-negative btn-block">Block button</a>

      <a class="btn btn-block btn-outlined">Block button</a>
      <a class="btn btn-primary btn-block btn-outlined">Block button</a>
      <a class="btn btn-positive btn-block btn-outlined">Block button</a>
      <a class="btn btn-negative btn-block btn-outlined">Block button</a>
    </div>

{% highlight html %}
<a class="btn btn-block">Block button</a>
<a class="btn btn-primary btn-block">Block button</a>
<a class="btn btn-positive btn-block">Block button</a>
<a class="btn btn-negative btn-block">Block button</a>

<a class="btn btn-block btn-outlined">Block button</a>
<a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="btn btn-negative btn-block btn-outlined">Block button</a>
{% endhighlight %}

  </article>

  <!-- Segmented Control -->
  <article class="component" id="segmentedControls">
    <h3 class="component-title">Segmented control</h3>
    <p class="component-description">Content sections that are to be swapped in and out by the controller should all be siblings and have the class <code>.control-content</code>. Then, just give each content section an id and point the link in the segmented control to that id.</p>

    <div class="component-example">
      <div class="segmented-control">
        <a class="control-item active" href="#item1mobile">
          Thing one
        </a>
        <a class="control-item" href="#item2mobile">
          Thing two
        </a>
        <a class="control-item" href="#item3mobile">
          Thing three
        </a>
      </div>
      <div class="card">
        <span id="item1mobile" class="control-content active">Item 1</span>
        <span id="item2mobile" class="control-content">Item 2</span>
        <span id="item3mobile" class="control-content">Item 3</span>
      </div>
    </div>

{% highlight html %}
<div class="segmented-control">
  <a class="control-item active" href="#item1mobile">
    Thing one
  </a>
  <a class="control-item" href="#item2mobile">
    Thing two
  </a>
  <a class="control-item" href="#item3mobile">
    Thing three
  </a>
</div>
<div class="card">
  <span id="item1mobile" class="control-content active">Item 1</span>
  <span id="item2mobile" class="control-content">Item 2</span>
  <span id="item3mobile" class="control-content">Item 3</span>
</div>
{% endhighlight %}

  </article>

  <!-- Badges -->
  <article class="component" id="badges">
    <h3 class="component-title">Badges</h3>
    <p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are. Adding the a class of <code>.badge-inverted</code> will remove the badges background color.</p>

    <div class="component-example">
      <span class="badge">1</span>
      <span class="badge badge-primary">2</span>
      <span class="badge badge-positive">3</span>
      <span class="badge badge-negative">4</span>
      <span class="badge badge-inverted">1</span>
      <span class="badge badge-primary badge-inverted">2</span>
      <span class="badge badge-positive badge-inverted">3</span>
      <span class="badge badge-negative badge-inverted">4</span>
    </div>

{% highlight html %}
<span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-negative">4</span>

<span class="badge badge-inverted">1</span>
<span class="badge badge-primary badge-inverted">2</span>
<span class="badge badge-positive badge-inverted">3</span>
<span class="badge badge-negative badge-inverted">4</span>
{% endhighlight %}

  </article>

  <!-- Forms -->
  <article class="component" id="forms">
    <h3 class="component-title">Forms</h3>

    <div class="component-example">
      <form>
        <input type="text" placeholder="Full name">
        <input type="search" placeholder="Search">
        <textarea rows="5"></textarea>
        <a class="btn btn-positive btn-block">Choose existing</a>
      </form>
    </div>

{% highlight html %}
<form>
  <input type="text" placeholder="Full name">
  <input type="search" placeholder="Search">
  <textarea rows="5"></textarea>
  <a class="btn btn-positive btn-block">Choose existing</a>
</form>
{% endhighlight %}

  </article>

  <!-- Form with input group -->
  <article class="component" id="formsWithInputGroup">
    <h3 class="component-title">Form with input group</h3>

    <div class="component-example component-example-fullbleed">
      <form class="input-group">
        <input type="text" placeholder="Full name">
        <input type="email" placeholder="Email">
        <input type="text" placeholder="Username">
      </form>
    </div>

{% highlight html %}
<form class="input-group">
  <input type="text" placeholder="Full name">
  <input type="email" placeholder="Email">
  <input type="text" placeholder="Username">
</form>
{% endhighlight %}

  </article>

  <!-- Form with input group and labels -->
  <article class="component" id="formsWithInputGroupAndLabels">
    <h3 class="component-title">Form with input group and labels</h3>

    <div class="component-example component-example-fullbleed">
      <form class="input-group">
        <div class="input-row">
          <label>Full name</label>
          <input type="text" placeholder="Mister Ratchet">
        </div>
        <div class="input-row">
          <label>Email</label>
          <input type="email" placeholder="ratchetframework@gmail.com">
        </div>
        <div class="input-row">
          <label>Username</label>
          <input type="text" placeholder="goRatchet">
        </div>
      </form>
    </div>

{% highlight html %}
<form class="input-group">
  <div class="input-row">
    <label>Full name</label>
    <input type="text" placeholder="Mister Ratchet">
  </div>
  <div class="input-row">
    <label>Email</label>
    <input type="email" placeholder="ratchetframework@gmail.com">
  </div>
  <div class="input-row">
    <label>Username</label>
    <input type="text" placeholder="goRatchet">
  </div>
</form>
{% endhighlight %}

  </article>

  <!-- Toggle -->
  <article class="component" id="toggles">
    <h3 class="component-title">Toggles</h3>
    <p class="component-description">Toggles can be used by sliding or tapping the control.</p>

    <div class="component-example">
      <div class="toggle active">
        <div class="toggle-handle"></div>
      </div>
      <div class="toggle">
        <div class="toggle-handle"></div>
      </div>
    </div>

{% highlight html %}
<div class="toggle active">
  <div class="toggle-handle"></div>
</div>
<div class="toggle">
  <div class="toggle-handle"></div>
</div>
{% endhighlight %}

    <p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>

{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#myToggle')
.addEventListener('toggle', myFunction)
{% endhighlight %}

  </article>

  <!-- Popovers -->
  <article class="component" id="popovers">
    <h3 class="component-title">Popovers</h3>

    <div class="component-example">
      <div id="popover" class="popover">  
        <header class="bar bar-nav">
          <h3 class="title">Popover title</h3>
        </header>
        <ul class="table-view">
          <li class="table-view-cell">Item1</li>
          <li class="table-view-cell">Item2</li>
          <li class="table-view-cell">Item3</li>
          <li class="table-view-cell">Item4</li>
          <li class="table-view-cell">Item5</li>
          <li class="table-view-cell">Item6</li>
          <li class="table-view-cell">Item7</li>
          <li class="table-view-cell">Item8</li>
        </ul>
      </div>
    </div>

{% highlight html %}
<div id="popover" class="popover">  
  <header class="bar bar-nav">
    <h1 class="title">Popover title</h1>
  </header>
  <ul class="table-view">
    <li class="table-view-cell">Item1</li>
    <li class="table-view-cell">Item2</li>
    <li class="table-view-cell">Item3</li>
    <li class="table-view-cell">Item4</li>
    <li class="table-view-cell">Item5</li>
    <li class="table-view-cell">Item6</li>
    <li class="table-view-cell">Item7</li>
    <li class="table-view-cell">Item8</li>
  </ul>
</div>
{% endhighlight %}

    <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>

{% highlight html %}
<header class="bar bar-nav">
  <a href="#myPopover"> 
    <h1 class="title">
      Tap title
      <span class="icon icon-caret"></span>
    </h1>
  </a>
</header>
{% endhighlight %}

  </article>
  
  <!-- Modals -->
  <article class="component" id="modals">
    <h3 class="component-title">Modals</h3>

    <div class="component-example">
      <a href="#myModalexample" class="btn">Open modal</a>
      <div id="myModalexample" class="modal">
        <header class="bar bar-nav">
          <a class="icon icon-close pull-right" href="#myModalexample"></a>
          <h1 class="title">Modal</h1>
        </header>
        
        <div class="content">
          <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
        </div>
      </div>
    </div>

{% highlight html %}
<a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal">
  <header class="bar bar-nav">
    <a class="icon icon-close pull-right" href="#myModalexample"></a>
    <h1 class="title">Modal</h1>
  </header>
  
  <div class="content">
    <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
  </div>
</div>
{% endhighlight %}

    <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>

  </article>

    <!-- Slider -->
    <article class="component" id="sliders">
      <h3 class="component-title">Sliders</h3>
      <p class="component-description">Can be used with any number of slides with any type of content.</p>

      <div class="component-example component-example-fullbleed">
        <div class="slider" id="mySlider">
          <div class="slide-group">
            <div class="slide">
              <img src="../assets/img/slide-1.jpg">
              <span class="slide-text">
                <span class="icon icon-left-nav"></span>
                Slide me
              </span>
            </div>
            <div class="slide">
              <img src="../assets/img/slide-2.jpg">
            </div>
            <div class="slide">
              <img src="../assets/img/slide-3.jpg">
            </div>
          </div>
        </div>
      </div>

{% highlight html %}
<div class="slider" id="mySlider">
  <div class="slide-group">
    <div class="slide">
      <img src="../assets/img/slide-1.jpg">
      <span class="slide-text">
        <span class="icon icon-left-nav"></span>
        Slide me
      </span>
    </div>
    <div class="slide">
      <img src="../assets/img/slide-2.jpg">
    </div>
    <div class="slide">
      <img src="../assets/img/slide-3.jpg">
    </div>
  </div>
</div>
{% endhighlight %}

      <p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>

{% highlight js %}
// Only needed if you want to fire a callback
document
.querySelector('#mySlider')
.addEventListener('slide', myFunction)
{% endhighlight %}

    </article>

    <!-- Push docs -->
    <article class="component" id="push">
      <h3 class="component-title">Push</h3>
      <p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>

{% highlight html %}
<!-- A one.html link -->
<a href="two.html">Two</a>
{% endhighlight %}

      <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>

      <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>

{% highlight html %}
<!-- An one.html link that animates to two.html -->
<a href="two.html" data-transition="fade">Two</a>
{% endhighlight %}

      <p class="component-description">A working version of push:</p>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <h1 class="title">Push</h1>
        </header>
        <div class="content">
          <div class="card">
            <ul class="table-view">
              <li class="table-view-cell">
                <a class="push-right" href="../two.html" data-transition="slide-in">
                  Load new page with push
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">Push</h1>
</header>
<div class="content">
  <div class="card">
    <ul class="table-view">
      <li class="table-view-cell">
        <a class="push-right" href="../two.html" data-transition="slide-in">
          Load new page with push
        </a>
      </li>
    </ul>
  </div>
</div>
{% endhighlight %}

        <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>

{% highlight html %}
<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>
{% endhighlight %}

        <p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>

{% highlight js %}
// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);
{% endhighlight %}

      </article>
      
      <!-- Footer -->
      {% include footer.html %}
    </div>
  </div>
</div>