style guide

Colours

  • Black - #181817

    rgba(var(--color-base-text),1);

  • Grey - #959492

    rgba(var(--color-base-text-secondary), 1);

  • Deus orange - #FF7B29

    rgba(var(--color-base-text-orange), 1);

Body text

There isn't much difference between these

Body small short

class="body-sm-short" font-size: 1.2rem, letter-spacing: .02em, line-height: 1.333;

Body medium short

class="body-md-short" line-height: 1.143; font-size: 1.4rem

Body large short

class="body-lg-short" letter-spacing: -0.02em; font-size: 1.6rem; line-height: 1.25;

Body small long

class="body-sm-long" font-size: 1.2rem, letter-spacing: 0; line-height: 1.333;

Body medium long

no class

Body large long

class="body-lg-long" letter-spacing: 0; font-size: 1.6rem; line-height: 1.25;

Blockquote

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

The author of the quote

RTE

Heading One

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Heading Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Heading Four

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Heading Five

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Heading Six

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna liquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

  • One
  • Two
  • Three
  • Four
  1. One
  2. Two
  3. Three
  4. Four

Icons

Small Icons

Payment Icons

Social Icons

Buttons

Default Button

.button .button--primary

Secondary Button

.button .button--secondary

White Button

.button .button--white

White Outline Button

.button .button--outline

Block Button

.button .button--full-width

Left Icon Button

.link .link-with-icon

Right Icon Button

.link .link-with-icon

Text Button

.button button--underline

Arrow Animated Button

.body-lg-short .text-icon-reveal .button-none

Arrow Animated Link

Icon reveal animation can be added to any link or text using the .text-icon-reveal .full-unstyled-link class.

Arrow Animated Link

Tags Style

Style used in various places e.g. predictive search keywords, filters on collection page, article cards, filters on blog page

Search

.full-unstyled-link .text-tag .text-tag--arrow
Keywords

Collection Filters

.full-unstyled-link .text-tag .text-tag--arrow .text-tag--alt
Tag

Blog

.full-unstyled-link .text-tag .text-tag--arrow .text-tag--small
Surf
.full-unstyled-link text-tag .text-tag--round .text-tag--small
Surf
.full-unstyled-link .text-tag .text-tag--rect .text-tag--small
Surf

Headings

Hero 1

Hero 2

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Forms

Form validation

Info message

Success message

Warning message

Error message
Form input error message

Collection Card

Liquid error (sections/main-style-guide line 633): Could not find asset snippets/component-collection-card.liquid
Liquid error (sections/main-style-guide line 640): Could not find asset snippets/component-collection-card.liquid

Product Card

Article Card

Breadcrumbs

Accordions

Liquid error (sections/main-style-guide line 711): Could not find asset snippets/component-accordion-item.liquid

Same accordion with multi open but closed first item

Liquid error (sections/main-style-guide line 715): Could not find asset snippets/component-accordion-item.liquid

Tabs

Tab 1 content.

Tab 2 content.

Small Tabs

Tab 1 content.

Tab 2 content.

Pagination

Controls

Liquid error (sections/main-style-guide line 856): Could not find asset snippets/carousel-controls.liquid

Drawers & Modals

Modal class modifiers: drawer drawer-left slide-in

Modal class modifiers: drawer drawer-right slide-in

Modal class modifiers: drawer drawer-left

Modal class modifiers: box slide-in

Modal class modifiers: box

Component Video