Typography
The Typography utilities provide text styling, transformation, alignment, and overflow controls. Font sizing and weight are handled by the global element defaults and your own project tokens — these utilities cover the formatting decisions that sit on top of that baseline.
Usage
Typography utilities can be combined to achieve various text styling effects. They cover text transformation, alignment, and both single-line and multi-line overflow handling.
<h2 class="text-center italic">Centered, italic heading</h2>
<p class="read-more" style="--line-count: 3;">
This paragraph will be truncated to 3 lines with an ellipsis if the content
exceeds that height.
</p>
<span class="uppercase ellipsis">
Single-line text that truncates with ellipsis if too long
</span>Custom Properties
| Property | Default | Description |
|---|---|---|
--line-count |
2 |
Number of lines to show for .read-more class |
Class Patterns
| Pattern | Description |
|---|---|
.italic |
Sets font-style to italic |
.fl |
Capitalizes the first letter only |
.uppercase |
Transforms text to uppercase |
.lowercase |
Transforms text to lowercase |
.capitalize |
Capitalizes the first letter of each word |
.text-center |
Centers text alignment |
.text-start |
Aligns text to the start (left in LTR) |
.text-end |
Aligns text to the end (right in LTR) |
.read-more |
Multi-line text truncation with customizable line count |
.ellipsis |
Single-line text truncation with ellipsis |