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.mixd.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 check mark, into your content.

<ul class="list list--checklist">
<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 file download icon, into your content.

<ul class="list list--download">
<li><a href="http://pnhinterestgroup.mixd.co.uk/content/uploads/2017/08/test.pdf">PDF File #1</a></li>
<li><a href="http://pnhinterestgroup.mixd.co.uk/content/uploads/2017/08/test.pdf">PDF File #2</a></li>
<li><a href="http://pnhinterestgroup.mixd.co.uk/content/uploads/2017/08/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://pnhinterestgroup.mixd.co.uk/content/uploads/2017/08/test.pdf" title="Sample PDF for testing"]
Sample PDF for testing (4kB)
[file url="http://pnhinterestgroup.mixd.co.uk/content/uploads/2017/07/hero-test.jpg" title="Download this image"]
Download this image (208kB)

Alerts

Alerts can be used sporadically to highlight specific information to the user.

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

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.

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

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/8tPnX7OPo0Q"]