📏 Height

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

🧱 Naming convention

.u--height-{value}
.u--height-{breakpoint}-{value}

✅ When to use

Use this utility when:

• You need to force a specific height on a block or component
• You want to apply height values responsively

🧪 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--height-100 u--height-tabletl-auto">
  <!-- Content -->
</div>

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

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