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 sup^15th and sub_co2 text.

Image with caption

Here is the figure caption to describe our image.

Blockquote

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

Buttons

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
1. Nested list item goes here
2. Nested list item goes here list item goes here
3. 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

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

Inline Unordered List
Inline Unordered List
Inline Unordered List

Inline Ordered List
Inline Ordered List
Inline Ordered List

Page 2 of 10
1
2
3
4
5
6
7
8
9
10

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

Custom

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

Button

List module box title

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.

Tab four
Tab five
Tab six
Tab seven

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

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.

... with images in a 2 column layout

Title One

Title Two

Title Three

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. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.

Forms

No label with placeholders

Text Note about this field

Drop down Note about this field

Checkbox

Checkbox list Option1
Option2
Option3

Radio button list Option1
Option2
Option3

Textarea Note about this field

File upload

Password Forgotten your password?