- ###### FILES

- Two new item submitted Marketing Manager
  17kb
- 52 Doc file Generator FontEnd Developer
  550kb
- 25 Xls File Uploaded Digital Marketing Manager
  20kb
- Anna Strong Web Designer
  37kb

- ###### MEMBERS

- John Doe UI designer
- Michal Clark FontEnd Developer
- Milena Gibson Digital Marketing
- Anna Strong Web Designer

- ###### PAGES

- error_outline No results found.

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

#### Vertical Align

- View
- Html

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>This should be vertically aligned</h5>
        </div>

#### Text Align

- View
- Html

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

###### This should be left aligned

###### This should be right aligned

###### This should be center aligned

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

#### Quick Floats

- View
- Html

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

###### Left Floating Text

###### Right Floating Text

      <h6 class="left">Left Floating Text</h6>
      <h6 class="right">Right Floating Text</h6>

#### Hiding/Showing Content

- View
- Html

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

Class | 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
`.show-on-small` | Show for Mobile Only
`.show-on-medium` | Show for Tablet Only
`.show-on-large` | Show for Desktop Only
`.show-on-medium-and-up` | Show for Tablet and Above
`.show-on-medium-and-down` | Show for Tablet and Below

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

#### Formatting

- View
- Html

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 a long title that will be truncated

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

#### Hover

- View
- Html

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>

#### Browser Defaults

Because we override many of the default browser styles and elements, we provide the `.browser-default` class to revert these elements to their original state.

Name of Element | Reverted Style
--- | ---
UL | Bullet points
SELECT | Browser default select element
INPUT | Browser default input

add

- help_outline
- widgets
- today
- mail_outline

settings
close

##### Theme Customizer

Customize & Preview in Real Time

###### Navbar Options

###### Footer Options

add_shopping_cart