Font style

The font-style utility allows you to quickly apply text styles such as italic or normal to elements. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--font-style-{value}
.u--font-style-{breakpoint}-{value}

---

When to use

Use this utility when:

• You want to apply different text styling (e.g., italic, normal)
• You need to toggle text styling styles at specific breakpoints

---

Responsive variants

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

---

How to use

In HTML

<p class="u--font-style-italic">This text is italic.</p>
<p class="u--font-style-normal u--font-style-tablets-italic">Responsive font style</p>

In CSS

.c--card-a {
  @extend .u--font-style-italic;
}