Sections

Line height

Utilities for controlling the line height of an element.

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.

.line-height-1

The quick brown fox jumped over the lazy dog.

.line-height-tight

The quick brown fox jumped over the lazy dog.

.line-height-snug

The quick brown fox jumped over the lazy dog.

.line-height-normal

The quick brown fox jumped over the lazy dog.

.line-height-relaxed

The quick brown fox jumped over the lazy dog.

.line-height-wide

The quick brown fox jumped over the lazy dog.

<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",
);