Width

The width utility allows you to quickly control the width of an element using predefined percentage values or auto. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--width-{value}
.u--width-{breakpoint}-{value}

---

When to use

Use this utility when:

• You need to force a specific width on a block or component
• You need to adapt an element’s width at different breakpoints

---

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--width-100 u--width-tabletl-auto">
  ...
</div>

In CSS

.c--card-a {
  @extend .u--width-100;
  @extend .u--width-tabletl-auto;
}