Line Height

Example Name Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1

Line height: NONE

This token can be used when you want to e.g. align text & icons

 --as-line-height-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1.15

Line height: TIGHT

This token can be used when you don’t want line height taking any extra space. 		--as-line-height-tight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1.2

Line height: HEADING

This is the default line height for headings. 		--as-line-height-heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1.25

Line height: FORM

This is the default line height for form inputs, textareas and buttons. 		--as-line-height-form

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1.3

Line height: CAPTION

This is the default line height for captions, hint texts and form errors. 		--as-line-height-caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet bibendum ligula. Praesent non magna quis lectus interdum eleifend eget et justo. Nulla ac pretium lacus. Cras dignissim nisi eu volutpat rhoncus.

1.5

Line height: DEFAULT

This is the default line height for body text. 		--as-line-height-default