code

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">
  <h3 class="valign">This should be vertically aligned</h3>
</div>
        

Alternate

This should be vertically aligned


<div class="grey lighten-2" style="height:200px;">
  <h3 class="valign-middle">This should be vertically aligned</h3>
</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>
        

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>
        

Margin & Padding

These classes help format various content on your site.

Margin

.margin-bottom-0
 
.margin-bottom-xs
 
.margin-bottom-s
 
.margin-bottom-m
 
.margin-bottom-l
 
.margin-bottom-xl
 

Padding

.padding-bottom-0
 
.padding-bottom-xs
 
.padding-bottom-s
 
.padding-bottom-m
 
.padding-bottom-l
 
.padding-bottom-xl
 

Positive Margin

 All sidesTopRightBottomLeft
0rem.margin-0.margin-top-0.margin-right-0.margin-bottom-0.margin-left-0
0.5rem.margin-xs.margin-top-xs.margin-right-xs.margin-bottom-xs.margin-left-xs
1rem.margin-s.margin-top-s.margin-right-s.margin-bottom-s.margin-left-s
2rem.margin-m.margin-top-m.margin-right-m.margin-bottom-m.margin-left-m
3rem.margin-l.margin-top-l.margin-right-l.margin-bottom-l.margin-left-l
5rem.margin-xl.margin-top-xl.margin-right-xl.margin-bottom-xl.margin-left-xl

Negative Margin

 All sidesTopRightBottomLeft
0rem.margin-0.margin-top-0.margin-right-0.margin-bottom-0.margin-left-0
-0.5rem.neg-margin-xs.neg-margin-top-xs.neg-margin-right-xs.neg-margin-bottom-xs.neg-margin-left-xs
-1rem.neg-margin-s.neg-margin-top-s.neg-margin-right-s.neg-margin-bottom-s.neg-margin-left-s
-2rem.neg-margin-m.neg-margin-top-m.neg-margin-right-m.neg-margin-bottom-m.neg-margin-left-m
-3rem.neg-margin-l.neg-margin-top-l.neg-margin-right-l.neg-margin-bottom-l.neg-margin-left-l
-5rem.neg-margin-xl.neg-margin-top-xl.neg-margin-right-xl.neg-margin-bottom-xl.neg-margin-left-xl

Padding

 All sidesTopRightBottomLeft
0rem.padding-0.padding-top-0.padding-right-0.padding-bottom-0.padding-left-0
0.5rem.padding-xs.padding-top-xs.padding-right-xs.padding-bottom-xs.padding-left-xs
1rem.padding-s.padding-top-s.padding-right-s.padding-bottom-s.padding-left-s
2rem.padding-m.padding-top-m.padding-right-m.padding-bottom-m.padding-left-m
3rem.padding-l.padding-top-l.padding-right-l.padding-bottom-l.padding-left-l
5rem.padding-xl.padding-top-xl.padding-right-xl.padding-bottom-xl.padding-left-xl

Display

These classes affect the display attribute of an element.

ClassAttribute
.display-block or .dbdisplay: block
.display-inline or .didisplay: inline
.display-inline-block or .dibdisplay: inline-block
.center-blockmargin: 0 auto; float: none;

Width & Height

These classes affect the width/height of an element.

ClassAttribute
.max-widthmax-width: 100%;
.full-widthwidth: 100%
.full-heightheight: 100%
.width-autowidth: auto
.height-autoheight: auto

Show & Hide

These classes show and hide various content on your site. They are especially useful in conjunction with media queries.

.showdisplay: blockshows element
.hidedisplay: nonehides element

Position

These classes affect the position attribute of an element.

ClassAttribute
.pos-rposition: relative
.pos-aposition: absolute
.position-sposition: static

Absolute Positioning

These classes will absolutely position an element in one of the four corners of its containing div.

InsideOutside
.abs-left-inside.abs-left-outside
.abs-right-inside.abs-right-outside
.abs-bottom-inside.abs-bottom-outside
.abs-top-inside.abs-top-outside
.abs-middle-top-inside.abs-middle-top-outside
.abs-middle-bottom-inside.abs-middle-bottom-outside
.abs-left-top-inside.abs-left-top-outside
.abs-left-middle-inside.abs-left-middle-outside
.abs-left-bottom-inside.abs-left-bottom-outside
.abs-right-top-inside.abs-right-top-outside
.abs-right-middle-inside.abs-right-middle-outside
.abs-right-bottom-inside.abs-right-bottom-outside

Examples

Inside

.abs-middle-
top-inside
.abs-middle-
bottom-inside
.abs-left-
top-inside
.abs-left-
middle-inside
.abs-left-
bottom-inside
.abs-right-
top-inside
.abs-right-
middle-inside
.abs-right-
bottom-inside

Outside

.abs‑middle-
top‑outside
.abs‑middle-
bottom‑outside
.abs‑left-
top‑outside
.abs‑left-
middle‑outside
.abs‑left-
bottom‑outside
.abs‑right-
top‑outside
.abs‑right-
middle‑outside
.abs‑right-
bottom‑outside

Vertical Alignment

These classes apply to inline block elements to alter their vertical alignment.

InsideOutside
.vertical-alignvertical-align: middle
.vertical-align-topvertical-align: top
.vertical-align-bottomvertical-align: bottom