Typography
Font Size
Utilities for sets the font size.
Class
class | css | |
---|---|---|
text-xs | font-size: .75rem | Text |
text-sm | font-size: .875rem | Text |
text-md | font-size: 1rem | Text |
text-lg | font-size: 1.125rem | Text |
text-xl | font-size: 1.25rem | Text |
text-2xl | font-size: 1.5rem | Text |
text-3xl | font-size: 1.875rem | Text |
text-4xl | font-size: 2.25rem | Text |
text-5xl | font-size: 3rem | Text |
text-6xl | font-size: 4rem | Text |
text-7xl | font-size: 5rem | Text |
text-8xl | font-size: 6rem | Text |
Usage
Set font-size to an element.
<!-- Example -->
<y class="text-md">
...
</y>
<span class="text-md">
...
</span>
Set default font-size with <body>
tag.
<!-- Example -->
<body class="text-md">
...
</body>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'text',
//variant: 'responsive',
property: 'font-size',
modifier: (
'9xl': '7rem',
'10xl': '8rem'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |