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
#023850
#0198c3
#d1594b
Typography
Font family
Open Sans, 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 caption
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo augue, lacinia ut ornare et, posuere dui vel lorem tristique.
Joe Bloggs, while building the Styleguide. Set 2015.
Text Alignment
A piece of text
A piece of text
A piece of text
Normal Button
Impact Button
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
- 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
- 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
- Inline Ordered List
- Inline Ordered List
- 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.
Modules
Intake dates
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.
Corporate packages
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.
Find out more
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.
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.
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.
Templates