Change the line height of text with our line-height utilities.
| Class | Styles |
|---|---|
| .lh-1 | line-height: 1; |
| .lh-sm | line-height: var(--cui-line-height-sm); |
| .lh-md | line-height: var(--cui-line-height-md); |
| .lh-lg | line-height: var(--cui-line-height-lg); |
| .lh-base | line-height: var(--cui-body-line-height); |
Line height
Change the line height with .lh-* utilities. .lh-sm, .lh-md and .lh-lg read the --cui-line-height-* stops of the type scale; .lh-1 is unitless 1. .lh-base is the deprecated v5 name of .lh-md and is removed in v7. .lh-sm, .lh-md and .lh-lg read the --cui-line-height-* stops of the type scale; .lh-1 is unitless 1. .lh-base is the deprecated v5 name of .lh-md and is removed in v7.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-md">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>A .text-* stop already carries the line height that belongs to its size — see font size. Reach for .lh-* when you need to override that pairing.
Customizing
Utilities API
Line height utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: var(--cui-line-height-sm),
md: var(--cui-line-height-md),
lg: var(--cui-line-height-lg),
base: var(--cui-body-line-height), // deprecated
)
),