Switch to WilmingtonOverview
Type Style
Use Type Style utilities to modify the positioning and appearance of text.
Style Options
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Type Alignment
Variants
- u-type--left
- u-type--center
- u-type--right
HTML
Vanilla JS
<p class="u-type--left">Text</p>
<p class="u-type--center">Text</p>
<p class="u-type--right">Text</p>
Copy
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
Type Scale
Variants
- u-type--xxsmall - 10px
- u-type--xsmall - 12px
- u-type--small - 14px
- u-type--medium - 16px
- u-type--large - 18px
- u-type--xlarge - 24px
- u-type--xxlarge - 32px
- u-type--xxxlarge - 44px
HTML
Vanilla JS
<p class="u-type--xxsmall">Text</p>
<p class="u-type--xsmall">Text</p>
<p class="u-type--small">Text</p>
<p class="u-type--medium">Text</p>
<p class="u-type--large">Text</p>
<p class="u-type--xlarge">Text</p>
<p class="u-type--xxlarge">Text</p>
<p class="u-type--xxxlarge">Text</p>
Copy
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
Type Decoration
Variants
- u-type--light
- u-type--normal
- u-type--bold
- u-type--italic
- u-type--underline
HTML
Vanilla JS
<p class="u-type--light">Text</p>
<p class="u-type--normal">Text</p>
<p class="u-type--bold">Text</p>
<p class="u-type--italic">Text</p>
<p class="u-type--underline">Text</p>
Copy