- Brand
- Forms
- Buttons
- Utilities
- Components
  - Menu
  - Menu for Apps
  - List group
  - List group with icons
  - Nested list group
  - Nested list group with icons
  - Dropdown
  - Alerts
  - Dismissible alerts
  - Links in alerts
  - Sheet
  - Sheet with header
  - Sheet with tabs
  - Sheet with stacked tabs
  - Sheet with auto-stackable tabs
  - Sheet with alerts
  - Chosen select
  - Chosen multiple select
  - Switch
  - Disabled switch
  - Modal
- Compositions
- Ember Addon

### Sheet

Highly inspired from the `panel` component, the sheet will auto scale and have a relative position to ease children positioning.

Text...

    <div class="sheet">
      <p>Text...</p>
    </div>

### Sheet with header

## Header

Text...

    <div class="sheet">
      <div class="sheet-header">
        <h2>Header</h2>
      </div>
      <p>Text...</p>
    </div>

### Sheet with tabs

Text...

    <div class="sheet">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with stacked tabs

Text...

    <div class="sheet">
      <ul class="nav nav-tabs">
        <li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li class="dropdown pull-right">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            More <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Tab 4</a></li>
            <li><a href="#">Tab 5</a></li>
          </ul>
        </li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with auto-stackable tabs

#### Plugin dependency

This component requires customized bootstrapStackable JS plugin provided by the bootstrap-bookingsync-sass gem.

Text...

Text...

Text...

    <div class="sheet">
      <ul class="nav nav-tabs" data-toggle="stackable"
          data-target=".stackable-dropdown">
        <li><a href="#">Tab 1</a></li>
        <li class="active"><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
        <li><a href="#">Tab 6</a></li>
        <li><a href="#">Tab 7</a></li>
        <li><a href="#">Tab 8</a></li>
        <li><a href="#">Tab 9</a></li>
        <li><a href="#">Tab 10</a></li>
        <li><a href="#">Tab 11</a></li>
        <li><a href="#">Tab 12</a></li>
        <li><a href="#">Tab Last</a></li>
        <li class="dropdown pull-right stackable-dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            More <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
          </ul>
        </li>
      </ul>
      <div>
        <p>Text...</p>
      </div>
    </div>

### Sheet with alerts

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

Text...

Well done! You successfully read this important alert message.

    <div class="sheet">
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <p>Text...</p>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
      <p>Text...</p>
      <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
      </div>
    </div>