| Class | Properties |
|---|---|
.lowercase | text-transform: lowercase; |
.uppercase | text-transform: uppercase; |
.capitalize | text-transform: capitalize; |
.normal-case | text-transform: none; |
Usage
Use the .lowercase utility to lowercase text.
<p class="lowercase ...">The quick brown fox jumped over the lazy dog.</p>Use the .uppercase utility to uppercase text.
<p class="uppercase ...">The quick brown fox jumped over the lazy dog.</p>Use the .capitalize utility to capitalize text.
<p class="capitalize ...">The quick brown fox jumped over the lazy dog.</p>Use the .normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.
Variants
By default, only responsive variants are generated for text transformation utilities.
Responsive
To control the appearance of an element at a specific breakpoint, add a {screen}: prefix to any existing text transformation utility.
For example, use .md:uppercase to apply the uppercase utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:uppercase, add "text-transform" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"text-transform",
);