Line Height

Line-height utility classes:

CSS Class	Description
`l{p}ine-height-xs`	line-height: var(--line-height-xs, 1.1);
`l{p}ine-height-sm`	line-height: var(--line-height-sm,. 1.2);
`l{p}ine-height-md`	line-height: var(--line-height-md, 1.4);
`l{p}ine-height-lg`	line-height: var(--line-height-lg, 1.58);
`l{p}ine-height-xl`	line-height: var(--line-height-xl, 1.72);
`l{p}ine-height-normal`	line-height: normal;
`l{p}ine-height-1`	line-height: 1;

Customize #

To customize the values of the line-height variables, pass the $line-height map to the config module in your style.scss file:

@use 'config' as * with (
  $line-height: (
    'xs': '1.1',
    'sm': '1.2',
    'md': '1.4',
    'lg': '1.58',
    'xl': '1.72'
  )
);

The map will generated a list of CSS variables...

:root {
  --line-height-xs: 1.1;
  --line-height-sm: 1.2;
  --line-height-md: 1.4;
  --line-height-lg: 1.58;
  --line-height-xl: 1.72;
}

...that will update the values of the utility classes or that you can use in your CSS:

.component {
  line-height: var(--line-height-md);
}