Base

Class	Description
.ui-text	Base class

<!-- Semantic text styles for specific use cases. -->
<p class="ui-text-lead">Lead: Opening paragraph style (20px / 32px)</p>
<p class="ui-text-eyebrow">Eyebrow: Small caps label</p>
<p class="ui-text-caption">Caption: Labels and hints (12px / 16px)</p>
<p class="ui-text-body-sm">Body small: Secondary text (14px / 24px)</p>

<p class="ui-font-normal">font-normal (400)</p>
<p class="ui-font-medium">font-medium (500)</p>
<p class="ui-font-semibold">font-semibold (600)</p>
<p class="ui-font-bold">font-bold (700)</p>

<p class="ui-text-2xl ui-tracking-display">tracking-display: Tight (-0.02em)</p>
<p class="ui-tracking-body">tracking-body: Default (0)</p>
<p class="ui-tracking-caps ui-uppercase">tracking-caps: Wide (+0.08em)</p>

<!-- Constrain text width for optimal readability. -->
<p class="ui-prose-sm">prose-sm: 45ch max-width</p>
<p class="ui-prose">prose: 65ch max-width (recommended)</p>
<p class="ui-prose-lg">prose-lg: 75ch max-width</p>

<p class="ui-text-primary">text-primary</p>
<p class="ui-text-muted">text-muted</p>
<p class="ui-text-success">text-success</p>
<p class="ui-text-warning">text-warning</p>
<p class="ui-text-danger">text-danger</p>

<p class="ui-text-start">text-start (default)</p>
<p class="ui-text-center">text-center</p>
<p class="ui-text-end">text-end</p>

<!-- Control how text wraps across lines. -->
<p class="ui-text-balance ui-text-2xl ui-font-bold demo-narrow">Balanced: distributes text evenly across lines</p>
<p class="ui-text-pretty demo-narrow">Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally</p>
<p class="ui-text-nowrap">Nowrap: prevents text from wrapping to the next line</p>

<!-- Clamp text to a specific number of lines with ellipsis. -->
<p class="ui-truncate-2 demo-narrow">Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character.</p>
<p class="ui-truncate-3 demo-narrow">Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end.</p>
<p class="ui-truncate-4 demo-narrow">Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis.</p>