Sections

Font style

Utilities for controlling the style of text.

Class Properties
.italic font-style: italic;
.normal font-style: normal;

Usage

Use the .normal utility to display text normally. This is typically used to reset italic text at different breakpoints.

The quick brown fox jumped over the lazy dog.

<p class="normal ...">The quick brown fox jumped over the lazy dog.</p>

Use the .italic utility to make text italic.

The quick brown fox jumped over the lazy dog.

<p class="italic ...">The quick brown fox jumped over the lazy dog.</p>

Variants

By default, only responsive variants are generated for font style utilities.

Responsive

To control the font size of an element at a specific breakpoint, add a {screen}: prefix to any existing font style utility.

For example, use .md:italic to apply the italic utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:italic, add "font-style" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "font-style",
);