.capitalize
.uppercase
.lowercase
.text-left
.text-center
.text-right
.font-normal
.font-bold
.font-italic
.nowrap
.semi-transparent
.float-left
.float-right
.clear-floats
.display-block
.inline-block
.inline
.no-margin
.outline-subdued
.pad-top-0.pad-top-1.pad-top-2.pad-top-3.pad-top-4
.pad-right-0.pad-right-1.pad-right-2.pad-right-3.pad-right-4
.pad-bottom-0.pad-bottom-1.pad-bottom-2.pad-bottom-3.pad-bottom-4
.pad-left-0.pad-left-1.pad-left-2.pad-left-3.pad-left-4
.margin-top-0.margin-top-1.margin-top-2.margin-top-3.margin-top-4
.margin-right-0.margin-right-1.margin-right-2.margin-right-3.margin-right-4
.margin-bottom-0.margin-bottom-1.margin-bottom-2.margin-bottom-3.margin-bottom-4
.margin-left-0.margin-left-1.margin-left-2.margin-left-3.margin-left-4---
layout: layouts/designsystem
---
<div class="container narrow no-padding">
<div class="box">
<p class="capitalize"><code>.capitalize</code></p>
<hr>
<p class="uppercase"><code>.uppercase</code></p>
<hr>
<p class="lowercase"><code>.lowercase</code></p>
<hr>
<p class="text-left"><code>.text-left</code></p>
<hr>
<p class="text-center"><code>.text-center</code></p>
<hr>
<p class="text-right"><code>.text-right</code></p>
<hr>
<p class="font-normal"><code>.font-normal</code></p>
<hr>
<p class="font-bold"><code>.font-bold</code></p>
<hr>
<p class="font-italic"><code>.font-italic</code></p>
<hr>
<p class="nowrap"><code>.nowrap</code></p>
<hr>
<p class="semi-transparent"><code>.semi-transparent</code></p>
<hr>
<p class="float-left"><code>.float-left</code></p>
<p class="float-right"><code>.float-right</code></p>
<p class="clear-floats"><code>.clear-floats</code></p>
<hr>
<p class="display-block"><code>.display-block</code></p>
<hr>
<p class="inline-block"><code>.inline-block</code></p>
<hr>
<p class="inline"><code>.inline</code></p>
<hr>
<p class="no-margin"><code>.no-margin</code></p>
<hr>
<p><code class="outline-subdued">.outline-subdued</code></p>
<hr>
<p>
<div class="outline-subdued pad-top-0"><code>.pad-top-0</code></div>
<div class="outline-subdued pad-top-1"><code>.pad-top-1</code></div>
<div class="outline-subdued pad-top-2"><code>.pad-top-2</code></div>
<div class="outline-subdued pad-top-3"><code>.pad-top-3</code></div>
<div class="outline-subdued pad-top-4"><code>.pad-top-4</code></div>
</p>
<p>
<div class="outline-subdued pad-right-0 text-right"><code>.pad-right-0</code></div>
<div class="outline-subdued pad-right-1 text-right"><code>.pad-right-1</code></div>
<div class="outline-subdued pad-right-2 text-right"><code>.pad-right-2</code></div>
<div class="outline-subdued pad-right-3 text-right"><code>.pad-right-3</code></div>
<div class="outline-subdued pad-right-4 text-right"><code>.pad-right-4</code></div>
</p>
<p>
<div class="outline-subdued pad-bottom-0"><code>.pad-bottom-0</code></div>
<div class="outline-subdued pad-bottom-1"><code>.pad-bottom-1</code></div>
<div class="outline-subdued pad-bottom-2"><code>.pad-bottom-2</code></div>
<div class="outline-subdued pad-bottom-3"><code>.pad-bottom-3</code></div>
<div class="outline-subdued pad-bottom-4"><code>.pad-bottom-4</code></div>
</p>
<p>
<div class="outline-subdued pad-left-0"><code>.pad-left-0</code></div>
<div class="outline-subdued pad-left-1"><code>.pad-left-1</code></div>
<div class="outline-subdued pad-left-2"><code>.pad-left-2</code></div>
<div class="outline-subdued pad-left-3"><code>.pad-left-3</code></div>
<div class="outline-subdued pad-left-4"><code>.pad-left-4</code></div>
</p>
<hr>
<p>
<div class="outline-subdued margin-top-0"><code>.margin-top-0</code></div>
<div class="outline-subdued margin-top-1"><code>.margin-top-1</code></div>
<div class="outline-subdued margin-top-2"><code>.margin-top-2</code></div>
<div class="outline-subdued margin-top-3"><code>.margin-top-3</code></div>
<div class="outline-subdued margin-top-4"><code>.margin-top-4</code></div>
</p>
<p>
<div class="outline-subdued margin-right-0 text-right"><code>.margin-right-0</code></div>
<div class="outline-subdued margin-right-1 text-right"><code>.margin-right-1</code></div>
<div class="outline-subdued margin-right-2 text-right"><code>.margin-right-2</code></div>
<div class="outline-subdued margin-right-3 text-right"><code>.margin-right-3</code></div>
<div class="outline-subdued margin-right-4 text-right"><code>.margin-right-4</code></div>
</p>
<p>
<div class="outline-subdued margin-bottom-0"><code>.margin-bottom-0</code></div>
<div class="outline-subdued margin-bottom-1"><code>.margin-bottom-1</code></div>
<div class="outline-subdued margin-bottom-2"><code>.margin-bottom-2</code></div>
<div class="outline-subdued margin-bottom-3"><code>.margin-bottom-3</code></div>
<div class="outline-subdued margin-bottom-4"><code>.margin-bottom-4</code></div>
</p>
<p>
<div class="outline-subdued margin-left-0"><code>.margin-left-0</code></div>
<div class="outline-subdued margin-left-1"><code>.margin-left-1</code></div>
<div class="outline-subdued margin-left-2"><code>.margin-left-2</code></div>
<div class="outline-subdued margin-left-3"><code>.margin-left-3</code></div>
<div class="outline-subdued margin-left-4"><code>.margin-left-4</code></div>
</p>
</div>
</div>