🌀 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

.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 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--overflow-hidden u--overflow-tabletl-visible">
  <!-- Content -->
</div>

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

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