Overview





Colours


$black
#000
$white
#FFF
$green-brand
#115737
$green-light-brand
#64A659
$black-brand
#1D2624
$grey-gallery
#EEE
$grey-alto
#DDD
$grey-silver
#CCC
$grey-silver-chalice
#BFBFBF
$grey-chalice
#AAA
$grey-dusty
#999
$grey
#8B8B8B
$grey-dove
#707070
$black-emperor
#555
$black-tundora
#424242
$black-mine-shaft
#333
$green-bottle
#0D4B2F
$green-nebula
#D1E0DA
$green-tara
#E2F7E2
$green-killarney
#2C6B2C
$blue-azure
#3363B3
$blue-st-tropaz
#285189
$blue-endeavoura
#005EA5
$blue-curious
#2E8ACA
$blue-humming-bird
#E4F3FB
$blue-callypso
#255C79
$red-oyster-pink
#ECCDCD
$red-tamarillo
#831212
$red-roof-terratcotta
#AF1B1B
$yellow-pearl-lusta
#FCF8E3
$yellow-cinamon
#705602
$yellow-spring-wood
#F4F4E9




Icons


Icons should be used by specifying empty span element with 'icon-[name]' class. Recommended placement of a icon is at the beginning of an element.


When using icons inside links, try to use aliased classes. Specifically: link-audio, link-more, link-download and link-external.










Typography


Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

  1. First item
  2. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.
  3. Fourth item
    1. First sub-item
    2. Second sub-item
    3. Third sub-item
    4. Fourth sub-item
  4. Third item

Lorem inline link ipsum dolor sit amet, consectetur adipisicing el.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

“HRC funding has supported the establishment of research teams, which bring together people with different skillsets, perspectives and connections to communities, practitioners and services,” says Professor Dew. “I would not be involved in such fascinating research without HRC funding.”

dl lists
default styles
Coffee
Large flat white
Long black
Decaf latte
Tea
Ice cold