Press/to search

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>

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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.