Style Guide

This style guide contains a host of elements and components that can be used on the site. To copy the element's snippet, simply click on the element of choice to copy and paste.

Palette

Primary Colours

Orange

Mustard Yellow

Charcoal Gray

Secondary Colours

Purple

Violet

Blood Orange

Blue

Gray

Typography

Headers

Header 1

Header 2

Header 3

Header 4

Header 5

Body Text

This is subtitle text

This is an inline link.

This is bold text. Decore persequeris delicatissimi ei nec. Eum erat ceteros ea, eam ne vero eleifend voluptatibus.

This is italic text. Decore persequeris delicatissimi ei nec. Eum erat ceteros ea, eam ne vero eleifend voluptatibus.

This is the body text. Decore persequeris delicatissimi ei nec. Eum erat ceteros ea, eam ne vero eleifend voluptatibus. Eos in dicunt audire noluisse. Graeco regione eripuit ad qui. Sed atqui novum deterruisset cu, et autem quodsi his. Detracto atomorum consequuntur nam ei, mucius iuvaret ut eam.

Lists

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Blockquote

Decore persequeris delicatissimi ei nec. Eum erat ceteros ea, eam ne vero eleifend voluptatibus. Decore persequeris delicatissimi ei nec.

Buttons

Social Media

Content Blocks

Block Styles

Lorem ipsum dolor

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur labores theophrastus eum. Nulla suscipiantur delicatissimi est no, his eros malis similique te.

  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id

Lorem ipsum dolor

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur labores theophrastus eum. Nulla suscipiantur delicatissimi est no, his eros malis similique te.

  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id
  • Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id

Block Links

Lorem Ipsum

Pods

Lorem Ipsum

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur labores theophrastus eum. Nulla suscipiantur delicatissimi est no, his eros malis similique te.


Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur labores theophrastus eum. Nulla suscipiantur delicatissimi est no, his eros malis similique te.


Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur labores theophrastus eum. Nulla suscipiantur delicatissimi est no, his eros malis similique te.


Lorem ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, mutat omnes nec cu. Erat dicunt scribentur nam id, ex utamur

Lorem ipsum

Tabs

This is the third panel of the basic tab example. This is the third panel of the basic tab example.

Accordion

  • Accordion 3

    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Inputs

Field

Dropdown Field

Field with Tooltip

Checkboxes

Radio Buttons

Forms

Form Inline

Form Pod Inline

Lorem Ipsum

Form Block

Snippet
Select