<div class="ch-text--left">Left-aligned text</div>
<div class="ch-text--center">Center-aligned text</div>
<div class="ch-text--right">Right-aligned text</div>

<div class="ch-text--lowercase">LOWERCASED TEXT</div>
<div class="ch-text--uppercase">uppercased text</div>
<div class="ch-text--capitalize">capitalized text</div>

<div class="ch-fw--400">Font-weight 400 (Gotham Book)</div>
<div class="ch-fw--500">Font-weight 500 (Gotham Medium)</div>
<div class="ch-fw--600">Font-weight 600 (Gotham Bold)</div>
<div class="ch-fw--800">Font-weight 800 (Gotham Black)</div>
<div class="ch-text--italic">Italicized text</div>
<a class="ch-text-decoration--none">Text decoration none</a>

<div class="ch-width--3 ch-text--ellipsis">
  Overflow behavior: display an ellipsis to represent clipped text
</div>
<div class="ch-width--3 ch-text--clip" style="height:20px;">
  Overflow behavior: truncate the text
</div>

<!-- Responsive eg... -->
<div class="[sl,sm,md,lg]:ch-text--*"></div>

<!-- This particular example: -->
<div class="sl:ch-fw--500 sm:ch-text--italic md:ch-text--uppercase">
  Responsive: resize the screen to see how the breakpoints apply the text
  utilities
</div>

Having trouble with flex and ch-text--ellipsis?

If you find that the ellipsis utility class doesn't work with your flexbox layout, you may need to add min-width: 1px to the containing element.