Style Guide

Base

Fonts

Helvetica - Regular
Helvetica - Italic
Helvetica - Bold
Helvetica - Bold Italic

Georgia - Regular
Georgia - Italic
Georgia - Bold
Georgia - Bold Italic

Colours

Primary

Secondary

Tertiary

Typography

Headings

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Lead copy - 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.

Body copy - 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 copy - 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 copy - Lorem ipsum dolor sit amet

Code

Lorem ipsum dolor sit amet inline code example consectetur adipisicing elit.

Lorem ipsum dolor sit amet keyboard input example consectetur adipisicing elit.

# Code block example

Lorem ipsum dolor sit amet
Consectetur adipisicing elit

Blockquote

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.

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

Dash 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

Breadcrumb List

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

Menu List

Table

Default

Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing

Responsive

Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing
Lorem Ipsum Consectetur adipisicing

Icons

Default

Large

Borderless

Horizontal Rules

Default


Primary


Secondary


Tertiary


Interactive

Links

Default

Icon (Before)

Icon (After)

Buttons

Solid button

  • Default

  • Primary

  • Secondary

  • Tertiary

Outline button

  • Default

  • Primary

  • Secondary

  • Tertiary

Icon button

  • Before

  • After

  • Before Animated

  • After Animated

Share button

  • Share this property  

Form Inputs

Text

Useful error message

Hidden

Your password must be at least 8 characters long, contain at least one number and have a mixture of uppercase and lowercase letters.

Select

Text Area

Form Options

Checkbox

Radio

Icons

Icons Button

Toggle

Switch

Components

Forms

Block Form

Your enquiry

You have errors in the fields above, please check each field throughly.

Your details

You have errors in the fields above, please check each field throughly.

/

Thank you

Thank you for your enquiry. A member of our team will be in touch asap.

Inline Form

Pagination

Default

Primary

Secondary

Tertiary

Logo

Default

Page Link

Default

Prominent

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

Branch

Default

Team Profile

Default

Property

Default

Placeholder image

Lorem Ipsum

10

Offers in region of

£1,234,000

Lorem Ipsum, Color Sit Amet

  •   3 Bedrooms
  •   2 Bathrooms
Read More

Side-by-side

Placeholder image

Lorem Ipsum

10

Placeholder image
Placeholder image
Placeholder image

Offers in region of

£1,234,000

Lorem Ipsum, Color Sit Amet

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

  •   3 Bedrooms
  •   2 Bathrooms
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

Scroll to Top

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

Media

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)