Style Guide for inputting 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
Heading 3
Heading 4
Colours
Font Sizes
Heading 2 is 26px
Heading 3 is 20px
Heading 4 is 17px
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 SmithJob title
Inline external links
Use this code to insert a link within your content.
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
<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.
- Your text goes here
- Your text goes here
- Your text goes here
<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.
Downloads
The ‘pdf’ shortcode provides a suitable icon to indicate a downloadable file to the user.
PDF Download
In order to view PDF documents you will need Adobe PDF Reader
Messages
Strapline
The ‘strapline’ shortcode provides the ability to create a Strapline.
This is a Strapline
Adobe Prompt
The ‘adobe’ shortcode will display a notice to the user informing them that Adobe Reader may be required to view the PDF.
Viewing PDFs
In order to view PDF documents you will need Adobe PDF Reader
Panels
The ‘panel’ shortcode 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.
Media
The ‘video’ shortcode will allow you to embed YouTube or Vimeo videos responsively into your content.
Block
The ‘block’ shortcode will allow you to present a featured link with an icon. An icon can be specified using the icon attribute, similarly for the link. The block’s content can then be wrapped in this shortcode.
The available icons are ‘video’, ‘pen’ and ‘info’.
Block group
To present the blocks in a group of 3 columns, you can wrap the blocks with the ‘block_group’ shortcode.
Accordions
Accordion
If you need to condense large blocks of text down in to a smaller initial footprint on the page, you can use the accordion shortcode.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis volutpat turpis, et blandit enim elementum sit amet. In finibus in quam vel dignissim. Aliquam erat volutpat. Vivamus pulvinar magna sed odio eleifend, et ullamcorper lectus gravida. Mauris laoreet porta mattis. Donec ac tempor lacus, vel luctus urna. Proin et leo eget ligula feugiat aliquet non in lorem. In vel lacinia diam, non malesuada turpis. Vestibulum sed mattis nibh. Maecenas placerat, lorem ut imperdiet consectetur, metus lacus feugiat neque, nec congue libero est vitae odio. Cras in elementum massa. Vestibulum turpis eros, maximus sit amet luctus sit amet, facilisis at tellus.
Fusce mattis, elit at gravida rutrum, leo augue bibendum tellus, quis sagittis orci purus ut augue. Ut tincidunt venenatis leo. Proin in lacinia erat. Duis cursus, justo ac laoreet elementum, mauris risus tincidunt magna, quis volutpat eros ante sit amet eros. Vestibulum scelerisque bibendum diam, nec consectetur ligula pretium ac. Maecenas vel viverra urna, interdum gravida nibh. Cras at lacus elementum turpis pulvinar fermentum a in mauris. Ut rutrum pulvinar mi, sed tincidunt purus elementum quis. Ut fringilla efficitur purus, in placerat tortor venenatis id. Morbi consequat ante lacus, in tempus risus luctus quis. Ut ultricies hendrerit libero. Phasellus nec consectetur velit. Quisque suscipit ipsum ac dolor tincidunt, id ultrices turpis feugiat. Suspendisse id aliquam urna, eget congue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ipsum id turpis vestibulum luctus.
Sed cursus lectus lacus. Quisque vel urna augue. Aliquam faucibus semper nulla sit amet lacinia. Aenean rutrum sapien nec elit convallis aliquet. Pellentesque lacinia vehicula egestas. Maecenas velit lorem, interdum a leo eget, facilisis ultricies velit. Nunc volutpat luctus iaculis. Morbi finibus velit ac tincidunt suscipit. Nullam volutpat diam eu convallis ultricies. Nullam consequat nisl ut odio eleifend, ut auctor libero dapibus. Ut tempor turpis metus, volutpat varius augue congue sed. Donec interdum sagittis turpis, eget porta eros facilisis luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.