<table class="c-table">
<tr>
<td style="width: 200px">.u-hide-sm</td>
<td>
<p class="u-hide-sm">Hide on small screen size</p>
</td>
</tr>
<tr>
<td>.u-hide-md</td>
<td>
<p class="u-hide-md">Hide on medium screen size</p>
</td>
</tr>
<tr>
<td>.u-hide-lg</td>
<td>
<p class="u-hide-lg">Hide on large screen size</p>
</td>
</tr>
<tr>
<td>.u-normal</td>
<td>
<p class="u-normal">Normal</p>
</td>
</tr>
<tr>
<td>.u-strong</td>
<td>
<p class="u-strong">Bold</p>
</td>
</tr>
<tr>
<td>.u-muted</td>
<td>
<p class="u-muted">Muted</p>
</td>
</tr>
<tr>
<td>.u-light</td>
<td>
<p class="u-light">Light</p>
</td>
</tr>
<tr>
<td>.u-dark</td>
<td>
<p class="u-dark">Text</p>
</td>
</tr>
<tr>
<td>.u-extra-small</td>
<td>
<p class="u-extra-small">Extra small</p>
</td>
</tr>
<tr>
<td>.u-small</td>
<td>
<p class="u-small">Small</p>
</td>
</tr>
<tr>
<td>.u-large</td>
<td>
<p class="u-large">Large</p>
</td>
</tr>
<tr>
<td>.u-left</td>
<td>
<p class="u-left">Left</p>
</td>
</tr>
<tr>
<td>.u-center</td>
<td>
<p class="u-center">Center</p>
</td>
</tr>
<tr>
<td>.u-right</td>
<td>
<p class="u-right">Right</p>
</td>
</tr>
<tr>
<td>.u-input</td>
<td>
<p class="u-input">Input spacing</p>
</td>
</tr>
<tr>
<td>.u-primary</td>
<td>
<p class="u-primary">Primary</p>
</td>
</tr>
<tr>
<td>.u-danger</td>
<td>
<p class="u-danger">Danger</p>
</td>
</tr>
<tr>
<td>.u-error</td>
<td>
<p class="u-error">Error</p>
</td>
</tr>
<tr>
<td>.u-warning</td>
<td>
<p class="u-warning">Warning</p>
</td>
</tr>
<tr>
<td>.u-success</td>
<td>
<p class="u-success">Success</p>
</td>
</tr>
<tr>
<td>.u-title-primary</td>
<td>
<p class="u-title-primary">Primary title</p>
</td>
</tr>
<tr>
<td>.u-title-secondary</td>
<td>
<p class="u-title-secondary">Secondary title</p>
</td>
</tr>
<tr>
<td>.u-textfield</td>
<td>
<p class="u-textfield">Textfield spacing</p>
</td>
</tr>
<tr>
<td>.u-placeholder</td>
<td>
<p class="u-placeholder">Placeholder</p>
</td>
</tr>
</table>