Positioning

Positioning utilities determine where elements are located on the screen.


Vertical Align

.u-vertical-align-top

.u-vertical-align-middle

.u-vertical-align-bottom

.u-vertical-align-text-bottom

<div>
<h3>Top</h3>
<img src="robot.svg" class="u-vertical-align-top" />
<img src="moon.svg" class="u-vertical-align-top" />
</div>
<div>
<h3>Middle</h3>
<img src="robot.svg" class="u-vertical-align-middle" />
<img src="moon.svg" class="u-vertical-align-middle" />
</div>
<div>
<h3>Bottom</h3>
<img src="robot.svg" class="u-vertical-align-bottom" />
<img src="moon.svg" class="u-vertical-align-bottom" />
</div>
<div>
<h3>Text Bottom</h3>
<img src="robot.svg" class="u-vertical-align-text-bottom" />
<img src="moon.svg" class="u-vertical-align-text-bottom" />
</div>

White space

.u-ws-normal

All work and no play makes Jack a dull boy.

.u-ws-nowrap

All work and no play makes Jack a dull boy.
<div class="border u-ws-normal m-bottom">
normal
</div>
<div class="border u-ws-nowrap m-bottom">
nowrap
</div>

Wordbreak

.u-wb-normal

j3894jrerwfv98cqh3x498ryq349fq38mrf9q3948rymx93q8yf9

.u-wb-break-all

j3894jrerwfv98cqh3x498ryq349fq38mrf9q3948rymx93q8yf9
<div class="border u-wb-normal m-bottom">
normal
</div>
<div class="border u-wb-break-all m-bottom">
break-all
</div>

Z-index

There are 5 levels of z-index that have classes for use, which correspond to z- variables in Variables.

.z-0 { z-index: $z-0; }
.z-1 { z-index: $z-1; }
.z-2 { z-index: $z-2; }
.z-3 { z-index: $z-3; }
.z-4 { z-index: $z-4; }
.z-5 { z-index: $z-5; }