Typography

Line Height

Utilities for sets the line height.


Class

classcss
depth-noneline-height: 1
depth-tightline-height: 1.25
depth-snugline-height: 1.375
depth-normalline-height: 1.5
depth-relaxedline-height: 1.625
depth-looseline-height: 2
depth-3line-height: .75rem
depth-4line-height: 1rem
depth-5line-height: 1.25rem
depth-6line-height: 1.5rem
depth-7line-height: 1.75rem
depth-8line-height: 2rem
depth-9line-height: 2.25rem
depth-10line-height: 2.5rem

Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- 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

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled