Text Alignment

Align text using the text-align utility.

Format: .ds-u-text-align--[center|left|right]

Responsive format: .ds-u-[breakpoint]-text-align--[center|left|right]

.ds-u-text-align--left

We the People of the United States

.ds-u-text-align--center

We the People of the United States

.ds-u-text-align--right

We the People of the United States

<section class="example-list">
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--left</code>
    <div class="ds-u-text-align--left">We the People of the United States</div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--center</code>
    <div class="ds-u-text-align--center">
      We the People of the United States
    </div>
  </article>
  <article>
    <code class="ds-u-margin-bottom--1">.ds-u-text-align--right</code>
    <div class="ds-u-text-align--right">We the People of the United States</div>
  </article>
</section>

Responsive text alignment

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

CMS Design System

Have ideas?

Responsive text alignment

On this page

Have ideas?

On this pageOpen

Have ideas?

Responsive text alignment

On this page

Have ideas?