Text classes

Contextual text colors

Error text

Warning text

Muted text

Emphasize text

White text

Primary text

Success text

Moderate text

p.u-text-error Error text
p.u-text-warning Warning text
p.u-text-muted Muted text
p.u-text-emphasize Emphasize text
p.u-text-white style="background-color: #000" White text
p.u-text-primary Primary text
p.u-text-success Success text
p.u-text-moderate Moderate text

<p class="u-text-error">
  Error text
</p>
<p class="u-text-warning">
  Warning text
</p>
<p class="u-text-muted">
  Muted text
</p>
<p class="u-text-emphasize">
  Emphasize text
</p>
<p class="u-text-white" style="background-color: #000">
  White text
</p>
<p class="u-text-primary">
  Primary text
</p>
<p class="u-text-success">
  Success text
</p>
<p class="u-text-moderate">
  Moderate text
</p>

Text alignment

`.u-text-left`	Align text to the left
`.u-text-right`	Align text to the right
`.u-text-center`	Align text to center

`.u-text-top`	Align text to the top
`.u-text-bottom`	Align text to the bottom
`.u-text-middle`	Align text to middle

Left aligned text.

Center aligned text.

Right aligned text.

top aligned text.

middle aligned text.

bottom aligned text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id massa et odio laoreet vestibulum. Duis et bibendum ante, id porta enim. Donec lobortis mauris et facilisis sagittis. Pellentesque aliquam risus nec tortor mollis hendrerit. Phasellus auctor tortor tortor, hendrerit suscipit erat fringilla pellentesque.

p.u-text-left Left aligned text.
p.u-text-center Center aligned text.
p.u-text-right Right aligned text.

table.c-table--celled
  tr
    td.u-text-top top aligned text.
    td.u-text-middle middle aligned text.
    td.u-text-bottom bottom aligned text.
    td Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id massa et odio laoreet vestibulum. Duis et bibendum ante, id porta enim. Donec lobortis mauris et facilisis sagittis. Pellentesque aliquam risus nec tortor mollis hendrerit. Phasellus auctor tortor tortor, hendrerit suscipit erat fringilla pellentesque.

<p class="u-text-left">
  Left aligned text.
</p>
<p class="u-text-center">
  Center aligned text.
</p>
<p class="u-text-right">
  Right aligned text.
</p>
<table class="c-table--celled">
  <tr>
    <td class="u-text-top">
      top aligned text.
    </td>
    <td class="u-text-middle">
      middle aligned text.
    </td>
    <td class="u-text-bottom">
      bottom aligned text.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id massa et odio laoreet vestibulum. Duis et bibendum ante, id porta enim. Donec lobortis mauris et facilisis sagittis. Pellentesque aliquam risus nec tortor mollis hendrerit. Phasellus auctor tortor tortor, hendrerit suscipit erat fringilla pellentesque.
    </td>
  </tr>
</table>

Text transformation

`.u-text-uppercase`	Transform text in uppercase
`.u-text-lowercase`	Transform text in lowercase
`.u-text-capitalize`	Capitalize text
`.u-text-no-transform`	No transform text
`.u-text-link`	Linkify text, just style.

Uppercased text.

Lowercased text.

capitalized text.

No Transformed Text.

Linkify text, just style.

p.u-text-uppercase Uppercased text.
p.u-text-lowercase Lowercased text.
p.u-text-capitalize capitalized text.
p.u-text-transform No Transformed Text.
p.u-text-link Linkify text, just style.

<p class="u-text-uppercase">
  Uppercased text.
</p>
<p class="u-text-lowercase">
  Lowercased text.
</p>
<p class="u-text-capitalize">
  capitalized text.
</p>
<p class="u-text-transform">
  No Transformed Text.
</p>
<p class="u-text-link">
  Linkify text, just style.
</p>

Text overflow

`.u-text-ellipsis`	Display an ellipsis ('…') to represent clipped text.
`.u-nowrap`	Avoid line break.
`.u-word-break-all`	Force to break line on long word.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum

http://gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com

p.u-text-ellipsis Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

table
  tr
  td.u-nowrap Lorem ipsum
  td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
table
  tr
  td.u-word-break-all http://gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com

<p class="u-text-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<table>
  <tr></tr>
  <td class="u-nowrap">
    Lorem ipsum
  </td>
  <td>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </td>
</table>
<table>
  <tr></tr>
  <td class="u-word-break-all">
    http://gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com
  </td>
</table>

.u-text-tiny Tiny Sample Text サンプル (1px)
.u-text-smaller Smaller Sample Text サンプル (12px)
.u-text-small Small Sample Text サンプル (13px)
.u-text-normal Normal Sample Text サンプル (14px)
.u-text-large Large Sample Text サンプル (16px)
.u-text-larger Larger Sample Text サンプル (18px)
.u-text-huge Huge Sample Text サンプル (20px)

<div class="u-text-tiny">
  Tiny Sample Text サンプル (1px)
</div>
<div class="u-text-smaller">
  Smaller Sample Text サンプル (12px)
</div>
<div class="u-text-small">
  Small Sample Text サンプル (13px)
</div>
<div class="u-text-normal">
  Normal Sample Text サンプル (14px)
</div>
<div class="u-text-large">
  Large Sample Text サンプル (16px)
</div>
<div class="u-text-larger">
  Larger Sample Text サンプル (18px)
</div>
<div class="u-text-huge">
  Huge Sample Text サンプル (20px)
</div>

Font families

font-family: Helvetica, Arial, serif;

font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;

.u-fixed-font-family font-family: Helvetica, Arial, serif;
.u-monospace-font-family font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;