📐 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

.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 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:

<div class="u--width-100 u--width-tabletl-auto">
  ...
</div>

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

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