Typography
Line Height
Utilities for sets the line height.
Class
class | css |
---|---|
depth-none | line-height: 1 |
depth-tight | line-height: 1.25 |
depth-snug | line-height: 1.375 |
depth-normal | line-height: 1.5 |
depth-relaxed | line-height: 1.625 |
depth-loose | line-height: 2 |
depth-3 | line-height: .75rem |
depth-4 | line-height: 1rem |
depth-5 | line-height: 1.25rem |
depth-6 | line-height: 1.5rem |
depth-7 | line-height: 1.75rem |
depth-8 | line-height: 2rem |
depth-9 | line-height: 2.25rem |
depth-10 | line-height: 2.5rem |
Usage
<!-- Example -->
<y class="depth-tight">
...
...
...
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'depth',
//variant: 'responsive',
property: 'line-height',
modifier: (
'super': '3rem',
'ultra': '4rem'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |