Line Height

Defines the line height of the text inside an element.

ClassProperties
line-height-1line-height: 1;
line-height-2line-height: 1.25;
line-height-3line-height: 1.5;
line-height-4line-height: 2;

line-height-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.

line-height-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.

line-height-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.

line-height-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.

<div class="flex align-items-center border-bottom-1 surface-border w-full">
    <p class="w-2 text-left font-bold text-blue-500 mr-3">line-height-1</p>
    <p class="line-height-1 w-10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl
        rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.{' '}
    </p>
</div>
<div class="flex align-items-center border-bottom-1 surface-border w-full">
    <p class="w-2 text-left font-bold text-blue-500 mr-3">line-height-2</p>
    <p class="line-height-2 w-10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl
        rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.{' '}
    </p>
</div>
<div class="flex align-items-center border-bottom-1 surface-border w-full">
    <p class="w-2 text-left font-bold text-blue-500 mr-3">line-height-3</p>
    <p class="line-height-3 w-10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl
        rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.{' '}
    </p>
</div>
<div class="flex align-items-center border-bottom-1 surface-border w-full">
    <p class="w-2 text-left font-bold text-blue-500 mr-3">line-height-4</p>
    <p class="line-height-4 w-10">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl
        rhoncus mattis. Maecenas pharetra convallis posuere morbi leo urna molestie.{' '}
    </p>
</div>