Style Guide

Grid

Colours

black
charcoal
medium-gray
light-gray
white
light-blue
blue
dark-blue
purple
pink
green
red
Diagonal Grey
Diagonal Grey
Diagonal Grey

Icons

  • arrow-left EA01
  • arrow-right EA02
  • caret-down EA03
  • caret-up EA04
  • close EA05
  • comm-news EA06
  • digital-editions EA07
  • envelope EA08
  • facebook EA09
  • furniture EA0A
  • google-plus EA0B
  • hamburger EA0C
  • instagram EA0D
  • pin EA0E
  • pinterest EA0F
  • play EA10
  • technology EA11
  • telephone EA12
  • time EA13
  • tool EA14
  • transport EA15
  • twitter EA16

Headings

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Big block headings vollkorn italic
from google web fonts

Serif headings vollkorn italic
from google web fonts

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Cards

Hero Card

some caption
Top Story Lifestyle

Heading goes here lorem ipsum dolor sit amet consect etur

Large Card

some caption
Top Story Lifestyle

Heading goes here lorem ipsum dolor sit amet consect etur

Medium Card

some caption

Heading goes here lorem ipsum dolor sit amet consect etur

Top Story Lifestyle

Small Card

some caption

Heading goes here lorem ipsum dolor sit amet consect etur

Lorem ipsum dolor sit amet consect etur ad ipisicing elit, sed do eiusmod tempor incid idunt et dolore magna.

Top Story Lifestyle

Event Card

some caption

Heading goes here lorem ipsum dolor sit amet consect etur

Wed 10th Feb - Thu 11th Feb

Lorem ipsum dolor sit amet consect etur ad ipisicing elit, sed do eiusmod tempor incid idunt et dolore magna.

Community Music

Competition Card

Heading goes here lorem ipsum dolor sit amet consect etur

Lorem ipsum dolor sit amet consect etur ad ipisicing elit, sed do eiusmod tempor incid idunt et dolore magna.

Card Layouts

Left Layout

Right Layout

3 Up

2 Up

Buttons

Default Button

Large Button

Medium Button

Small Button

White Button

Large Button

Medium Button

Small Button

Ghost Button

Large Button

Medium Button

Small Button

Interaction Buttons

Load More Articles

Social Buttons

Tags

Top Story Lifestyle Opinion Sport Real Estate Business Motoring Event Promoted Sponsored

Forms