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

#ae8e5b #e0c083 #d80b8c #f7941d #50b847 #00295d #01b5da #ebeef3


Typography

Font family

'Neue Helvetica W01', Arial, Sans-Serif

Headings

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

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 rounded corners

Figure

Image with caption

Figure
Here is the figure caption to describe our image.

Blockquote

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.

Isle Interactive, Director

Text Alignment

A piece of text

A piece of text

A piece of text


Buttons

Normal Normal Impact


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
  1. Inline Ordered List
  2. Inline Ordered List
  3. Inline Ordered List

Tables

Table Head Table Head Table Head
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue. Table Data Table Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue. Table Data Table Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue. Table Data Table Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue. Table Data Table Data
Standout 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.


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.


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.


Accordions

Title one

Sub 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.

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.


Forms

Note about this field
Note about this field




Note about this field
 

CTAs

Themes

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

  • 14 Apr

    Year 10 careers workshop

    Senior School Hall
    08:30 - 16:00

  • 28 Mar

    Technology showcase and fashion show

    All Day

  • 25 Apr

    Technology showcase and fashion show

    All Day

News

Calendar

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

  • 14 Apr

    Year 10 careers workshop

    Senior School Hall
    08:30 - 16:00

  • 28 Mar

    Technology showcase and fashion show

    All Day

Custom

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • Junior School

    St Mary's School, Cambridge appoints new head of Juniors

    Thursday 7 Apr 2016

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

Sports

  • Athletics

    Athletics

  • Cross-country

    Cross-country

  • Hockey

    Hockey

  • Netball

    Netball

  • Rowing

    Rowing

  • Tennis

    Tennis

Default

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

  • 14 Apr

    Year 10 careers workshop

    Senior School Hall
    08:30 - 16:00

  • 28 Mar

    Technology showcase and fashion show

    All Day

  • 25 Apr

    Sports Award Gala Dinner

    Senior School Hall
    18:30 - 22:00

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

  • 14 Apr

    Year 10 careers workshop

    Senior School Hall
    08:30 - 16:00

  • 28 Mar

    Technology showcase and fashion show

    All Day

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day

  • 14 Apr

    Year 10 careers workshop

    Senior School Hall
    08:30 - 16:00

  • 27 Apr - 28 Apr

    Year 11 GCSE Art examinations

    No 47 Art & Photography Centre
    All Day

  • 07 Apr - 11 Apr

    Duke of Edinburgh Gold Award practice expedition

    TBC
    All Day


Carousel



Sophie


Poem

Taking Leave of Cambridge Again
by Xu Zhimo

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.

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.

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.

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.

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.

(6 November 1928)