| Class | Properties |
|---|---|
.line-height-1 | line-height: 1; |
.line-height-tight | line-height: 1.25; |
.line-height-snug | line-height: 1.375; |
.line-height-normal | line-height: 1.5; |
.line-height-relaxed | line-height: 1.625; |
.line-height-wide | line-height: 2; |
Usage
Control the line height of an element using the .line-height-{size} utilities.
<p class="line-height-1 ...">The quick brown fox jumped over the lazy dog.</p>
<p class="line-height-tight ...">The quick brown fox jumped over the lazy dog.</p>
<p class="line-height-snug ...">The quick brown fox jumped over the lazy dog.</p>
<p class="line-height-normal ...">The quick brown fox jumped over the lazy dog.</p>
<p class="line-height-relaxed ...">The quick brown fox jumped over the lazy dog.</p>
<p class="line-height-loose ...">The quick brown fox jumped over the lazy dog.</p>Variants
By default, no responsive or hover-state variants are generated for line height utilities.
Responsive
To include responsive variants like .md:line-height-wide, add "line-height" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"line-height",
);
Hover-state
To include hover-state variants like .hover:line-height-wide, add "line-height" to the $hover-variants variable:
$hover-variants: (
// ...
"line-height",
);