##### Helpers

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

You don't need to create new css class for simple edits.We already did it for you.

#### Text Align

Right Aligned

`class="right-align"`

This text is right aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Left Aligned

`class="left-align"`

In English and most European languages where words are read left-to-right, text is usually aligned "flush left", meaning that the text of a paragraph is aligned on the left-hand side with the right-hand side ragged. This is the default style of text alignment on the World Wide Web for left-to-right text Quotations are often indented.

Center Aligned

`class="center-align"`

Text can also be "centered", or symmetrically aligned along an axis in the middle of a column. This is often used for the title of a work, headlines, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Centered text is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.

#### Vertical Align

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

##### This should be vertically aligned

#### Hiding Content

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

| Screen Range | Display Test
--- | --- | ---
`.hide-on-small-only` | Hidden for Mobile Only | Check Me !
`.hide-on-med-only` | Hidden for Tablet Only | Check Me !
`.hide-on-med-and-down` | Hidden for Tablet and Below | Check Me !
`.hide-on-med-and-up` | Hidden for Tablet and Above | Check Me !
`.hide-on-large-only` | Hidden for Desktop Only | Check Me !

#### Truncation

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

Normal: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.

Truncate: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.

#### 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
add

- help_outline
- widgets
- today
- mail_outline