Text Style

Use transform and decoration utilities to add emphasis without writing custom CSS.

Overview

Use text-style utilities for simple emphasis and casing changes without extra CSS.

Class	CSS	Typical use
.uppercase	text-transform: uppercase;	Section labels, badges, navigation
.lowercase	text-transform: lowercase;	Code identifiers, stylistic headings
.underline	text-decoration: underline;	Link emphasis, inline callouts
.no-underline	text-decoration: none;	Remove default link underline
.italic	font-style: italic;	Quotes, citations, calls to action

Example

<div class="elementor-element flex flex-col gap-2">
  <p class="text-sm uppercase tracking-wide text-gray">
    Release notes
  </p>
  <h3 class="text-3xl font-semibold text-black">
    Version 1.4.0 sharpens the bundled typography system
  </h3>
</div>

Combine .uppercase with .tracking-wide or .tracking-wider to prevent capped text from feeling cramped.

Style Guardrails

• Reserve .uppercase for short labels; long uppercase paragraphs quickly lose readability.
• Use .no-underline alongside a hover state (e.g. .underline on hover) so links remain discoverable.
• Italic text can appear faint at lighter weights—bump to .font-medium or higher if contrast is low.

Inline emphasis should come from utility classes, not manual HTML elements. This keeps your Elementor global styles consistent and easy to audit.