| 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.
<p class="normal ...">The quick brown fox jumped over the lazy dog.</p>Use the .italic utility to make text italic.
<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",
);