Buttons

Button types

a.button.button--primary
button.button.button--primary
input[type="button"].button.button--primary

Button sizes

.button.button--sm
.button.button--xs

Button colors

For any color listed in $theme-colors in variables.scss both color and outline buttons will be generated.

.button.button--alt
.button.button--blue-fluo
.button.button--alt
.button.button--white
.button.button--success
.button.button--danger
.button.button--gray

Pill Buttons

button.button--pill

Icon Buttons

.button.button--icon-left > span.button-icon + text 
.button.button--icon-left.button--block > span.button-icon + text 
.button.button--icon-right > span.button-icon + text 
.button.button--icon-right.button--block > span.button-icon + text 

Outlined Buttons

.button.button--outline-primary
.button.button--outline-success
.button.button--outline-danger
.button.button--outline-gray

Forms

Checkbox
Radio
<div class="form__group">
  <label class="form__label" for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form__control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form__group">
  <label class="form__label" for="exampleFormControlSelect1">Example select</label>
  <select class="form__control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
<div class="form__group">
  <label class="form__label" for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form__control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form__check">
  <input type="checkbox" class="form__check-control" id="exampleCheck1">
  <label class="form__check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form__check">
  <input type="radio" class="form__check-control" id="exampleRadio1">
  <label class="form__check-label" for="exampleRadio1">Default radio</label>
</div>

Form groups

<div class="input-group mb3">
  <input type="text" class="form__control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group__append">
    <button class="button button--outline-gray" type="button">Button</button>
  </div>
</div>

Dropdown

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown__item" href="#">Action</a>
    <a class="dropdown__item" href="#">Another action</a>
    <a class="dropdown__item" href="#">Something else here</a>
  </div>
</div>

Tabs

First tab content

Second tab content

Third tab content

<div class="tabs">
  
  <ul class="tabs__list nav nav-tabs" role="tablist">
    <li class="nav-item tabs__list-item">
      <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
        First
      </a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
    </li>
  </ul>

  <div class="tabs__content">
    <div id="first" class="tab-pane active" role="tabpanel" aria-labelledby="first-tab">
      <h3>First tab content</h3>
    </div>
    <div id="second" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
      <h3>Second tab content</h3>
    </div>
    <div id="third" class="tab-pane" role="tabpanel" aria-labelledby="inqurieis-tab">
      <h3>Third tab content</h3>
    </div>
  </div>

</div>
  

Tabs underlined

First tab content

Second tab content

Third tab content

<div class="tabs">
  
  <ul class="tabs__list nav nav-tabs" role="tablist">
    <li class="nav-item tabs__list-item tabs__list-item--underlined">
      <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
        First
      </a>
    </li>
    <li class="tabs__list-item tabs__list-item--underlined">
      <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
    </li>
    <li class="tabs__list-item tabs__list-item--underlined">
      <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
    </li>
  </ul>

  <div class="tabs__content">
    <div id="first" class="tab-pane active" role="tabpanel" aria-labelledby="first-tab">
      <h3>First tab content</h3>
    </div>
    <div id="second" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
      <h3>Second tab content</h3>
    </div>
    <div id="third" class="tab-pane" role="tabpanel" aria-labelledby="inqurieis-tab">
      <h3>Third tab content</h3>
    </div>
  </div>

</div>
  

Dropdown tabs

1111

2222

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select a tab
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <ul class="nav nav-tabs nav-tabs--dropdown" role="tablist">
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link active" aria-selected="true" data-toggle="tab" role="tab" data-target="#first-drop" href="#first-drop">First tab</a>
      </li>
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link" aria-selected="false" data-toggle="tab" role="tab" data-target="#second-drop" href="#second-drop">Second tab</a>
      </li>
    </ul>
  </div>
</div>
<div class="tabs__content">
  <div id="first-drop" class="tab-pane active" role="tabpanel" aria-labelledby="first-drop">
    <h3>First dropdown tab content</h3>
  </div>
  <div id="second-drop" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
    <h3>Second dropdown tab content</h3>
  </div>
</div> 

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div id="accordion" class="accordion">
  <div class="accordion__item">
    <h5 class="mv0" id="headingOne">
      <button class="button button--accordion button--block" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
        <span class="icon accordion__icon-close">
          {% include 'icon-plus' %} 
        </span>
      </button>
    </h5>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="accordion__body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h5 class="mv0" id="headingTwo">
      <button class="button button--accordion button--block collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Collapsible Group Item #2
        <span class="icon accordion__icon-close">
          {% include 'icon-plus' %} 
        </span>
      </button>
    </h5>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="accordion__body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
      </div>
    </div>
  </div>
</div>

Modal

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Add .modal-dialog-transparent to .modal-dialog for a transparent background. This also removes the box shadow on the modal dialog. Shaddow, if needed, will have to be added manualy for element(s) in the transparent dialog.

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px
  <button type="button" class="button button--primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">{% include 'icon-close' %}</span>
          </button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus similique reiciendis ipsam modi odio laudantium labore cupiditate.
        </div>
        <div class="modal-footer">
          <button type="button" class="button button--danger button--sm" data-dismiss="modal">Close</button>
          <button type="button" class="button button--primary button--sm">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Media object

Generic placeholder image

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!
<div class="media">
  <img class="mr4" src="https://via.placeholder.com/100" alt="Generic placeholder image">
  <div class="media-body">
    <h3 class="mt0">Media heading</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!
  </div>
</div>

Helper classes

Spacing

 An eight step powers of two scale ranging from 0 to 16rem.

Base:
  p = padding
  m = margin

Modifiers:
  a = all
  h = horizontal
  v = vertical
  t = top
  r = right
  b = bottom
  l = left

  0 = none ($spacing-none)
  1 = 1st step in spacing scale ($spacing-xs - 5px)
  2 = 2nd step in spacing scale ($spacing-sm - 10px)
  3 = 3rd step in spacing scale ($spacing-base - 15px)
  4 = 4th step in spacing scale ($spacing-lg - 30px)
  5 = 5th step in spacing scale ($spacing-xl - 50px)
  6 = 6th step in spacing scale ($spacing-xxl - 100px)
  7 = 7th step in spacing scale ($spacing-xxxl - 150px)

Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Example Media Query Extensions usage: .mt2.mt3--md.mt4--lg

Text align

Base
  t = text-align
Modifiers
  l = left
  r = right
  c = center
  j = justify
Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Display

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Complete reference