sunweb

Line-heights

foundations line-heights

Definition


The following units define the amount of space above and below inline elements.


line-height--tiny 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tincidunt purus, et scelerisque nisl congue eget. Nam gravida, ex non interdum sollicitudin, nunc tellus eleifend nulla, scelerisque sollicitudin quam justo vel ante. Morbi malesuada orci eu dui eleifend ultrices eu id nunc. Aliquam facilisis venenatis velit, a dignissim sapien interdum nec. Maecenas semper lacus nec neque lobortis congue. Pellentesque at turpis ut enim tincidunt tempor in id ipsum. Nam id sem cursus, eleifend nisl non, efficitur leo. Mauris ultricies, nisi eu rhoncus laoreet, dui felis posuere risus, iaculis rutrum tellus libero ut risus. Donec ultricies arcu nec lorem tempus convallis. Etiam suscipit enim eu fringilla sagittis.


line-height--small 1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tincidunt purus, et scelerisque nisl congue eget. Nam gravida, ex non interdum sollicitudin, nunc tellus eleifend nulla, scelerisque sollicitudin quam justo vel ante. Morbi malesuada orci eu dui eleifend ultrices eu id nunc. Aliquam facilisis venenatis velit, a dignissim sapien interdum nec. Maecenas semper lacus nec neque lobortis congue. Pellentesque at turpis ut enim tincidunt tempor in id ipsum. Nam id sem cursus, eleifend nisl non, efficitur leo. Mauris ultricies, nisi eu rhoncus laoreet, dui felis posuere risus, iaculis rutrum tellus libero ut risus. Donec ultricies arcu nec lorem tempus convallis. Etiam suscipit enim eu fringilla sagittis.


line-height--medium 1.618

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tincidunt purus, et scelerisque nisl congue eget. Nam gravida, ex non interdum sollicitudin, nunc tellus eleifend nulla, scelerisque sollicitudin quam justo vel ante. Morbi malesuada orci eu dui eleifend ultrices eu id nunc. Aliquam facilisis venenatis velit, a dignissim sapien interdum nec. Maecenas semper lacus nec neque lobortis congue. Pellentesque at turpis ut enim tincidunt tempor in id ipsum. Nam id sem cursus, eleifend nisl non, efficitur leo. Mauris ultricies, nisi eu rhoncus laoreet, dui felis posuere risus, iaculis rutrum tellus libero ut risus. Donec ultricies arcu nec lorem tempus convallis. Etiam suscipit enim eu fringilla sagittis.


line-height--large 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat tincidunt purus, et scelerisque nisl congue eget. Nam gravida, ex non interdum sollicitudin, nunc tellus eleifend nulla, scelerisque sollicitudin quam justo vel ante. Morbi malesuada orci eu dui eleifend ultrices eu id nunc. Aliquam facilisis venenatis velit, a dignissim sapien interdum nec. Maecenas semper lacus nec neque lobortis congue. Pellentesque at turpis ut enim tincidunt tempor in id ipsum. Nam id sem cursus, eleifend nisl non, efficitur leo. Mauris ultricies, nisi eu rhoncus laoreet, dui felis posuere risus, iaculis rutrum tellus libero ut risus. Donec ultricies arcu nec lorem tempus convallis. Etiam suscipit enim eu fringilla sagittis.