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.

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 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.
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>

Font size

Tiny Sample Text サンプル (1px)
Smaller Sample Text サンプル (12px)
Small Sample Text サンプル (13px)
Normal Sample Text サンプル (14px)
Large Sample Text サンプル (16px)
Larger Sample Text サンプル (18px)
Huge Sample Text サンプル (20px)
.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;
<div class="u-fixed-font-family">
  font-family: Helvetica, Arial, serif;
</div>
<div class="u-monospace-font-family">
  font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;
</div>
SlimHTML
Mobile view (xs) Tablet view (sm) Desktop view (md) Wide desktop view (lg)