Opening Times / Contact Details

Main reception

0113 239 4416

Out of hours

111

Style guide

Insightful information for Editors of this site on how to expand on the formatting of Page content.

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


Inline external links

Use this shortcode to include a symbol with any inline external links within your content.

[link title="Visit Mixd's website"]http://www.co.uk[/link]
Visit Mixd's website

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="http://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="http://www.manorparksurgery.co.uk/content/uploads/sites/43/2017/01/pdf-test.pdf">PDF File #1</a></li>
<li><a href="http://www.manorparksurgery.co.uk/content/uploads/sites/43/2017/01/pdf-test.pdf">PDF File #2</a></li>
<li><a href="http://www.manorparksurgery.co.uk/content/uploads/sites/43/2017/01/pdf-test.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. There is an optional style of “external” which is useful for indicating to users that a link will take them to a new window or external resource.

[button url="http://google.co.uk"]I open a url in the current window[/button]
I open a url in the current window
[button url="http://google.co.uk" style="external"]I open a url in a new tab[/button]
I open a url in a new tab

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.

If you include a PDF using this shortcode, a notice will be displayed to the user informing them that Adobe Reader may be required to view the PDF.

[file url="http://www.manorparksurgery.co.uk/content/uploads/sites/43/2017/01/pdf-test.pdf" title="Sample PDF for testing"]
Sample PDF for testing (1B)
[file url="http://www.manorparksurgery.co.uk/content/uploads/sites/43/2017/01/text-2-1.png" title="Download this image"]
Download this image (1B)

Alerts

Alerts can be used sporadically to highlight specific information to the user. An example use case of this would be to inform visitors of immediate opening hour changes.

There are three colour variants available to allow adjustment of the severity of the alert. You can include this within your content when using the ‘Text’ view mode.

[alert type="notice"]This is an information notice[/alert]

This is an information notice

[alert type="warning"]This is a warning notice[/alert]

This is a warning notice

[alert type="severe"]This is a severe alert[/alert]

This is a severe alert


Social links

These mini shortcodes are useful for including a link to a particular social media profile. Include them within a body of content.

[facebook] [twitter] [linkedin] [youtube] [googleplus] [skype] [instagram]
Facebook Twitter LinkedIn YouTube Google+ Skype Instagram

Island

An ‘Island’ 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.

[island style="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.[/island]
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.
[island style="red"]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.[/island]
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.
[island style="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.[/island]
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. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
[island style="light-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.[/island]
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"]

Static Google Maps

You can use the ‘map’ shortcode to include a static image from Google Maps to help highlight a location for your users.

Tip: This requires a valid Google Maps API key

[map address="Mixd 37a Grove Road, Harrogate"]

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"]

You may need Adobe Reader to view PDFs.

Out of hours call 111