Line Height

Atomic PropsCSS Properties
leadingNoneline-height: 1;
leadingTightline-height: 1.25;
leadingSnugline-height: 1.375;
leadingNormalline-height: 1.5;
leadingRelaxedline-height: 1.625;
leadingLooseline-height: 2;

Usage#

There are two ways to control the line height of the text, one is to use a preset value, and the other is to use a precise pass value.

Use preset value: leadingNoneใ€leadingTightใ€leadingSnugใ€leadingNormalใ€leadingRelaxedใ€leadingLoose.

leadingNone
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
leadingTight
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
leadingSnug
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
leadingNormal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
leadingRelaxed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
leadingLoose
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
<Box>  <Box leadingNone>Lorem ipsum dolor sit amet...</Box>  <Box leadingTight>Lorem ipsum dolor sit amet...</Box>  <Box leadingSnug>Lorem ipsum dolor sit amet...</Box>  <Box leadingNormal>Lorem ipsum dolor sit amet...</Box>  <Box leadingRelaxed>Lorem ipsum dolor sit amet...</Box>  <Box leadingLoose>Lorem ipsum dolor sit amet...</Box></Box>

Use precise value:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO