Style Guide

Information for site editors on the elements and shortcodes available to assist with content layout

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>

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. You can optionally include a citation within the block quote as shown below.

<blockquote>Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur?<cite>This is a citation</cite></blockquote>

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


Lists

Bullet list

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

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

Numbered List

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

<ol>
<li>Your text goes here</li>
<li>Your text goes here</li>
<li>Your text goes here</li>
</ol>
  1. Your text goes here
  2. Your text goes here
  3. Your text goes here

Check List

Include the following code within the ‘Text’ view mode to insert a list of items, that are prepended with a blue check mark, into your content.

<ul class="list list--check">
<li>Your text goes here</li>
<li>Your text goes here</li>
<li>Your text goes here</li>
</ul>
  • Your text goes here
  • Your text goes here
  • Your text goes here

Link List

Include the following code within the ‘Text’ view mode to insert a list of items, that are appended with an ‘open in new tab’ icon, into your content.

<ul class="list list--links">
<li><a href="https://www.google.co.uk" target="_blank">Visit google.co.uk</a></li>
<li><a href="https://www.bbc.co.uk" target="_blank">Read BBC News</a></li>
<li><a href="https://www.bbc.co.uk/weather/" target="_blank">See the weather in your area</a></li>
</ul>

Download List

Include the following code within the ‘Text’ view mode to insert a list of items, that are prepended with a blue file download icon, into your content.

<ul class="list list--download">
<li><a href="https://www.thera.co.uk/wp-content/uploads/2017/04/file-example.pdf">PDF File #1</a></li>
<li><a href="https://www.thera.co.uk/wp-content/uploads/2017/04/file-example.pdf">PDF File #2</a></li>
<li><a href="https://www.thera.co.uk/wp-content/uploads/2017/04/file-example.pdf">PDF File #3</a></li>
</ul>

Links

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 url="https://google.co.uk"]I am a call to action button[/button]

I am a call to action button

Downloads

Visually similar to the ‘button’ shortcode, the ‘file’ shortcode expand on the previous behaviour by providing a suitable icon to indicate a downloadable file to the user.

[file url="https://www.thera.co.uk/wp-content/uploads/2017/04/file-example.pdf" title="Sample PDF for testing"]

Sample PDF for testing (14kB)

[file url="https://www.thera.co.uk/wp-content/uploads/2017/04/dummy-image.jpg" title="Download this image"]

Download this image (21kB)


Panel

A ‘Panel’ short code can be used to highlight a selection of content and contain within it other html code like headings and buttons. Wrap this around some existing content using the ‘Text’ view mode.

[panel]Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.[/panel]
Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
[panel colour="grey"]Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.[/panel]
Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
[panel colour="orange"]Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.[/panel]
Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
[panel colour="sky-blue"]Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.[/panel]
Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
[panel colour="dark-blue"]Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.[/panel]
Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Jumplinks

Include this short code at the top of your content to display links to every Heading 2 in your content. This allows a visitor to quickly identify the headings of your content and click straight through to that part of the content.

[jumplinks]

Embedding

Widgets

If you wish to embed a widget or a map from a 3rd Party website such as Google Maps you can insert the url into the ‘flexible’ short code to ensure that the embedded media is made responsive.
Tip: Use Google’s free URL shortener to tame those unwieldy URLs

[flexible link="https://goo.gl/NQoVL1"]

CQC panel

To embed the CQC panel into a page’s content, the cqc shortcode is available. The src attribute needs to start with the // portion of the code provided by the CQC.

[cqc src="//www.cqc.org.uk/sites/all/modules/custom/cqc_widget/widget.js?data-id=1-197739851&data-host=www.cqc.org.uk&type=location"]

Media

Video

Similar to the ‘flexible’ shortcode, the ‘video’ shortcode will allow you to embed YouTube or Vimeo videos responsively into your content.

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