Containers

.container

.container.container--sm

Typography

Headings

.heading-1

.heading-2

.heading-3

.heading-4

.heading-5

Paragraphs

paragraph

.paragraph.paragraph--md

.small

Lists

  • ul
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore beatae error iusto rem fuga? Maxime consequatur saepe magni fugit rerum, officiis consectetur inventore architecto possimus, eligendi harum cumque, illo tempore!
  1. ol
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore beatae error iusto rem fuga? Maxime consequatur saepe magni fugit rerum, officiis consectetur inventore architecto possimus, eligendi harum cumque, illo tempore!

Labels

CTAs

Links

A paragraph within an .rte with an a tag in it

A paragraph with a .link in it

.link

Colours

These are set in Theme Settings > Colours

Brand Colours

SCSS Variable: $colorMain1

CSS Variable: --color-main-1

Hex Value: #9A845C

Customizer Name: Colour 1

SCSS Variable: $colorMain2

CSS Variable: --color-main-2

Hex Value: #141414

Customizer Name: Colour 2

SCSS Variable: $colorMain3

CSS Variable: --color-main-3

Hex Value: #D7CEBE

Customizer Name: Colour 3

SCSS Variable: $colorMain4

CSS Variable: --color-main-4

Hex Value: #ffffff

Customizer Name: Colour 4

SCSS Variable: $colorMain5

CSS Variable: --color-main-5

Hex Value: #EBE6DE

Customizer Name: Colour 5

SCSS Variable: $colorMain6

CSS Variable: --color-main-6

Hex Value: #F5F3EF

Customizer Name: Colour 6

SCSS Variable: $colorMain7

CSS Variable: --color-main-7

Hex Value: #FAF9F7

Customizer Name: Colour 7

SCSS Variable: $colorMain8

CSS Variable: --color-main-8

Hex Value: #7A7061

Customizer Name: Colour 8

SCSS Variable: $colorFont

CSS Variable: --color-font

Hex Value: #333333

Customizer Name: Colour Font

Notifications

SCSS Variable: $colorSuccess

CSS Variable: --color-success

Hex Value: #0B853E

Customizer Name: Colour Success

SCSS Variable: $colorWarning

CSS Variable: --color-warning

Hex Value: #BD8A00

Customizer Name: Colour Warning

SCSS Variable: $colorError

CSS Variable: --color-error

Hex Value: #CA0000

Customizer Name: Colour Error

Buttons

Button colours are based on the colours defined above. They can be updated in css-variables.liquid.

Outline

Form Fields

Text Input

Wrapper class: .input-wrapper

Label class: .label

Input class: .text-input

.input-feedback.input-feedback--error

Select

Wrapper class: .select-wrapper

Label class: .label

Input class: .select

Checkbox

Wrapper class: .checkbox-wrapper

Label class: .checkbox-label

Input class: .checkbox

Radio

Wrapper class: .radio-wrapper

Label class: .radio-label

Input class: .radio

Quantity Selector

Wrapper class: .quantity-selector

Input class: .text-input.input-quantity

Button class: .quantity-selector__btn

Variant Options

Alerts

.alert alert--success

.alert alert--warning

.alert alert--error

Icons

SVG Icons

Hover over the icon to get the filename

Tip: If an icon is black and you need it to be white (or vice versa) give filter: invert(1); a try

Liquid Icons

{% render 'icon-account' %}

{% render 'icon-cart' %}

{% render 'icon-close' %}

{% render 'icon-copy' %}

{% render 'icon-download' %}

{% render 'icon-facebook' %}

{% render 'icon-grid-large' %}

{% render 'icon-grid-small' %}

{% render 'icon-hamburger' %}

{% render 'icon-international' %}

{% render 'icon-phone' %}

{% render 'icon-pinterest' %}

{% render 'icon-play' %}

{% render 'icon-print' %}

{% render 'icon-search' %}

{% render 'icon-x' %}

Flag Icons

Flags are taken from flag icons. If you require flag icons then uncomment the stylesheet on line 15 of theme.liquid

To display an icon use the code <span class="fi fi-gb"></span> where gb is the 2 letter country code. Add the class fis for a square icon

Product Cards

Accordion

There is a VSCode snippet for this element. Type accordion and press TAB to insert the code.

There are two config options in attributes. Both accept boolean only (true or false).

If you'd like a mobile only accordion then set "mobileOnly": true. In this case accordion changes to a row with columns on desktop

If you'd like all accordion elements to collapse when you expand an accordion element (default behavior) then set "closeAllOnOpen": true, otherwise change it to false.

  • Accordion Title 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam eget metus id mattis. Phasellus lectus ligula, venenatis eu massa pulvinar, malesuada condimentum arcu. Ut nunc sapien, rutrum non gravida eget, aliquam vel sem. Morbi ultricies arcu condimentum diam maximus facilisis. Quisque in dictum urna. Integer sollicitudin ac arcu eget porttitor.
  • Accordion Title 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam eget metus id mattis. Phasellus lectus ligula, venenatis eu massa pulvinar, malesuada condimentum arcu. Ut nunc sapien, rutrum non gravida eget, aliquam vel sem. Morbi ultricies arcu condimentum diam maximus facilisis. Quisque in dictum urna. Integer sollicitudin ac arcu eget porttitor.
  • Accordion Title 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam eget metus id mattis. Phasellus lectus ligula, venenatis eu massa pulvinar, malesuada condimentum arcu. Ut nunc sapien, rutrum non gravida eget, aliquam vel sem. Morbi ultricies arcu condimentum diam maximus facilisis. Quisque in dictum urna. Integer sollicitudin ac arcu eget porttitor.

.rte

This is used on client input content such as pages and articles

This is a header 1

Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.

This is a header 2

Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.

This is a header 3

Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.

This is a header 4

Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.

This is a header 5

Proin eu sapien tincidunt, fermentum urna sed, pretium enim. Morbi facilisis porttitor turpis, non finibus dolor ultricies quis. Mauris in posuere metus. Cras porttitor feugiat arcu at consequat. Etiam consequat elit eu velit blandit, quis porta odio ornare. Integer lacus justo, egestas ac pharetra molestie, blandit at erat. Suspendisse in lectus vehicula, porta velit non, ullamcorper urna. Curabitur sagittis hendrerit augue, at fermentum erat iaculis consectetur. Quisque eleifend pellentesque nunc, in pharetra arcu tristique et.

Giro

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

  • ul
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore beatae error iusto rem fuga? Maxime consequatur saepe magni fugit rerum, officiis consectetur inventore architecto possimus, eligendi harum cumque, illo tempore!
  1. ol
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore beatae error iusto rem fuga? Maxime consequatur saepe magni fugit rerum, officiis consectetur inventore architecto possimus, eligendi harum cumque, illo tempore!

“Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Table Heading Table Heading Table Heading Table Heading
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content
Table Content Table Content Table Content Table Content

Animations

data-anim class="anim-fade-in"
data-anim class="anim-fade-in anim-delay anim-delay-333"
data-anim class="anim-fade-in anim-delay anim-delay-666"
data-anim class="anim-slide-in-left"
data-anim class="anim-slide-in-left anim-delay anim-delay-333"
data-anim class="anim-slide-in-left anim-delay anim-delay-666"

Section Examples

Add any important sections below

Hero Text

Hero Content