Brand style guide

Interested in details about the colour scheme used in this site? Visit the colour palette page for more details.

Table of contents

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text. Bold text (b) / strong text . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis risus sit amet diam consequat luctus. An anchor link, sit amet pulvinar sapien efficitur eget.

Italic text (i) / emphasised text. Nulla tortor elit, pretium sit external link amet lobortis vitae, maximus vitae eros. Proin feugiat erat arcu, nec dapibus sem tincidunt sit amet. Duis dui ex, pulvinar et lectus quis, tempor vehicula velit.

Other paragraph / text markup:

List elements

Ordered list (ol)

  1. Duis quis euismod leo. Integer non molestie lorem
    1. Duis rutrum mauris odio
    2. Quis luctus metus fringilla nec
    3. Nulla facilisi
  2. Vivamus lacinia, est non facilisis sollicitudin, urna nulla luctus nunc, a scelerisque arcu leo aliquam enim
  3. Proin porttitor condimentum condimentum

Unordered list (ul)

Other text blocks

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis risus sit amet diam consequat luctus. Sit amet pulvinar sapien efficitur eget.

Etiam in est quis arcu faucibus fermentum at ut metus. Maecenas at mi eu turpis rutrum malesuada non non nunc. Mauris faucibus leo vitae odio consequat, vitae luctus elit posuere. Nulla vel metus quis diam aliquam dapibus ornare pulvinar enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis risus sit amet diam consequat luctus. Sit amet pulvinar sapien efficitur eget.

Code/Pre

// Code block
function sayHello(name) {
	console.log(`Hello, nice to meet you, ${name}`);
}

sayHello("Annie");

Figure / figcaption

Add an image here, inside this figure markup?

The figcaption tag

Form elements

Fieldset & legend

Note:

legend-tags are legendarily resistant to styling. However, they are essential for accessibility :P

For better styling, while keeping accessibiliy, visually hide the legend while using a heading-tag with attribute aria-hidden="true" added - phew!