Style Guide

Link

HTML code

Bold Text

HTML code

Italic Text

HTML code

Intro Text

Lorum ipsum tempor interdum suspendisse augue quam, venenatis nec congue at accu msan atmassa ed quis.

HTML code

Horizontal Rule

HTML code

Dotted Rule

HTML code

Blockquote

“Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam.”

Quoted person's name in bold

HTML code

Table

HTML code

Headline

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Heading Level 2

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Heading Level 3

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Heading Level 4

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Heading Level 5

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Heading Level 6

Maecenas vel nisi quam

Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.

HTML code

Info Message

This is an info message

HTML code

Success Message

This is a success message

HTML code

Warning Message

This is a warning message!

HTML code

Bullet List

• Duis et augue in purus condimentum condimentum eget eget odio.
• Maecenas vel nisi quam.
• Nullam in orci sit amet.
• In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.

HTML code

Numbered List

1. Duis et augue in purus condimentum condimentum eget eget odio.
2. Maecenas vel nisi quam.
3. Nullam in orci sit amet.
4. In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.

HTML code

Ticked List

• Duis et augue in purus condimentum condimentum eget eget odio.
• Maecenas vel nisi quam.
• Nullam in orci sit amet.
• In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.

HTML code

Crossed List

• Duis et augue in purus condimentum condimentum eget eget odio.
• Maecenas vel nisi quam.
• Nullam in orci sit amet.
• In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.

HTML code

Two-Column List

• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.

HTML code

Two-Column List (Divided)

• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.
• Duis et augue in purus condimentum condimentum eget eget odio.

HTML code

Block List (links)

• Duis et augue in purus condimentum
• Duis et augue in purus condimentum
• Duis et augue in purus condimentum
• Duis et augue in purus condimentum

HTML code

Two-Column Block List (links)

• Duis et augue in purus condimentum
• Duis et augue in purus condimentum
• Duis et augue in purus condimentum
• Duis et augue in purus condimentum

HTML code

Definition List

In at sodales nisl

Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna.

Vestibulum ante ipsum primis

Proin faucibus sem sed sapien dictum iaculis. Sed in lacus magna.

HTML code

PDF Download

Download our Brochure (276kb)
In order to view PDF documents you will need Adobe PDF Reader

Shortcode

Inserted Link

• Patient and visitor feedback survey

HTML code

Inserted External Link

• Patient and visitor feedback survey

HTML code

Share Icons

• Share on Facebook
• Share on Twitter
• Send by Email

Shortcode

Left-Aligned Image

Settings:

• Alignment: Left
• Size: Medium

HTML code

Right-Aligned Image

Settings:

• Alignment: Right
• Size: Medium

HTML code

Left-Aligned Image (Captioned)

Image caption purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam

Settings:

• Alignment: Left
• Size: Medium

HTML code

Right-Aligned Image (Captioned)

Image caption purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam

Settings:

• Alignment: Right
• Size: Medium

HTML code

Highlight Button

HTML code

Alert Button

HTML code

Feature Button

HTML code

Feature Button (alternative)

HTML code

Highlight Badge

Shortcode

Alert Badge

Shortcode

Feature Badge

Shortcode

Feature Badge (alternative)

Shortcode

Basic Panel

HTML / Shortcode

Highlight Panel

HTML / Shortcode

Alert Panel

HTML / Shortcode

Feature Panel

HTML / Shortcode

Feature Panel (alternative)

HTML / Shortcode

Highlight Block

HTML / Shortcode

Alert Block

HTML / Shortcode

Feature Block

HTML / Shortcode

Feature Block (alternative)

HTML / Shortcode

Highlight Action Panel

HTML / Shortcode

Alert Action Panel

HTML / Shortcode

Feature Action Panel

HTML / Shortcode

Feature Action Panel (alternative)

HTML / Shortcode

Tagged News

Neonatal medics set to take on Great North Run

Posted on 5th July 2019 in Fundraising

Every day the tiny babies and families on our neonatal unit at The James Cook University Hospital face a marathon journey. But now the consultant neonatologists and advanced neonatal nurse practitioners who treat them are embarking on a half marathon of their own to raise vital funds.

Telephone line issues

Posted on 5th July 2019 in Hospitals

We are currently experiencing intermittent problems with our telephone lines at The James Cook University Hospital. This is affecting some incoming external calls to our switchboard and Patient Connect.

View more news

HTML / Shortcode

Donate Button

Donate now

HTML / Shortcode

Media Element (without linked image)

Maecenas vel nisi quam

Maecenas diam mi, pellentesque quis tempor eget, interdum fringilla nulla. Morbi ac augue est. Etiam quis dolor sagittis felis consectetur mollis vitae quis erat. Vestibulum sit amet odio vel eros hendrerit lobortis et eget augue.

HTML / Shortcode

Media Element (with linked image)

Maecenas vel nisi quam

Maecenas diam mi, pellentesque quis tempor eget, interdum fringilla nulla. Morbi ac augue est. Etiam quis dolor sagittis felis consectetur mollis vitae quis erat. Vestibulum sit amet odio vel eros hendrerit lobortis et eget augue.

HTML / Shortcode