Skip to main content

Overview

Use alignment utilities to place copy where it belongs without breaking logical reading direction.
ClassCSSWhen to use
.text-starttext-align: start;Default reading alignment
.text-centertext-align: center;Headlines, testimonials, CTA sections
.text-endtext-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.