Styleguide - typography

Options: • $version(value = h1 - h6) - default = h1 - heading to apply styles to • $color(value = light or dark) - default = dark - heading color • $globals(value = included or excluded) - default = excluded - include the globals or just override

Heading 1

h1 | .type-header--h1 | @include type-header(h1, dark, included);

Heading 2

h2 | .type-header--h2 | @include type-header(h1, dark, included);

Heading 3

h3 | .type-header--h3 | @include type-header(h1, dark, included);

Heading 4

h4 | .type-header--h4 | @include type-header(h1, dark, included);
Heading 5
h5 | .type-header--h5 | @include type-header(h1, dark, included);

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus velit est, molestie eget fermentum nec, blandit at lorem. Aliquam erat volutpat. Nulla tincidunt ultrices arcu ut egestas. Fusce ornare magna a quam venenatis, eu rutrum mi aliquam.

p | .type-p | @include type-p();

Text link

a
  1. Maecenas sit amet accumsan eros
  2. Phasellus vel elementum nisl
  3. Suspendisse viverra mauris quis
  4. Mauris mattis pellentesque
  5. In varius, eros id maximus venenatis
  6. Lacus lectus commodo tortor
  7. Non facilisis mauris neque id augue
  8. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ol
  • Maecenas sit amet accumsan eros
  • Phasellus vel elementum nisl
  • Suspendisse viverra mauris quis
  • Mauris mattis pellentesque
  • In varius, eros id maximus venenatis
  • Lacus lectus commodo tortor
  • Non facilisis mauris neque id augue
  • Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ul