Menu
close x

Our UK Locations

Cambridge
Beauty, history and culture
Canterbury
The traditional English experience
Brighton
The UK's coolest seaside town
London
The UK capital

Our US Locations

San Francisco
'The city that knows how'
Chicago
An All-American experience
San Diego
'America's finest city'
Boston
'America's College Town'

Our Canada locations

Toronto
Dynamic multicultural metropolis
Calgary
Traditional Canadian Experience
Menu

Styleguide

Hello! Welcome to the styleguide, a tool to demonstrate our code components & markup patterns. All of our components should be location independent, meaning they should not require a layout & positioning layer above them in order to render correctly, and should rather adapt to changes in location. When building out a site, adopt a site-wide modular approach rather than a page specific one.


Colors

#f7b432 #0f4dbc #4473cb #e2e8f4 #eee


Typography

Font family

DIN Next W01 & DIN Next W04 & Journal Regular

Headings

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Blue block title

Yellow block title


Paragraphs

This is a leader paragraph. It's purpose is to be more prominent than those that follow, poor things. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec.

This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros. Curabitur auctor, felis in convallis luctus, sem arcu laoreet diam, quis sodales dolor dolor sit amet neque. Sed lectus ante, consectetur eu vestibulum nec, faucibus ut quam. Pellentesque feugiat blandit consequat. Fusce porttitor dignissim sem sit amet fringilla. Duis in euismod sapien. Nullam non sapien elit, in tempus lacus.

This is the default link style followed by some emphasised text resulting in something very important! Here is some highlighted, bold text followed by marked text. Additionally added some sup15th and subco2 text.

© Copyright | Isle Spark example placed in the footer

Image with caption

Figure
Here is the figure caption to describe our image.

Blockquote

Student

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Joe Bloggs, Country

Learn from 'The city that knows how'!

Note: Above quote only works on a coloured background

Text Alignment

A piece of text

A piece of text

A piece of text


Buttons

Normal Button

Impact Button

Pale Button

White Button

Arrow Button

Find us on facebook

Explore your English


Lists

  • List item goes here
  • List item goes here list item goes here
  • List item goes here
    • Nested list item goes here
    • Nested list item goes here list item goes here
    • Nested list item goes here
  • List item goes here list item goes here
  • List item goes here
  • List item goes here list item goes here
  1. List item goes here
  2. List item goes here list item goes here
  3. List item goes here
    1. Nested list item goes here
    2. Nested list item goes here list item goes here
    3. Nested list item goes here
  4. List item goes here list item goes here
  5. List item goes here
  6. List item goes here list item goes here
This is the term
This is the definition of the term right here
This is the term
This is the definition of the term right here
This is the term
This is the definition of the term right here
This is the term
This is the definition of the term right here
  • List item goes here
  • List item goes here list item goes here
  • List item goes here
  • List item goes here list item goes here
  • List item goes here
  1. Inline Ordered List
  2. Inline Ordered List
  3. Inline Ordered List

Tables

Caption
Table Head Table Head Table Head Table Head
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data

Screen Messages

Neutral. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Assistance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Important. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Please enter your name
  • Please enter your email address
  • Please enter your telephone

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Please enter your name
  • Please enter your email address
  • Please enter your telephone

Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Custom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.


Modules

This would be a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Yellow module box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

Blue module box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.

White module box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

List module box title


Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, tincidunt eu tellus. Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras blandit ac est vitae hendrerit. Cras bibendum, tellus ut facilisis posuere, nisi leo mattis orci, non consequat neque quam in lacus. Praesent tincidunt ante ut orci venenatis mollis. Nullam tincidunt, enim vel facilisis hendrerit, ante nibh mattis augue, eget tristique lacus justo at lectus. In hendrerit blandit ultricies.

Maecenas ipsum arcu, porta ac molestie sit amet, tristique a leo. Cras rutrum justo risus, mollis finibus enim egestas non. Mauris molestie lacinia neque, ut aliquet ipsum malesuada id. Nulla vitae nisi ultrices, dictum magna a, fermentum eros. Sed posuere, libero quis tincidunt dapibus, ante justo elementum risus, id faucibus diam leo et est. Quisque metus quam, rutrum eu sem in, venenatis pretium turpis.

Vivamus lobortis nisi nec tellus dapibus, non ultrices dolor placerat. Sed ornare lectus libero, pulvinar luctus enim rhoncus in. Vivamus purus nisl, consectetur vitae molestie non, hendrerit vel est. Sed volutpat mi at mauris auctor tristique. Sed semper imperdiet cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, tincidunt eu tellus. Donec posuere dui vel lorem tristique non tristique leo faucibus. Curabitur mattis ullamcorper luctus. Nunc feugiat, nunc eu tristique scelerisque, dui purus sodales lacus, quis fermentum libero mi vitae eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras blandit ac est vitae hendrerit. Cras bibendum, tellus ut facilisis posuere, nisi leo mattis orci, non consequat neque quam in lacus. Praesent tincidunt ante ut orci venenatis mollis. Nullam tincidunt, enim vel facilisis hendrerit, ante nibh mattis augue, eget tristique lacus justo at lectus. In hendrerit blandit ultricies.

Maecenas ipsum arcu, porta ac molestie sit amet, tristique a leo. Cras rutrum justo risus, mollis finibus enim egestas non. Mauris molestie lacinia neque, ut aliquet ipsum malesuada id. Nulla vitae nisi ultrices, dictum magna a, fermentum eros. Sed posuere, libero quis tincidunt dapibus, ante justo elementum risus, id faucibus diam leo et est. Quisque metus quam, rutrum eu sem in, venenatis pretium turpis.

Vivamus lobortis nisi nec tellus dapibus, non ultrices dolor placerat. Sed ornare lectus libero, pulvinar luctus enim rhoncus in. Vivamus purus nisl, consectetur vitae molestie non, hendrerit vel est. Sed volutpat mi at mauris auctor tristique. Sed semper imperdiet cursus.

Maecenas ipsum arcu, porta ac molestie sit amet, tristique a leo. Cras rutrum justo risus, mollis finibus enim egestas non. Mauris molestie lacinia neque, ut aliquet ipsum malesuada id. Nulla vitae nisi ultrices, dictum magna a, fermentum eros. Sed posuere, libero quis tincidunt dapibus, ante justo elementum risus, id faucibus diam leo et est. Quisque metus quam, rutrum eu sem in, venenatis pretium turpis.


Accordions

Title One

Note: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Button Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title Two

Sub Title Two
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Title Three

Sub Title Three
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

... with images in a 2 column layout

Title One

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title Two

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title Three

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Title Four

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.

Image
Image
Image
Image

Forms

Note about this field
Note about this field




Note about this field
 
Contact Us