🪟 Display

The display utility provides a quick way to control the display behavior of an element. It supports both static and responsive variants generated through mixins and loops.

🧱 Naming convention

All classes follow the structure:

.u--display-{value}
.u--display-{breakpoint}-{value}

✅ When to use

Use this utility when:

• You need to toggle element visibility (block, none, inline, etc.)
• You want to switch layouts responsively — for example, showing a block layout on desktop and none on mobile
• You want to apply layout behaviors like flex or grid

NOTE!

The display utility works on any element and does not depend on a specific context — unlike utilities such as align-items or justify-content, which require display: flex.

🧪 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--display-flex u--display-tabletm-block u--display-tablets-none">
  <p>Hello world</p>
</div>

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

.c--card-a {
  @extend .u--display-flex;
  @extend .u--display-tabletm-block;
  @extend .u--display-tablets-none;
}