Typography

Text Transform

Utilities for controlling the transformation of text.

Quick reference

Class	Description
uppercase	text-transform: uppercase
lowercase	text-transform: lowercase
capitalize	text-transform: capitalize
normal-case	text-transform: none

Basic usage

Transforming text

The uppercase and lowercase will uppercase and lowercase text respectively, whereas capitalize utility will convert text to title-case. The normal-case utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints.

normal-case

The quick smart warp scientist

uppercase

The quick smart warp scientist

lowercase

The quick smart warp scientist

capitalize

The quick smart warp scientist

<p class="normal-case...">The quick smart warp scientist ...</p>
<p class="uppercase ...">The quick smart warp scientist ...</p>
<p class="lowercase ...">The quick smart warp scientist ...</p>
<p class="capitalize ...">The quick smart warp scientist ...</p>