Font
Font Modifications
Apply the class f-{FONT-MODIFICATION}
where {FONT-MODIFICATION}
is one of the
modifications listed above.
f-uppercase
f-capitalize
f-none
f-underline
f-strikethrough
f-left
f-center
f-right
f-emphasize
f-regular
f-medium
f-heavier
f-semibold
f-bold
f-family-sans
f-family-serif
f-family-mono
Code
<span class="f-uppercase"></span>
<span class="f-capitalize"></span>
<span class="f-none"></span>
<span class="f-underline"></span>
<span class="f-strikethrough"></span>
<span class="f-left"></span>
<span class="f-center"></span>
<span class="f-right"></span>
<span class="f-emphasize"></span>
<span class="f-regular"></span>
<span class="f-medium"></span>
<span class="f-heavier"></span>
<span class="f-semibold"></span>
<span class="f-bold"></span>
<span class="f-family-sans"></span>
<span class="f-family-serif"></span>
<span class="f-family-mono"></span>
Font Size
Apply the class f-{FONT-SIZE}
where {FONT-SIZE}
is a number between 12 & 64
divisible by 2, eg 12, 14, 16, 18, 20, 24
. Breakpoint prefixes may also be applied using the
pattern f-{PREFIX}-{FONT-SIZE}
where {PREFIX}
is s, m, l, xl
.
f-12
f-14
f-16
f-18
f-20
f-22
f-24
f-26
f-28
f-30
f-32
f-34
f-36
f-38
f-40
f-42
f-44
f-46
f-48
f-50
f-52
f-54
f-56
f-58
f-60
f-62
f-64
Code
<span class="f-12"></span>
<span class="f-14"></span>
<span class="f-16"></span>
<span class="f-18"></span>
<span class="f-20"></span>
<span class="f-22"></span>
<span class="f-24"></span>
<span class="f-26"></span>
<span class="f-28"></span>
<span class="f-30"></span>
<span class="f-32"></span>
<span class="f-34"></span>
<span class="f-36"></span>
<span class="f-38"></span>
<span class="f-40"></span>
<span class="f-42"></span>
<span class="f-44"></span>
<span class="f-46"></span>
<span class="f-48"></span>
<span class="f-50"></span>
<span class="f-52"></span>
<span class="f-54"></span>
<span class="f-56"></span>
<span class="f-58"></span>
<span class="f-60"></span>
<span class="f-62"></span>
<span class="f-64"></span>