📝 Text align

The text-align utility allows you to control the horizontal alignment of inline text within an element. It supports both static and responsive variants generated through mixins and loops.

🧱 Naming convention

.u--text-{value}
.u--text-{breakpoint}-{value}

✅ When to use

Use this utility when:

• You need to align text content (e.g. center)
• You want to adjust text alignment at specific breakpoints

🧪 Responsive usage

This utility supports responsive variants, using breakpoint prefixes like: desktop, laptop, tabletl, tabletm, tablets, mobile.

✅ How to use

You can apply them directly in HTML:

<p class="u--text-center u--text-tabletl-left">
  Centered on desktop, left-aligned on tablet
</p>

Or extend them in SCSS if you have a custom class:

.c--card-a {
    &__title {
        @extend .u--text-center;
        @extend .u--text-tabletl-left;
    }
}