Text transform

Class reference

# Normal Case

Use the .normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

<p class="normal-case ...">The quick brown fox ...</p>

# Uppercase

Use the .uppercase utility to uppercase text.

<p class="uppercase ...">The quick brown fox ...</p>

# Lowercase

Use the .lowercase utility to lowercase text.

<p class="lowercase ...">The quick brown fox ...</p>

# Capitalize

Use the .capitalize utility to capitalize text.

<p class="capitalize ...">The quick brown fox ...</p>

# Responsive

To control the text transformation 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.

<p class="capitalize **md:uppercase** ...">
  The quick brown fox jumped over the lazy dog.
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.