Module Styles

Buttons

<span class="button">Standard Button</span>
<span class="button button--full">Full Width Button</span>

<span class="button">Standard Button</span>
<span class="button-pseudo">Pseudo Button</span>

Flex Media

Responsive styles for embedded media.

16x9 Aspect Ratio

<div class="embed embed--16by9">
  <div class="embed__item">
    ...
  </div>
</div>

4x3 Aspect Ratio

<div class="embed embed--4by3">
  <div class="embed__item">
    ...
  </div>
</div>

Forms

Horizontal Form

<div class="form-horizontal">
  ...
</div>

Vertical Form

<div class="form-vertical">
  ...
</div>

Pair Field Form

Lists

Plain List

<ul class="list-plain">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Horizontal List

<ul class="list-horizontal">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Media Object

Standard Media Object

Consectetur delectus nesciunt blanditiis error similique fugit est aspernatur. Impedit facere aliquid quaerat libero sapiente animi provident est repudiandae earum. Voluptatum harum voluptate voluptates fuga nostrum magnam odio? Cum laborum.

<div class="media">
  <div class="media__obj"><img src="..." alt=""></div>
  <div class="media__body">...</div>
</div>

Reversed Media Object

Consectetur delectus nesciunt blanditiis error similique fugit est aspernatur. Impedit facere aliquid quaerat libero sapiente animi provident est repudiandae earum. Voluptatum harum voluptate voluptates fuga nostrum magnam odio? Cum laborum.

<div class="media">
  <div class="media__obj--rev"><img src="..." alt=""></div>
  <div class="media__body">...</div>
</div>

Notifications

<div class="notification">...</div>
<div class="notification notification--alert">...</div>
<div class="notification notification--warning">...</div>
<div class="notification notification--success">...</div>
<div class="notification notification--notice">...</div>

Table Styles

Standard Table

<table class="table">
  ...
</table>

Striped Table

<table class="table table--striped">
  ...
</table>

Hover Table

<table class="table table--hover">
  ...
</table>

Tiles

Standard Tiles

<div class="tile-container">
  <div class="tile__item">
    ...
  </div>
</div>

Three Column Tiles

<div class="tile-container tile-container--three">
  <div class="tile__item">
    ...
  </div>
</div>

Four Column Tiles

<div class="tile-container tile-container--four">
  <div class="tile__item">
    ...
  </div>
</div>