1 #Components Components

1.1 #Components.button Buttons

Use any of the available button classes to quickly create a styled button.

Source: components/_button.scss, line 1

1.1.1 #Components.button.colors Button colors

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
.btn-primary
Primary / Default
.btn-secondary
Secondary
.btn-tertiary
Tertiary
.btn-primary.active
Primary active state
.btn-secondary.active
Secondary active state
.btn-tertiary.active
Tertiary active state
.btn-primary.disabled
Primary disabled state
.btn-secondary.disabled
Secondary disabled state
.btn-tertiary.disabled
Tertiary disabled state
Markup 
<button class="btn [modifier class]">Button Element</button>
<input class="btn [modifier class]" type="button" value="Input Button" />
Source: components/_button.scss, line 145

1.1.2 #Components.button.sizes Button sizes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
.btn-lg
Large sized button
.btn-sm
Small sized button
.btn-xs
Extra-small sized button
.btn-block
Block sized button
Markup 
<div class="row">
    <div class="col-xs-12 col-md-6">
        <button class="btn btn-primary [modifier class]">Button Element</button>
        <input class="btn btn-secondary [modifier class]" type="button" value="Input Button" />
        <input class="btn btn-tertiary [modifier class]" type="button" value="Tertiary" />
    </div>
</div>
Source: components/_button.scss, line 65

1.2 #Components.cards Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Basic border, background, and padding for content.

Examples
Default styling

Basic card example

Card link
.accent-border-top.accent-border-coral
Card with accent borders

Basic card example

Card link
.u-bg-navy.u-bg-dark
Card with background colors

Basic card example

Card link
Markup 
<div class="row">
    <div class="col-xs-12">
        <div class="card [modifier class]">
            <p>Basic card example</p>
            <a>Card link</a>
        </div>
    </div>
</div>
Source: components/_card.scss, line 1

1.2.1 #Components.cards.cells Card Cells

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Cards can be divided into cells for more complex layouts.

Example

Card Cell 1

Card cell 2

Card Cell 3

Card cell 4

Markup 
<div class="card-cells">
  <div class="row">
    <div class="card col-xs-12 col-md-5">
      <p>Card Cell 1</p>
    </div>
    <div class="card col-xs-12 col-md-7">
      <p>Card cell 2</p>
    </div>
  </div>
  <div class="row">
    <div class="card col-xs-12 col-md-2">
       <p>Card Cell 3</p>
    </div>
    <div class="card col-xs-12 col-md-10">
      <p>Card cell 4</p>
    </div>
  </div>
</div>
Source: components/_card.scss, line 34