$green-light#64A38C$green#46856E$green-dark#387961$white#FFFFFF$gray-light#F5F5F5$gray#E5E5E5$gray-dark#AAAAAA$black-light#2A2A2A$black#1A1A1A$orange#CD816FHTML headings, <h1> through <h4>, are available..h1 through .h4 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>
<h2></h2>
<h3></h3>
<h4></h4>
<p></p>
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: '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' %}
{% 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 %}
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:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
Additional classes could be added with:
|
|
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' %}
A ROOM representative will reach out soon via email. Feel free to take a look around while you wait.
CloseDiscover our suite of modular products designed to help businesses return to a better way of working.
We’ve sent our Product Guide directly to your inbox. You can expect to receive an email from us in the next couple of minutes. Feel free to take a look around while you wait.
