Style Guide

Typography

Headings

The following codes can be used to insert headings into your content if you are using the ‘Text’ view mode.

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>

Colours

#A85A9F
#FFB401

Font Sizes

Heading 2 is 28px

Heading 3 is 22px

Heading 4 is 18px


Blockquote

The blockquote element represents a section that is quoted from another source. You can use the following code within the ‘Text’ view mode to insert a block quote.

Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur?

Jane Smith

 

[blockquote cite='Jane Smith']Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur?[/blockquote]

Inline external links

Use this code to insert a link within your content.

View all links

 

<a href="www.google.com">View all links</a>

Lists

Bullet list

Include the following code within the ‘Text’ view mode to insert a bullet point list into your content.

  • Your text goes here
  • Your text goes here
  • Your text goes here

 

<ul>
<li>Your text goes here</li>
<li>Your text goes here</li>
<li>Your text goes here</li>
</ul>

 

Numbered List

Include the following code within the ‘Text’ view mode to insert a numbered list into your content.

  1. Your text goes here
  2. Your text goes here
  3. Your text goes here

 

<ol>
<li>Your text goes here</li>
<li>Your text goes here</li>
<li>Your text goes here</li>
</ol>

Buttons

To draw a visitor’s attention to a certain link, you can include this shortcode within the ‘Text’ view mode to insert a call to action button.

Button

 

[button label="Button" url="http://google.co.uk"]Button[/button]

Media

The ‘video’ shortcode will allow you to embed YouTube or Vimeo videos responsively into your content.

 

[video url="https://youtu.be/8tPnX7OPo0Q"]