document:
- detail: All call to actions should aim for copy to be displayed on a single line
- title: Primary buttons
  detail: Black, white and inactive variations
  markup: |
    <div>
      <a class="btn btn-primary" href="#" role="button">Anchor</a>
      <input class="btn-primary btn-white" type="submit" value="Input Submit" />
      <button class="btn-primary" disabled>Button</button>
    </div>
- title: Secondary buttons
  detail: Active and inactive variations. Note - buttons should have a 20px horizontal spacing between them. It is up to the developer to implement this. It is not possible to include the proper spacing here in the styles.
  markup: |
    <div>
      <a class="btn" href="#" role="button">Anchor</a>
      <input type="submit" value="Input Submit" disabled />
      <button disabled>Button</button>
    </div>
- title: Small
  detail: Primary, default and inactive buttons
  markup: |
    <div>
      <a class="btn btn-primary btn-small" href="#" role="button">Anchor</a>
      <input class="btn-small" type="submit" value="Input Submit" />
      <button class="btn-small" disabled>Button</button>
    </div>
- title: Extra Small
  detail: Primary, default and inactive buttons
  markup: |
    <div>
      <a class="btn btn-primary btn-x-small" href="#" role="button">Anchor</a>
      <input class="btn-x-small" type="submit" value="Input Submit" />
      <button class="btn-x-small" disabled>Button</button>
    </div>

- title: Buttons with fixed width
  detail: Add a width class to give a defined width.
  markup: |
    <div>
      <a class="btn btn-primary width-m" href="#" role="button">m</a>
      <a class="btn btn-primary width-s" href="#" role="button">s</a>
      <a class="btn btn-primary width-xs" href="#" role="button">x-s</a>
    </div>
    <div>
      <a class="btn btn-primary width-full" href="#" role="button">full width</a>
    </div>
    <div>
      <a class="btn btn-small width-m" href="#" role="button">m</a>
      <a class="btn btn-small width-s" href="#" role="button">s</a>
      <a class="btn btn-small width-xs" href="#" role="button">x-s</a>
    </div>
    <div>
      <a class="btn btn-small width-full" href="#" role="button">full width</a>
    </div>

- title: Social buttons
  detail: Use the colours provided by each platform
  markup: |
    <div>
      <button class="btn btn-icon-left btn-facebook" href="#" role="button">
        <i class="icon-social-logo-Facebook-white btn-icon"/></i>
        <span>Sign in using Facebook</span>
      </button>
      <button class="btn btn-x-small btn-icon-left btn-facebook" href="#" role="button">
        <i class="icon-social-logo-Facebook-white btn-icon"/></i>
        <span>Sign in using Facebook</span>
      </button>
    </div>
- title: Button icons
  detail: This should be used for call-to actions, especially on interactive components such as dropdowns. Is responsive.
  markup: |
    <div>
      <a class="btn btn-icon-left btn-primary btn-white">
        <span class="icon-arrow-left-black btn-icon"></span>
        <span>Hide</span>
      </a>
      <a class="btn btn-icon-right btn-primary btn-white">
        <span class="icon-arrow-right-black btn-icon"></span>
        <span>Show</span>
      </a>
    </div>
    <div>
      <a class="btn btn-small btn-icon-left">
        <span class="icon-arrow-left-black btn-icon"></span>
        <span>Hide</span>
      </a>
      <a class="btn btn-small btn-icon-right">
        <span class="icon-arrow-right-black btn-icon"></span>
        <span>Show</span>
      </a>
    </div>
    <div>
      <a class="btn btn-x-small btn-icon-left">
        <span class="icon-arrow-left-black btn-icon"></span>
        <span>Hide</span>
      </a>
      <a class="btn btn-x-small btn-icon-right">
        <span class="icon-arrow-right-black btn-icon"></span>
        <span>Show</span>
      </a>
    </div>
- title: Dropdown buttons
  detail: This should be used as a replacement to the select tag.
  markup: |
    <div class="btn btn-dropdown btn-icon-right">
      <span class="icon-arrow-down-black btn-icon"></span>
      <select>
        <option value="GB">United Kingdom</option>
        <option value="FR">France</option>
        <option value="SP">Spain</option>
      </select>
    </div>
    <div class="btn btn-dropdown btn-small btn-icon-right">
      <span class="icon-arrow-down-black btn-icon"></span>
      <select>
        <option value="GB">United Kingdom</option>
        <option value="FR">France</option>
        <option value="SP">Spain</option>
      </select>
    </div>
    <div class="btn btn-dropdown btn-x-small btn-icon-right">
      <span class="icon-arrow-down-black btn-icon"></span>
      <select>
        <option value="GB">United Kingdom</option>
        <option value="FR">France</option>
        <option value="SP">Spain</option>
      </select>
    </div>