Design System

Text Align Utilities


Adjust text alignment with the following utility classes. Text is aligned left by default.

To adjust text alignment at a specified breakpoint, use the format -text-{direction}-{breakpoint}, where {direction} can be left, center, or right, and {breakpoint} can be xs, sm, md, lg or xl. Breakpoint-specific classes cascade downwards.

<p className="-text-left">Left-aligned text</p>
<p className="-text-center">Centered text</p>
<p className="-text-right">Right-aligned text</p>

Optional classes:

  • -text-left
  • -text-center
  • -text-right
  • -text-left--*
  • -text-center--*
  • -text-right--*