Utilities to change an element's line-height.
Use d-lh-{n} to change an element's line-height relatively. This means no unit is set with the line-height. Instead the line-height value is a multiple of the font-size.
<p class="d-lh-{stop}">...</p>
Use d-lh{n} to fix an element's line-height. This allows you to target a specific line-height based on the font-size. For example if a target 20px line-height is desired and the current font-size is 14px, apply .d-lh6 to achieve this target (14px font-size + 6px = 20px target line-height).
<p class="d-lh{stop}">...</p>
Variable | Output |
|---|---|
| var(--dt-font-line-height-100) | 1 |
| var(--dt-font-line-height-200) | 1.2 |
| var(--dt-font-line-height-300) | 1.4 |
| var(--dt-font-line-height-400) | 1.6 |
| var(--dt-font-line-height-500) | 1.8 |
| var(--dt-font-line-height-600) | 2 |
| var(--lh0) | 1em |
| var(--lh1) | calc(1em + 1px) |
| var(--lh2) | calc(1em + 2px) |
| var(--lh4) | calc(1em + 4px) |
| var(--lh6) | calc(1em + 6px) |
| var(--lh8) | calc(1em + 8px) |
| var(--lh12) | calc(1em + 12px) |
| var(--lh16) | calc(1em + 16px) |
| var(--lh20) | calc(1em + 20px) |
| var(--lh24) | calc(1em + 24px) |
Class
|
Output
|
|---|---|
| .d-lh-unset | unset |
| .d-lh-100 | line-height: var(--dt-font-line-height-100) !important; |
| .d-lh-200 | line-height: var(--dt-font-line-height-200) !important; |
| .d-lh-300 | line-height: var(--dt-font-line-height-300) !important; |
| .d-lh-400 | line-height: var(--dt-font-line-height-400) !important; |
| .d-lh-500 | line-height: var(--dt-font-line-height-500) !important; |
| .d-lh-600 | line-height: var(--dt-font-line-height-600) !important; |
| .d-lh0 | line-height: var(--lh0) !important; |
| .d-lh1 | line-height: var(--lh1) !important; |
| .d-lh2 | line-height: var(--lh2) !important; |
| .d-lh4 | line-height: var(--lh4) !important; |
| .d-lh6 | line-height: var(--lh6) !important; |
| .d-lh8 | line-height: var(--lh8) !important; |
| .d-lh12 | line-height: var(--lh12) !important; |
| .d-lh16 | line-height: var(--lh16) !important; |
| .d-lh20 | line-height: var(--lh20) !important; |
| .d-lh24 | line-height: var(--lh24) !important; |
Line Height documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope