Opacity

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

---

Naming convention

All classes follow the structure:

.u--opacity-{value}
.u--opacity-{breakpoint}-{value}

---

When to use

Use this utility when:

• You need to apply a specific opacity value to an element
• You want to change opacity responsively across breakpoints

---

Responsive variants

This utility supports responsive variants, using breakpoint prefixes like: tablets, tabletm, tabletl, laptop, desktop, wide.

---

How to use

In HTML

<div class="u--opacity-5 u--opacity-tabletl-4">
  <!-- Content -->
</div>

In CSS

.c--card-a {
  @extend .u--opacity-5;
  @extend .u--opacity-tabletl-4;
}