Set the capitalization of text using the text transform utility.

Format: .ds-u-text-transform--[uppercase|lowercase|capitalize]

<section class="example-list">
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-transform--uppercase</code>
    <div class="ds-u-text-transform--uppercase">
      upper case transformed text
    </div>
  </article>
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-transform--lowercase</code>
    <div class="ds-u-text-transform--lowercase">
      LOWER CASE TRANSFORMED TEXT
    </div>
  </article>
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-transform--capitalize</code>
    <div class="ds-u-text-transform--capitalize">
      capitalized transformed text
    </div>
  </article>
</section>

Guidance

Accessibility

Use all capital letters sparingly. They can cause challenges for some people.

• All capital letters make it harder to read words, particularly for those with dyslexia. "When we read, we don't actually look at every letter in a sentence, but actually the shapes of the words. When text is in All Caps, the height of every letter is identical making every word an even rectangular shape, forcing us to read letter-by-letter, reducing our reading speed." For more information, read Writing readable content.
• "Some screen readers read capitalized text letter-by-letter. And this occasionally even occurs when the HTML is in sentence-case and the CSS forces the capitalization." For more information, read Making Accessible Links.