Style Guide

Logo

Black Logo:

As an img tag:

As an inline SVG included as a snippet

White Logo:

As an img tag:

As an inline SVG included as a snippet

Grid and Layout Rules

Breakpoints

Global Spacing Unit and Layout Tools

The sizing and spacing for elements in this theme should always be based on the global spacing unit of 4 pixels. Ensure adherance to this rule by using the $spacing-unit variable wherever possible. This theme includes a BEM component called .page-layout as well as set of grid classes to help achieve layouts that conform to the global spacing guidelines.

Colors

Typography

Fonts

Headings

Heading styles are available as native HTML elements as well as classes that follow the pattern of .heading--{level}.

Heading Level 1 (.heading--1)

Heading Level 2 (.heading--2)

Heading Level 3 (.heading--3)

Heading Level 4 (.heading--4)

Heading Level 5 (.heading--5)

Heading Level 6 (.heading--6)

Preheader (.heading--preheader)

Display Text

Display styles are available as native HTML elements as well as classes that follow the pattern of .heading--{level}.

Display Level 1 (.heading--display-1)

Display Level 2 (.heading--display-2)

Display Level 3 (.heading--display-3)

Display Level 4 (.heading--display-4)

Display Level 5 (.heading--display-5)

Paragraphs

Link

Buttons

Primary

Secondary

Tertiary

Tertiary Inverted

Text Buttons

Icon Buttons

Icon only with the .button--icon class

Close Play Cart

Close Play Cart

Buttons with icons included

.button--icon-left and .button--icon-right

Button Element Disabled Button Element Button Element Disabled Button Element Full Width Button Element

Link Element Disabled Link Element Link Element Disabled Link Element Full Width Link Element

Form Elements

Icons