Text

Utility classes for text size, alignment, wrapping, and decoration. Text size and alignment support responsive breakpoint suffixes.

Responsive text size

Combine a base size with a responsive override. The suffixed class applies from the named breakpoint upward.

<p class="text-body-sm text-body-lg@md mb-3">Small on mobile, large from md up</p>
<p class="text-meta text-body-lg@lg">Meta on mobile, large from lg up</p>

Small on mobile, large from md up

Meta on mobile, large from lg up

Text alignment

Use .text-start, .text-center, and .text-end to control text alignment. These utilities support responsive suffixes (@sm, @md, @lg, @xl, @2xl).

<p class="text-start border p-2 mb-3">Left-aligned text (default).</p>
<p class="text-center border p-2 mb-3">Centre-aligned text.</p>
<p class="text-end border p-2">Right-aligned text.</p>

Left-aligned text (default).

Centre-aligned text.

Right-aligned text.

Responsive text alignment

Combine a base alignment with a responsive override. The suffixed class applies from the named breakpoint upward.

<!-- Left on mobile, centred from md up -->
<p class="text-start text-center@md border p-2 mb-3">Centred from md up.</p>

<!-- Centred by default, right-aligned from lg up -->
<p class="text-center text-end@lg border p-2">Right-aligned from lg up.</p>

Centred from md up.

Right-aligned from lg up.

Text wrapping

Control how text wraps within its container. These utilities are not responsive.

<p class="text-wrap border p-2 mb-3">Text with default wrapping behaviour.</p>
<p class="text-nowrap border p-2 mb-3">Text that will not wrap to a new line.</p>
<p class="text-balance border p-2 mb-3">Text balanced across lines for even line lengths.</p>
<p class="text-pretty border p-2">Text with optimised line breaks to avoid orphans.</p>

Text with default wrapping behaviour.

Text that will not wrap to a new line.

Text balanced across lines for even line lengths.

Text with optimised line breaks to avoid orphans.

Text decoration

Override or remove text decoration. Useful for removing underlines from links or adding strikethrough to deleted content.

<a href="#" class="text-decoration-none mb-3 d-block">Link with no underline</a>
<span class="text-decoration-underline mb-3 d-block">Underlined text</span>
<span class="text-decoration-line-through">Struck-through text</span>

Link with no underlineUnderlined textStruck-through text

Reference

Class	Property	Responsive
`.text-body-lg`	`font-size: var(--t-body-lg-s)`	Yes
`.text-body-sm`	`font-size: var(--t-body-sm-s)`	Yes
`.text-body-xs`	`font-size: var(--t-body-xs-s)`	Yes
`.text-meta`	`font-size: var(--t-meta-s)`	Yes
`.text-start`	`text-align: start`	Yes
`.text-center`	`text-align: center`	Yes
`.text-end`	`text-align: end`	Yes
`.text-wrap`	`text-wrap: wrap`	No
`.text-nowrap`	`text-wrap: nowrap`	No
`.text-balance`	`text-wrap: balance`	No
`.text-pretty`	`text-wrap: pretty`	No
`.text-decoration-none`	`text-decoration: none`	No
`.text-decoration-underline`	`text-decoration: underline`	No
`.text-decoration-line-through`	`text-decoration: line-through`	No