This is the colour palette for your site, the best way to think of this is the palette is divided up into groups, so when a group is defined the first colour colourX is used to create new colours by adjusting properties like brightness, saturations & hue.

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)

Buttons are tied to an action of some kind, you can use these button classes on a button tag or on a anchor tag, each button class has 4 states:

These are area where confirmation from the server is displayed so for example if a post to the server was a successful a piece of text will be displayed confirming this action or on the product page if no items are found, these notification's come in 4 states:

HTML tables that get used in rich text editors, stock notes, basket page and account area.

Buy Boxes get used throughout the site these can appear on any page on your site, the most common places they can be seen is on the product listing pages and in product collection modules ( such as recently viewed ), Beware you may not be able to see these if your site is set to trade mode only.

Buy boxes normally consist of the following components:

• Quantity selectors, these are configured on a site wide basis.
• Add to basket button, this could be a button with text or a button with an icon as seen bellow,
• Add to favourites button.

We use forms to allow users to interact with the site and provide information to the company.

Stock indicators can be used on any page when not on a product listing page or product page they will normally be in carousels like recently views which is typically located at the bottom of the page.

Modals is express's popup mechanism these can be used to hold forms, cms entries, payment processes & confirmation messaging. Below is a demonstration of what confirmation modals will look like:

Accordion Tabs are typically used on the product page when we show tab notes, these is a responsive mechansim developed by Foundation which allows us to display your data in tabs or with in an accordion this also reacts to your breakpoint as well as tabbed content doesn't normally display well on mobile devices.

Often when you post things like a form to a server dynamically without having to reload the page the user will expect some sort of response and depending on whether their action has been successfully completed they may see one of these icons.

When you dynamically send a request to the server the content area that you're effecting will be blocked from further access until that request has returned from the server.

You can think of Callouts as notifications they can appear from the side of the screen if a process has been completed like adding an item to your favourites or they're used if a button has been disabled the reason should display in an alert callout if the user tries to continue.

These callouts appear at the top of your viewport and are sticky so if you scroll down they will remain in view, some of these callouts are closable but there are ones that remain in constant view like Masquerading.

Overview

The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell.

Nesting

In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells.

When an item is flagged as being highlighted for example a product is on a special offer a overlay can be outputted over the product image on lists and on the product page, a banner can also be displayed on the product page as well.