## Alignment

We have easy to use classes to help you align your content.

##### Vertical Align

You can easily vertically center things by adding the class `valign-wrapper` to the container holding the items you want to vertically align.

##### This should be vertically aligned

    <div class="valign-wrapper">
      <h5 class="valign">This should be vertically aligned</h5>
    </div>

##### Text Align

These classes are for horizontally aligning content. We have `.left-align`, `.right-align` and `.center-align`

##### This should be left aligned

##### This should be right aligned

##### This should be center aligned

      <div>
        <h5 class="left-align">This should be left aligned</h5>
      </div>
      <div>
        <h5 class="right-align">This should be right aligned</h5>
      </div>
      <div>
        <h5 class="center-align">This should be center aligned</h5>
      </div>

##### Quick Floats

Quickly float things by adding the class `left` or `right` to the element. `!important` is used to avoid specificity issues.

    <div class="left">...</div>
    <div class="right">...</div>

## Hiding Content

We provide easy to use classes to hide content on specific screen sizes.

| Screen Range
--- | ---
`.hide` | Hidden for all Devices
`.hide-on-small-only` | Hidden for Mobile Only
`.hide-on-med-only` | Hidden for Tablet Only
`.hide-on-med-and-down` | Hidden for Tablet and Below
`.hide-on-med-and-up` | Hidden for Tablet and Above
`.hide-on-large-only` | Hidden for Desktop Only

##### Usage

      <div class="hide-on-small-only"></div>

## Formatting

These classes help format various content on your site.

##### Truncation

To truncate long lines of text in an ellipsis, add the class `truncate` to the tag which contains the text. See an example below of a header being truncated inside a card.

#### This is an extremely long title that will be truncated

      <h4 class="truncate">This is an extremely long title that will be truncated</h4>

##### Hover

The `hoverable` is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link

      <div class="card-panel hoverable"> Hoverable Card Panel</div>

- Alignment
- Hiding Content
- Formatting