Align items

The align-items utility provides a quick way to control vertical alignment of flex items inside a flex container. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--align-items-{value}
.u--align-items-{breakpoint}-{value}

---

When to use

Use this utility when:

• You’re working with a flex layout
• You want to control how items align vertically
• You need quick alignment per breakpoint

NOTE!

Make sure the parent container has display: flex for align-items to work.

---

Responsive variants

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

---

How to use

In HTML

<div class="u--display-flex u--align-items-center u--align-items-tablets-flex-start">
  <p>Hello world</p>
</div>

In CSS

.c--card-a {
    @extend .u--display-flex;
    @extend .u--align-items-center;
    @extend .u--align-items-tablets-flex-start;
}