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
Heading 3
Heading 4
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.
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.
<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.
<li>Your text goes here</li>
<li>Your text goes here</li>
<li>Your text goes here</li>
</ol>
- Your text goes here
- Your text goes here
- 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.
<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.
<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.
<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.
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.
Sample PDF for testing (14kB)
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.
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.
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
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.
Media
Video
Similar to the ‘flexible’ shortcode, the ‘video’ shortcode will allow you to embed YouTube or Vimeo videos responsively into your content.