Text Alignment

Apply semantic alignment utilities that respect document direction and layout context.

Overview

Use alignment utilities to place copy where it belongs without breaking logical reading direction.

Class	CSS	When to use
.text-start	text-align: start;	Default reading alignment
.text-center	text-align: center;	Headlines, testimonials, CTA sections
.text-end	text-align: end;	Metadata, side notes, number-heavy content

Start Alignment

<p class="text-start">
  Long-form content stays easiest to scan when it follows the reading edge.
</p>

Use .text-start for long-form copy and default reading flow.

Center Alignment

<p class="text-center">
  Center alignment puts the spotlight on the message.
</p>

Combine .text-center with a constrained width when you want the message to sit in the middle of the layout.

End Alignment

<p class="text-end">
  Updated: April 2026
</p>

Use .text-end for side notes, timestamps, and compact metadata that should sit against the far edge.