#Line Height
These are utility classes that specify the line height of an element's text.
| Class | Styles |
|---|---|
leading-none | |
leading-tighter | |
leading-tight | |
leading-normal | |
leading-loose | |
leading-looser | |
#Examples
Below is a demo of all utility classes that apply line height styles. Note that leading-normal is not the same as the default line height value in Cirrus.
leading-none
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
leading-tighter
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
leading-tight
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
leading-normal
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
leading-loose
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
leading-looser
Lorem Ipsum best not make any more threats to your website... It will be met with fire and fury like the world has never seen. When other websites give you text, they're not sending the best. They're not sending you, they're sending words that have lots of problems and they're bringing those problems with us.
<p class="leading-none ...">Lorem Ipsum best not make any more threats to your website...</p>
<p class="leading-tighter ...">Lorem Ipsum best not make any more threats to your website...</p>
<p class="leading-tight ...">Lorem Ipsum best not make any more threats to your website...</p>
<p class="leading-normal ...">Lorem Ipsum best not make any more threats to your website...</p>
<p class="leading-loose ...">Lorem Ipsum best not make any more threats to your website...</p>
<p class="leading-looser ...">Lorem Ipsum best not make any more threats to your website...</p>#Responsive
⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in
_configs.scssand create a custom build or enable it in the config in your Sass project.//_configs.scss $config: ( viewports: ( flags.$LINE-HEIGHT: true, ) ) !default;
All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use u-leading-sm-md to apply u-leading-sm on medium screens and above.
<div class="u-leading-sm-md">
<!-- ... -->
</div>For more information, visit the Viewports documentation.
#Variants
The classes specified above are the default utility classes for setting the letter-spacing property. You can add, change, or remove classes within the _config.scss file of Cirrus.
// _config.scss
$config: (
extend: (
line-heights: (
loosest: '2.5'
)
)
) !default;This would generate the following classes.
.leading-loosest {
line-height: 2.5 !important;
}Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.