Colors

Typography

HTML headings, <h1> through <h5>, are available.
.h1 through .h5 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<h1></h1>

.h1 ROOM heading

<h2></h2>

.h2 ROOM heading

<h3></h3>

.h3 ROOM heading

<h4></h4>

.h4 ROOM heading

<h5></h5>

.h5 ROOM heading

<p></p>

.p ROOM paragraph

Buttons

Snippet button is relativly complex component, featuring various options, such as defining label and href values from translation /locales files, defining hardcoded label and href values, defining small size variant, outline variant, three different color vairants, disabled option and definition of htmlTag, specifing custom class and id tags and passing icons from icon snippet to the side of the label. You can find the examples bellow:

{% include 'button'
   label: [required] // alternative: labelHardcoded
   href: [required] // alternative: hrefHardcoded
   small: boolean // default: false
   outline: boolean // default: false
   color: string // 'white' or 'black' supported, default: 'green'
   block: boolean // default: false
   blockMobile: boolean // default: false
   disabled: boolean // default: false
   iconRight: string
   iconLeft: string
   buttonClass: string
   buttonId: string
   htmlTag: string // will remove "href" from the tag
   replaceAttribute: string // will remove "href" from the tag & add additional parameters to tag
   addAttribute: string // will NOT remove "href" from the tag & add will add additional parameters to tag
   target: boolean // default: false
%}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href' %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', outline: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, outline: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', outline: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, outline: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black' %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black', small: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black', small: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black', outline: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black', outline: true, small: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'black', outline: true, small: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white' %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white', small: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white', small: true, noAnimation: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white', outline: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white', outline: true, small: true %}

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', color: 'white', outline: true, small: true, noAnimation: true %}

You're able to add icons to the left or right side of the button with the following options bellow.
To see the latest list of icons, see theme/snippets/icon.liquid file.

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, iconRight: 'chevron-right' %}

To grow the button to 100% of its parent with, set:

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, outline: true, block: true %}

Disabled state for button is also available. Set:

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, disabled: true %}

There's an exception of rounded corners set with:

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, rounded: true %}

You can specify additonal classes or ID with the following:

{% include 'button', label: 'general.cta.label', href: 'general.cta.href', small: true, block: true, buttonClass: 'special' buttonId: 'checkout' %}

Default html tag is <a>.
You can define any other tag you want, value of htmlTag is a string. With htmlTag set, href will not be added to the tag.
To use specific html tag, use the following:

{% include 'button', label: 'general.cta.label', small: true, htmlTag: 'button' %}

Links

{% include 'link'
   label: [required] // alternative: labelHardcoded
   href: [required] // alternative: hrefHardcoded
   small: boolean // default: false
   outline: boolean // default: false
   color: string // 'white' or 'black' supported, default: 'green'
   disabled: boolean // default: false
   iconRight: string
   iconLeft: string
   animated: boolean // default: false
   linkClass: string
   linkId: string
   htmlTag: string // will remove "href" from the tag
   replaceAttribute: string // will remove "href" from the tag & add additional parameters to tag
   addAttribute: string // will NOT remove "href" from the tag & add will add additional parameters to tag
   target: boolean // default: false
%}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href' %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', animated: true %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', color: 'black' %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', color: 'black', animated: true %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', color: 'gray' %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', color: 'gray', animated: true %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', color: 'white' %}

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', animated: true, color: 'white' %}

You're able to add icons to the left or right side of the link with the following options bellow.
To see the latest list of icons, see theme/snippets/icon.liquid file. Note, that links with icons can not be animated.

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', iconRight: 'chevron-right' %}

{% include 'link', labelHardcoded: 'WATCH VIDEO', href: 'general.cta.href', color: 'black', iconLeft: 'play' %}

{% include 'link', labelHardcoded: 'ADD TO CART', href: 'general.cta.href', color: 'black', iconLeft: 'cart' %}

Disabled state for link is also available. Set:

{% include 'link', label: 'general.cta.label', href: 'general.cta.href', disabled: true %}

Spacings

Design System includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. It includes support for individual properties, all properties, and vertical and horizontal properties.

You’re able to use the following spaces: 0, 8, 16, 24, 32, 48, 64, 96, 128, 192
in the following class definitions, where each space value stands for x:
m-x, mt-x, mr-x, mb-x, ml-x for margins and
p-x, pt-x, pr-x, pb-x, pl-x for paddings.

You can than combine everything with breakpoints used in the project like:
m-x-sm, m-x-md-down, m-x-md-up, m-x-lg-up for breakpoint-specific definitions.

Here's the visual representation of the spacings:

8px

16px

24px

32px

48px

64px

96px

128px

192px

Icons

Design System includes a wide range of icons. They scale quickly and easily and can be styled with CSS. Icons are SVGs, so you can include them into your HTML. The best way is to call the snippet we prepared: {% include 'icon' with 'checkmark' %}

All icons in icon include have unified dimensions, therefore they could be scaled proportionally with size parameter. Keep in mind that value of size is a string with a unit, used for both width and height. The dimension of the size parameter is the size of the icon container, not icon itself.

{% include 'icon' with 'checkmark', size: '16px' %}

{% include 'icon' with 'checkmark', size: '32px' %}

{% include 'icon' with 'checkmark', size: '64px' %}

Additional classes could be added with:

{% include 'icon' with 'checkmark', size: '32px', iconClass: 'bg-green icon-white' %}

We have, however, using some dependency icons as well. We're trying to move away from them due to they're not scaled properly or have unified color. But you can still include them with: {% include 'icon-old' with 'star' %}

Icons
Icons
Icons
icon-first-active Created with Sketch.
icon-prev-active Created with Sketch.
icon-next-active Created with Sketch.
icon-last-active Created with Sketch.

Toggle




Your Cart
Your cart is empty
Shop now
Estimated Total:
Monthly Payment:
Taxes and Shipping calculated at checkout
Chat with us