Element

Typography

SCSS Location: /styles/scss/partial/_typography.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Headings

Heading 1 (H1)

  • Desktop:
    • Font Family: "Lato Black", sans-serif
    • Font size: 52px
    • Line height: 54px
  • Mobile:
    • Font Family: "Lato Black", sans-serif
    • Font size: 46px
    • Line height: 54px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Heading 2 (H2)

  • Desktop:
    • Font Family: "Lato Black", sans-serif;
    • Font size: 30px
    • Line height: 36px
  • Mobile:
    • Font Family: "Lato Black", sans-serif;
    • Font size: 26px
    • Line height: 32px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Heading 3 (H3)

  • Desktop:
    • Font Family: "Lato Bold", sans-serif;
    • Font size: 26px
    • Line height: 32px
  • Mobile:
    • Font Family: "Lato Bold", sans-serif;
    • Font size: 24px
    • Line height: 30px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Heading 4 (H4)

  • Desktop:
    • Font Family: "Lato Bold", sans-serif;
    • Font size: 22px
    • Line height: 28px
  • Mobile:
    • Font Family: "Lato Bold", sans-serif;
    • Font size: 20px
    • Line height: 26px

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Heading 5 (H5)

  • Font Family: "Lato Regular", sans-serif;
  • Font Size: 13px
  • Line Height: 28px
  • Text Transform: Uppercase
The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Body Copy

  • Font Family: "Lato Regular", sans-serif;
  • Font Size: 17px
  • Line Height: 28px

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, strong text in a paragraph. Duis nulla tellus, cursus quis diam eget, facilisis consequat leo. Morbi rutrum odio ac risus gravida pellentesque eget nec dolor. Quisque sit amet mollis enim. Nullam aliquet vitae orci vitae feugiat. Proin eu euismod risus, vel pellentesque magna.

Vivamus cursus turpis dui, emphasized text in a paragraph. Vestibulum nec porta magna. Morbi quam lorem, sollicitudin bibendum auctor et, rutrum eu sem. Nulla rutrum urna eu justo finibus tincidunt. Donec vehicula diam eget tempus eleifend. Aenean sodales, linked text in a paragraph, sit amet lorem nec lacinia. Sed ultrices placerat est. Suspendisse vitae orci sollicitudin molestie est. Curabitur viverra tincidunt vestibulum. Vivamus consectetur nulla tortor, ultricies commodo nulla semper vel.

Ordered List

  1. The quick brown fox jumps over the lazy dog
  2. Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  3. Morbi sed dapibus nulla
    1. The quick brown fox jumps over the lazy dog
    2. In accumsan ut sapien nec porttitor
    3. Quisque vitae libero quis ipsum dignissim efficitur

Unordered List

  • The quick brown fox jumps over the lazy dog
  • Quisque at mi a nunc ornare tincidunt a non diam
    • The quick brown fox jumps over the lazy dog
    • In accumsan ut sapien nec porttitor
    • Quisque vitae libero quis ipsum dignissim efficitur
  • Morbi sed dapibus nulla
    1. The quick brown fox jumps over the lazy dog
    2. In accumsan ut sapien nec porttitor
    3. Quisque vitae libero quis ipsum dignissim efficitur

Unordered List - Partner variant

Partner Light title
  • Create a scalable business platform
  • Accomodate business growth
  • Change where tax was an integrated component for any transaction or process

Horizontal Rule

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, strong text in a paragraph. Duis nulla tellus, cursus quis diam eget, facilisis consequat leo. Morbi rutrum odio ac risus gravida pellentesque eget nec dolor. Quisque sit amet mollis enim. Nullam aliquet vitae orci vitae feugiat. Proin eu euismod risus, vel pellentesque magna.


Vivamus cursus turpis dui, emphasized text in a paragraph. Vestibulum nec porta magna. Morbi quam lorem, sollicitudin bibendum auctor et, rutrum eu sem. Nulla rutrum urna eu justo finibus tincidunt. Donec vehicula diam eget tempus eleifend. Aenean sodales, linked text in a paragraph, sit amet lorem nec lacinia. Sed ultrices placerat est. Suspendisse vitae orci sollicitudin molestie est. Curabitur viverra tincidunt vestibulum. Vivamus consectetur nulla tortor, ultricies commodo nulla semper vel.