Font Families
.u-font-gotham {
font-family: $gotham;
}
.u-font-gotham-narrow {
font-family: $gotham_narrow;
}
.u-font-mercury {
font-family: $mercury;
font-weight: 500;
}
Font Weights
.u-weight-light { font-weight: 300; }
.u-weight-normal { font-weight: 400; }
.u-weight-medium { font-weight: 500; }
.u-weight-bold { font-weight: 700; }
Font Sizes
.u-font-size-sm { font-size: 75%; }
.u-font-size-lg { font-size: 100% * $xl-multiplier; }
.u-font-size-xl {
font-size: rem(32);
line-height: 1em;
@include media($lg) {
font-size: rem(68);
}
}
Text Alignments
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
Transforms & Effects
.u-caps { text-transform: uppercase; }
.u-text-shadow { text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
Formatting Lists
By default, lists are stripped of their styles. For proper bullet styling, wrap list elements in a container with the .u-format-text class. Also see base/typography.
<div class="u-format-text">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>