Alignments

A suite of standard and flex alignment utility classes to easily align content.

Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.

Source

Contributors

Base

Standard

Used primarily to align text and other inline elements within their parent containers.

Left aligned

Center aligned

Right aligned

<h1 class="u-align-left">Left aligned</h1>
<h1 class="u-align-center">Center aligned</h1>
<h1 class="u-align-right">Right aligned</h1>

Responsive

Responsive variants of the above.

Center aligned at start, left aligned from `md` up

<h1 class="u-align-center u-align-left@md">Center aligned at start, left aligned from `md` up</h1>

Flex

Flexbox classes for controlling alignment for nested elements. Useful in a variety of scenarios, especially with objects such as o-layout. Like with standard alignment classes, responsive variants also exist here aswell.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.

I'm vertically centered.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.

I'm bottom aligned.

I'm right aligned.

I'm in the horizontal and vertical center.

<div class="o-layout u-flex-middle u-mb-regular">
	<div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div>
	<div class="o-layout__item u-width-4/12">I'm vertically centered.</div>
	<div class="o-layout__item u-width-4/12">I'm vertically centered.</div>
</div>

<div class="o-layout u-flex-bottom u-mb-regular">
	<div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div>
	<div class="o-layout__item u-width-4/12">I'm bottom aligned.</div>
	<div class="o-layout__item u-width-4/12">I'm bottom aligned.</div>
</div>

<div class="o-box u-p-small c-box u-flex-right u-mb-regular">
	<div class="o-box u-p-small u-theme-very-light u-width-6/12">I'm right aligned.</div>
</div>

<div class="o-box u-p-small c-box u-height-square u-flex-center-all">
	<div class="o-box u-p-small u-theme-very-light u-width-6/12">I'm in the horizontal and vertical center.</div>
</div>

Flex Aliases

Due to the flexible nature of flexbox (🥁), sometimes certain flex utility classes may not result in the desired behaviour if the parent's flex-direction property has been modified.

To clear up any potential confusion and increase code legibility, aliases for certain flex utilities exist which trigger the same behaviour, but are named more in line with the CSS property they modify.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.

I'm top aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.

I'm bottom aligned.

I'm right aligned.

<div class="o-layout u-flex-align-start u-mb-regular">
	<div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div>
	<div class="o-layout__item u-width-4/12">I'm top aligned.</div>
	<div class="o-layout__item u-width-4/12">I'm top aligned.</div>
</div>

<div class="o-layout u-flex-align-end u-mb-regular">
	<div class="o-layout__item u-width-4/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus.</div>
	<div class="o-layout__item u-width-4/12">I'm bottom aligned.</div>
	<div class="o-layout__item u-width-4/12">I'm bottom aligned.</div>
</div>

<div class="o-box u-p-small c-box u-flex-justify-start u-mb-regular">
	<div class="o-box u-p-small u-theme-very-light u-width-6/12">I'm right aligned.</div>
</div>

<div class="o-box u-p-small c-box u-flex-justify-end">
	<div class="o-box u-p-small u-theme-very-light u-width-6/12">I'm right aligned.</div>
</div>