Style Guide

Base

Fonts


Sans Serif (Museo Sans)

Regular
Italic
Bold
Bold Italic

Serif (Optima)

Regular
Italic
Bold
Bold Italic

Colours


Primary

Secondary

Elements

Headings


Heading 1 (52px/62px)

Heading 2 (42px/50px)

Heading 3 (36px/43px)

Heading 4 (20px/35px)

Heading 5 (16px/19px)
Heading 6 (14px/17px)

Display (52px/62px)

Paragraphs


Default (16px/24px)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lead (20px/30px)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Small (14px/24px)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Label (14px/24px)

Lorem ipsum dolor sit amet

Lists


Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna aliqua
    • Lorem ipsum dolor sit amet
    • Consectetur adipisicing elit

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisicing elit
  3. Sed do eiusmod tempor incididunt
  4. Sed do eiusmod tempor incididunt
  5. Labore et dolore magna aliqua
    1. Lorem ipsum dolor sit amet
    2. Consectetur adipisicing elit

Unstyled List

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Lorem ipsum dolor sit amet
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna aliqua

Image List

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Lorem ipsum dolor sit amet
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna aliqua

Column List

  • Lorem ipsum dolor sit amet
  • Sed do eiusmod tempor incididunt
  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna aliqua.

Inline List

  • Lorem ipsum dolor sit amet
  • Sed do eiusmod tempor incididunt
  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna aliqua.

Links


Default

Arrow

Buttons


Default

Outline

Horizontal Rules


Default


Primary


Secondary


Icons


Default

Large

Borderless

Images


Fluid Image

Placeholder image

Centered Fluid Image

Placeholder image

Full-width Image

Placeholder image

Circular Image

Placeholder image

Fitted Image (Height based)

Placeholder image

Fitted Image (Width based)

Placeholder image

Videos


Fluid Video

Centered Fluid Video

Full-width Video

Fitted Video (Height based)

Fitted Video (Width based)

Embedded video (Youtube)

Embedded video (Vimeo)

Form Inputs


Text

Select

Text Area

Form Options


Checkboxes

Radios

Text options

Button options

Switch

Components

Forms


Block Form

Thank you, your request was successfully submitted, we will be in touch shortly.

Oops, it looks like there's an error with your submission, please check all fields highlighted in red and try again.

Inline Form

You can unsubscribe at any time at the foot of every email. By clicking 'Join' you accept to receive email marketing and agree to our privacy policy and our terms and conditions.

Oops, it looks like there's an error with your submission, please check all fields highlighted in red and try again.

Pagination


Default

Primary

Secondary

Logo


Default

Page Link


Default

Listing


Default

Placeholder image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Default (Button Right)

Placeholder image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Boxed

Placeholder image

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Testimonial


Default

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora dignissimos, eligendi fugit, cupiditate deleniti fuga quibusdam deserunt inventore ea nostrum ad!

— John Doe Manchester, UK

Center

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora dignissimos, eligendi fugit, cupiditate deleniti fuga quibusdam deserunt inventore ea nostrum ad!

John Doe Manchester, UK

Review

4 out of 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora dignissimos, eligendi fugit, cupiditate deleniti fuga quibusdam deserunt inventore ea nostrum ad!

John Doe Manchester, UK

Card


Default

Placeholder image

Lorem ipsum

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Large

Placeholder image

Lorem ipsum

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Large (Side-by-side)

Placeholder image

Lorem ipsum

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Large (No Image)

Overlay

Lorem ipsum

Placeholder image

Lorem ipsum

Lorem Ipsum

Read more

Panel


Default

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Large

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Overlay

Placeholder image

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Hero


Default

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Left

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Bottom

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Plugins

Arrive


  • Arrived!

  • Arrived!

  • Arrived!

Scroll


Collapse


Toggle Collapse

Hello World!

Modal


Tabs


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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea deserunt dolores odio odit, quae esse voluptas enim nisi quibusdam provident quas architecto fugiat, vitae accusamus dolor culpa molestias ullam nam.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion


Heading 1

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Map


Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Street View


Slider


Default Slider

Slide 1

Slide 2

Slide 3

Slide 4

Full Slider

Slide 1

Slide 2

Slide 3

Slide 4