Website experience Survey
Website experience Survey
Style Guide

Brand

logo mark

logo

typography

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Block Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Headings

Heading 1

This is some text inside of a div block.

Heading 2

This is some text inside of a div block.

Heading 3

This is some text inside of a div block.

Heading 4

This is some text inside of a div block.
Heading 5
This is some text inside of a div block.
Heading 6
This is some text inside of a div block.
Rich Text Element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Fig Caption

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. example link

blockquotes can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Link

Unordered List
  • This is an unordered item.
  • This is an unordered item.
  • This is an unordered item.
Ordered List
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.

Colors

black

Primary

Secondary

Grey

white

Buttons

Get in touch

cta button

Learn more

ghost button

Learn more

line button

Get in touch

cta button - reversed

Learn more

GHOST BUTTON - reversed

Learn more

line button - reversed

Grid

Columns need to be nested within  a "row" and a direct child of a "container" or "wrapper".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

coL

coL

coL

coL

coL

coL

coL

coL

coL

coL

Grid - remove gutters

Columns need to be nested within  a "row" and a direct child of a "container" or "wrapper".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

coL

coL

coL

coL

Grid - REsponsive (desktop)

To define our 12 column grid, all classes must precede with the initial class of "col" followed by "Lg-(1-12)"

lg-1

col-lg-11

COL-LG-2

COL-LG-10

COL-LG-3

COL-LG-9

COL-LG-4

COL-LG-8

COL-LG-5

COL-LG-7

COL-LG-6

COL-LG-6

COL-LG-12

Grid - REsponsive (Tablet)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "md-(1-12)"

md-1

col-md-11

COL-md-2

COL-md-10

COL-md-3

COL-md-9

COL-md-4

COL-md-8

COL-md-5

COL-md-7

COL-md-6

COL-md-6

COL-md-12

Grid - REsponsive (Mobile landscape)

Defining our mobile landscape breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet class of "sm-(1-12)"

sm-1

col-sm-11

COL-sm-2

COL-sm-10

COL-sm-3

COL-sm-9

COL-sm-4

COL-sm-8

COL-sm-5

COL-sm-7

COL-sm-6

COL-sm-6

COL-sm-12

Grid - REsponsive (Mobile portrait)

Defining our mobile portrait breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet, and mobile landscape class of "xs-(1-12)"

xs-1

col-sm-11

COL-sm-2

COL-sm-10

COL-sm-3

COL-sm-9

COL-sm-4

COL-sm-8

COL-sm-5

COL-sm-7

COL-sm-6

COL-sm-6

COL-sm-12