Text Align

Utilities for controlling the alignment of text.

Class Properties
.ta-left text-align: left;
.ta-center text-align: center;
.ta-right text-align: right;

Usage

Control the text alignment of an element using the .ta-left, .ta-center and .ta-right utilities

.ta-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

.ta-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

.ta-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

Responsive

To control the text alignment at a specific breakpoint, add @{breakpoint} to any existing text alignment utility. In the following example, the text is centered in mobile view, but is aligned to the left when the breakpoint lg is reached.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.