global style

Text Styles

Fluid type approach

Demo link

Formula:
max([mobile-rem-size], [desktop-vw-size]);

  • Only Headlines should be set using the max() approach;
  • Headlines include: Hero, H1, H2, H3, H4, H5, H6. (anything above 20px);
  • Everything else (p, text, link) should be set in rem;
  • Convert desktop pixel sizes to vw, using this online converter (link);

Headings

Use Fluid Type Approach for text styles below:
Hero
[h1.hero-txt]

This Is A Hero Headline

Headline 1
[h1]

This is Headline H1

Headline 2
[h2]

This is Headline H2

Headline 3
[h3]

This is Headline H3

Headline 4
[h4]

This is Headline H4

Headline 5
[h5]
This is Headline H5
Use REM sizes for text styles below:
Headline 6
[h6]
This is Headline H6

Subheadings and buttons

Button Text Link
[.btn] Shop this collection
Text Link
[.txt-link] Or visit the store
Primary Button
[.btn.btn--primary] Primary Button
Secondary Button [.btn.btn--secondary] Secondary Button

Body text

Use REM sizes for text styles below:
Paragraph
[p]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus luctus dolor sed dignissim.

Fusce sollicitudin, neque quis fringilla iaculis, turpis risus volutpat.

Paragraph Link
[p > a]

Click here to apply. Quisque cursus luctus dolor sed dignissim.

Paragraph Small Link
[p.small]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus luctus dolor sed dignissim.

Fusce sollicitudin, neque quis fringilla iaculis, turpis risus volutpat.

Paragraph Small Link
[p.small > a]

Click here to apply. Quisque cursus luctus dolor sed dignissim.

Colour Styles

primary-color
primary-contrasting-color
secondary-color-1
secondary-color-2
secondary-contrasting-color
success
error