Skip to main content

Design System

Text alignment

Align text using the text-align utility.

Format: ds-u-text-align--[VALUE]

Code snippet
<div class="ds-u-text-align--center">
  <code class="preview__label">ds-u-text-align--center</code>
  Center
</div>
<div class="ds-u-text-align--left">
  <code class="preview__label">ds-u-text-align--left</code>
  Left
</div>
<div class="ds-u-text-align--right">
  <code class="preview__label">ds-u-text-align--right</code>
  Right
</div>

Responsive text alignment

Use a breakpoint prefix to change the text alignment at specific breakpoints.

New tab
Code snippet
<div class="ds-u-sm-text-align--center ds-u-md-text-align--left ds-u-lg-text-align--right">
 We the People of the United States
</div>