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
Mobile | Tablet | Desktop | Full Width |
---|---|---|---|
less than 650px | 650px to 991px | greater than 992px | 2560px |
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
Display Font - Bodini
The quick brown fox jumps over the lazy dog.
Body/Heading Font - Brandon
The quick brown fox jumps over the lazy dog.
Accent Font - SuomiHand
The quick brown fox jumps over the lazy dog.
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
Paragraph (.paragraph)
The quick brown fox jumps over the lazy dog.
Paragraph Small (.paragraph--small)
The quick brown fox jumps over the lazy dog.
Paragraph Large (.paragraph--large)
The quick brown fox jumps over the lazy dog.
Link
Link Example .u-no-linkButtons
Primary
Secondary
Tertiary
Tertiary Inverted
Text Buttons
Icon Buttons
Icon only with the .button--icon class


Buttons with icons included
.button--icon-left and .button--icon-right









