Overflow

The overflow utility allows you to define how content that exceeds the bounds of its container is handled. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--overflow-{value}
.u--overflow-{breakpoint}-{value}

---

When to use

Use this utility when:

• You want to hide or reveal overflowing content
• You need to control scroll behavior or clipping
• You want to adjust overflow handling 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--overflow-hidden u--overflow-tabletl-visible">
  <!-- Content -->
</div>

In CSS

.c--card-a {
  @extend .u--overflow-hidden;
  @extend .u--overflow-tabletl-visible;
}