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",
);