Text transform

Transform text in components with text capitalization classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

CSS

Sass utilities API

Text transform utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"text-transform": (
  property: text-transform,
  class: text,
  values: lowercase uppercase capitalize
),