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>Customization
Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.
// Add Values
@include yogurt(
$class: 'depth',
$property: line-height,
$modifier: (
super: 3rem,
ultra: 4rem
//...
)
);
// Add Variants
@include yogurt(
$class: 'depth',
$property: line-height,
$modifier: (
super: 3rem,
ultra: 4rem
//...
),
$variant: (
'responsive'
)
);Variant
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.