Typography
Depth
Utilities for sets the line height.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| depth-none | line-height: 1 |
| depth-tight-2 | line-height: 1.25 |
| depth-tight-1 | line-height: 1.375 |
| depth-normal | line-height: 1.5 |
| depth-loose-1 | line-height: 1.625 |
| depth-loose-2 | line-height: 2 |
| depth-loose-3 | line-height: .75rem |
| depth-loose-4 | line-height: 1rem |
| depth-loose-5 | line-height: 1.25rem |
| depth-loose-6 | line-height: 1.5rem |
| depth-loose-7 | line-height: 1.75rem |
| depth-loose-8 | line-height: 2rem |
| depth-loose-9 | line-height: 2.25rem |
| depth-loose-10 | line-height: 2.5rem |
Usage
<div class="depth-tight-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
HTML
.dummy {
@extend
.depth-tight-2;
}
SCSS