1.1 atoms.buttons Buttons

A majority of buttons in the site are built from the same base class.

Examples
Default styling
Link Button
.btn
Use this class to indicate that the button is the primary feature of this form.
Link Button
.btn-primary
Provides extra visual weight and identifies the primary action in a set of buttons.
Link Button
.btn-secondary
Secondary, outline button.
Link Button
.btn-success
Indicates a successful or positive action.
Link Button
.btn-info
Contextual button for informational alert messages.
Link Button
.btn-warning
Indicates caution should be taken with this action.
Link Button
.btn-danger
Indicates a dangerous or potentially negative action.
Link Button
.btn-link
Deemphasize a button by making it look like a link while maintaining button behavior.
Link Button
.hover
Highlight the button when hovered.
Link Button
.disabled
Make the button change appearance to reflect it being disabled.
Link Button
.active
"Press" the button down when clicked.
Link Button
<a href="#" class="btn [modifier class]">Link Button</a>
<button class="btn [modifier class]">Button element</button>
<input class="btn [modifier class]" type="button" value="input type button"></input>
Source: components/atoms/buttons/_buttons.scss, line 1

1.2 atoms.forms Form elements

A majority of forms in the site are built from the same base class.

Examples
Default styling
.has-success
Indicates a successful or positive action.
.has-warning
Indicates a successful or positive action.
.has-danger
Indicates a successful or positive action.
<form>
  <div class="form-group [modifier class]">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Radios</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
        </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <label class="col-sm-2">Checkbox</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
    </div>
  </div>
  <div class="form-group [modifier class]">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-secondary">Sign in</button>
    </div>
  </div>
</form>
<form>
  <div class="form-group [modifier class]">
    <label class="form-control-label" for="inputSuccess1">Input with success</label>
    <input type="text" class="form-control form-control-success" id="inputSuccess1">
  </div>
  <div class="form-group [modifier class]">
    <label class="form-control-label" for="inputWarning1">Input with warning</label>
    <input type="text" class="form-control form-control-warning" id="inputWarning1">
  </div>
  <div class="form-group [modifier class]">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
  </div>
  <div class="form-group">
    <label>Range input</label>
    <input id="range" type="range" min="0" max="25" step="0.02">
  </div>
</form>
Source: components/atoms/forms/_forms.scss, line 1

1.3 atoms.pagination Pagination

A majority of pagination in the site are built from the same base class.

Examples
Default styling
.pagination-sm
Small pagination.
.pagination-lg
Large pagination.
<ul class="pagination [modifier class]">
    <li class="page-item disabled">
        <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
        </a>
    </li>
    <li class="page-item active">
        <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo; Volgende</span>
            <span class="sr-only">Next</span>
        </a>
    </li>
</ul>
Source: components/atoms/pagination/_pagination.scss, line 1

1.4 atoms.table Tables

The <table> element displays tabular data in rows, columns, and cells.

Examples
Default styling
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-inverse
Table inverse.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.thead-inverse
Thead inverse.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.thead-default
Thead default.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-striped
Use .table-striped to add zebra-striping to any table row within the .
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-bordered
Add .table-bordered for borders on all sides of the table and cells.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-hover
Add .table-hover to enable a hover state on table rows within a .
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-sm
Add .table-sm to make tables more compact by cutting cell padding in half.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-active
Applies the hover color to a particular row or cell.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-success
Indicates a successful or positive action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-info
Indicates a neutral informative change or action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-warning
Indicates a warning that might need attention.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
.table-danger
Indicates a dangerous or potentially negative action.
This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
<table class="table [modifier class]">
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead class="[modifier class]">
    <tr class="[modifier class]">
      <th class="[modifier class]">Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="[modifier class]">
      <td class="[modifier class]">Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>
Source: components/atoms/tables/_tables.scss, line 1