Align

Ready

HTML
View
Context
Info
Notes


        
        <p class="align-start">Start-aligned paragraph.</p>
<p class="align-center">Center-aligned paragraph.</p>
<p class="align-end">End-aligned paragraph.</p>


        <p class="align-start">Start-aligned paragraph.</p>
<p class="align-center">Center-aligned paragraph.</p>
<p class="align-end">End-aligned paragraph.</p>


        
            
            /* No context defined. */

Handle: @align
Preview:
- With layout
- Component only
Filesystem Path: src/components/utilities/align/align.njk

Align

The .align-start, .align-center, and .align-end classes apply alignment to a container based on CSS logical properties. For left-to-right languages such as English and French, start corresponds to left and end corresponds to right. For right-to-left languages such aspect Arabic and Hebrew, start corresponds to right and end corresponds to left.