Font Style
Controls the font style of an element.
Utility | Properties |
---|---|
fs-i | font-style: italic; |
fs-n | font-style: normal; |
Italic
This example sets the font style to italic. The text will be displayed in an italicized format.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg fs-i p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p></div>
Normal
This example sets the font style to normal. The text will be displayed in a standard format without any italicization.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg fs-n p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Media modifiers
You can combine responsive breakpoints like sm:fs-*
,md:fs-*
, lg:fs-*
, and xxl:fs-*
allows targeting specific utilities in different viewports.
<div class="fs-n md:fs-i ..."></div>
Hover modifiers
Alternatively, you can apply :hover
by using h:fs-*
utility to override elements and change their values when hovering over them.
<div class="fs-n h:fs-i ..."></div>