> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Style

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

export const TextStyleDemo = () => {
  const styles = [{
    cls: "uppercase",
    sample: "release notes",
    style: {
      textTransform: "uppercase",
      letterSpacing: "0.08em"
    }
  }, {
    cls: "lowercase",
    sample: "Already Lowered",
    style: {
      textTransform: "lowercase"
    }
  }, {
    cls: "underline",
    sample: "Explore the linked documentation",
    style: {
      textDecorationLine: "underline",
      textUnderlineOffset: "4px"
    }
  }, {
    cls: "no-underline",
    sample: "Plain link treatment",
    style: {
      textDecorationLine: "none"
    }
  }, {
    cls: "italic",
    sample: "Editorial emphasis still feels soft and readable.",
    style: {
      fontStyle: "italic"
    }
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-8">
        {styles.map(s => <div key={s.cls}>
            <span className="tw-label">{s.cls}</span>
            <div style={{
    ...s.style,
    fontSize: "1.125rem",
    lineHeight: 1.5,
    fontWeight: 500,
    color: "var(--demo-fg)"
  }}>
              {s.sample}
            </div>
          </div>)}
      </div>
    </div>;
};

## 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

<TextStyleDemo />

```html theme={null}
<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>
```

<Tip>
  Combine `.uppercase` with `.tracking-wide` or `.tracking-wider` to prevent capped text from feeling cramped.
</Tip>

## 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.

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