Code Club Style Guide

Text Modifications

Text Modifications

To change font size:

Example
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
<ul>
<li class="u-font-size--xx-small">Text</li>
<li class="u-font-size--x-small">Text</li>
<li class="u-font-size--small">Text</li>
<li class="u-font-size--base">Text</li>
<li class="u-font-size--large">Text</li>
<li class="u-font-size--x-large">Text</li>
<li class="u-font-size--xx-large">Text</li>
</ul>

To change heading font size:

Example
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
<ul>
<li class="u-h1">Text</li>
<li class="u-h2">Text</li>
<li class="u-h3">Text</li>
<li class="u-h4">Text</li>
<li class="u-h5">Text</li>
<li class="u-h6">Text</li>
</ul>

To change text color:

Example
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
  • Text
<ul>
<li class="u-color--grey-dark">Text</li>
<li class="u-color--grey-med">Text</li>
<li class="u-color--grey-light">Text</li>
<li class="u-color--grey-x-light">Text</li>
<li class="u-color--grey-xx-light">Text</li>
<li class="u-color--red">Text</li>
<li class="u-color--blue">Text</li>
<li class="u-color--green">Text</li>
<li class="u-color--yellow">Text</li>
</ul>

To transform text:

Example
  • Text
  • Text
<ul>
<li class="u-text--lowercase">Text</li>
<li class="u-text--uppercase">Text</li>
</ul>

To change text weight:

Example
  • Text
  • Text
  • Text
  • Text
  • Text
<ul>
<li class="u-font-weight--light">Text</li>
<li class="u-font-weight--base">Text</li>
<li class="u-font-weight--bold">Text</li>
<li class="u-font-weight--x-bold">Text</li>
<li class="u-font-weight--xx-bold">Text</li>
</ul>

To change text alignment:

Example
Text
Text
Text
<div class="c-grid">
<div class="c-col c-col--4 u-background--green u-text--center">Text</div>
<div class="c-col c-col--4 u-background--green u-text--left">Text</div>
<div class="c-col c-col--4 u-background--green u-text--right">Text</div>
</div>