Line Height

1

The line height is equal to the font size, resulting in single spacing between lines.

<p class="fs-lg lh-1 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

2

The line height is 1.25 times the font size, providing a bit of extra space between lines for improved readability.

<p class="fs-lg lh-2 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

3

The line height is 1.375 times the font size, offering a comfortable amount of spacing between lines.

<p class="fs-lg lh-3 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

4

The line height is 1.5 times the font size, which is commonly used for body text to enhance readability.

<p class="fs-lg lh-4 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

5

The line height is 1.625 times the font size, providing a more spacious feel for the text.

<p class="fs-lg lh-5 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

6

The line height is double the font size, creating a very open and airy layout for the text.

<p class="fs-lg lh-6 p-4 ta-c c-slate">The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?</p>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Responsive design

Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.

Target specific viewport sizes with breakpoint prefixes

Hover state variant

Apply styles conditionally when users hover over an element using the h: prefix.