Syntax

Text Transform

Controlling capitalization of text.

Overview

ClassDeclarations
text-transform:transformtext-transform: transform;
text-transform:nonetext-transform: none;
capitalizetext-transform: capitalize;
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalize

Heavy Boxes Perform Quick Waltzes And Jigs.

lowercase

heavy boxes perform quick waltzes and jigs.

uppercase

HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.

uppercase::first-letter

Heavy boxes perform quick waltzes and jigs.

text-transform:none

heavy boxes perform quick waltzes and jigs.


Basic usage

Capitalized text

Convert the first letter of each word to uppercase.

Heavy Boxes Perform Quick Waltzes And Jigs.

<p class="capitalize">heavy boxes perform quick waltzes and jigs.</p>

Lowercase text

Convert all characters to lowercase.

heavy boxes perform quick waltzes and jigs.

<p class="lowercase">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</p>

Uppercase text

Convert all characters to uppercase.

HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.

<p class="uppercase">heavy boxes perform quick waltzes and jigs.</p>

Sentence

Capitalize the first letter of a sentence.

Heavy boxes perform quick waltzes and jigs.

<p class="uppercase::first-letter">heavy boxes perform quick waltzes and jigs.</p>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="uppercase:hover uppercase@sm uppercase@dark uppercase@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.