Text transform
import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";
export const title = "text-transform"; export const description = "Utilities for controlling the capitalization of text.";
Examples¶
Uppercasing text¶
Use the uppercase utility to uppercase the text of an element:
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:uppercase] -->
<p class="uppercase">The quick brown fox ...</p>
Lowercasing text¶
Use the lowercase utility to lowercase the text of an element:
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:lowercase] -->
<p class="lowercase">The quick brown fox ...</p>
Capitalizing text¶
Use the capitalize utility to capitalize text of an element:
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:capitalize] -->
<p class="capitalize">The quick brown fox ...</p>
Resetting text casing¶
Use the normal-case utility to preserve the original text casing of an element—typically used to reset capitalization at different breakpoints:
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:normal-case] -->
<p class="normal-case">The quick brown fox ...</p>