Line Height
Utilities for controlling the line height of an element.
Class | Properties |
---|---|
.lh-solid | line-height: 1; |
.lh-tighter | line-height: 1.15; |
.lh-tight | line-height: 1.25; |
.lh-snug | line-height: 1.375; |
.lh-normal | line-height: {body-line-height} |
.lh-relaxed | line-height: 1.625; |
.lh-loose | line-height: 2 |
Usage
Control the line height of an element using the .lh-{size}
utilities.
Fixed values:
.lh-solid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.lh-tighter
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.lh-tight
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.lh-snug
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.lh-relaxed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.lh-loose
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Depending on your global setting:
.lh-normal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Customizing
Line height values can be changed, added or removed in _settings.scss
.
Variants
By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration
in _settings.scss.