Website Style Guide

 

Use H1 for page titles when not using default titles

Column 1 = 1/3 of total width

spacing-message

Use H3 tags for headers in Column 1

Use p tags or no tags at all for body copy in Column 1.

Underline bolded body copy subtitles and hyperlinks.

Use the h2_with_line shortcode for News and Events feed headers.

Centre News

IN THE NEWS | Campuses Flourish When Teachers TravelThis article originally appeared on Huffington Post. “It seems like a series of accidents,” Philip recalled. “On my own, I wouldn’t...

Upcoming Events

Section Color Coding

The following colors are used to brand pages within the main sections of the website.

ABOUT

#FFCC00

ACADEMICS

#BE1E2E

ADMISSION & AID

#1F9A8C

CAMPUS LIFE

#A05FA6

ATHLETICS

#000000

OFFICES

#D9AD44

AFTER CENTRE

#009900

Column 2 = 2/3 of total width

images-message

Use the H2 tag for text within colored message boxes. Using line styles, set the left padding at 20px, the line-height at 35px and align to the left. When placing a message box under an image, set the bottom margin of that image to -20px.

Use the H3 tag for introductory paragraphs on landing pages and where particular emphasis or separation from general body copy is needed. For these paragraphs, set the line-height to 30px and the text color to #999999.

H3 tags can also be used for headers before paragraphs of body copy

Use p tags or no tags at all for body copy within Column 2. If paragraphs appear too close together, you can use separators to extend the vertical space where needed.

You can also use bold for emphasis. Be sure to also underline links within body copy to placate the scourge that is Internet Explorer. Do not CAPITALIZE or italicize type within paragraphs for emphasis.

H4 tags can be used for sub-headers directly under an existing H3 tag

H5 tags can be used for sub-headers directly under an existing H4 tag
H6 tags can be used for sub-headers directly under an existing H5 tag

Accordion Captions will appear as H3 tags

Be sure to use a separator to add 30px of padding at the beginning and end of an accordion set.

Paragraphs within Accordions

You will need to wrap paragraphs within accordions in p tags and add separators between them.

If you do not, there will be no vertical padding between paragraphs

Should I use an accordion?

As a general rule, sections of text that are less that 2-3 sentences long should not require an accordion. They can become overkill if they seem to unnecessarily slow down reading for the viewer.

Information On Tables

Shortcode tables will have a border, 3 columns and column headers by default. Non-full page width tables should have no more than 2 columns to accommodate display on mobile devices.

Dummy Title

Dummy Title

Dummy Title

content content content content content content
content content content content content content

You will need to remove the third column manually and style the column headers to suit your needs. You can also delete the column headers row, if it better fits your purpose.

Dummy Title

Dummy Title

content content content content
content content content content

Scroll Boxes

Scroll boxes are not available in the shortcode set, but they can be used manually using a div with the “scroll-box” id. You can style the height, background color, and padding however you like.

H4 Header Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum ipsum, pharetra ac lectus vel, posuere dignissim ipsum. Nullam a felis laoreet, viverra massa quis, eleifend est. Curabitur aliquet lacus non rhoncus lobortis. Proin eget felis sit amet tortor condimentum pretium. Ut hendrerit leo enim, ut ultrices dui interdum et. Curabitur viverra risus quis mauris congue dapibus. Donec ut sodales metus, ac pharetra augue. Donec mollis rutrum rutrum. Ut adipiscing ante eget gravida rutrum. Donec tincidunt, neque nec scelerisque vulputate, est libero ornare leo, vel fermentum quam arcu ut metus. Etiam feugiat libero ut lectus facilisis, a euismod est tempus. Quisque luctus gravida molestie. Morbi dictum ut libero in sollicitudin. Nunc risus dui, elementum eget mi at, sodales imperdiet dui.

Nunc eu ligula ac dolor aliquet sagittis. In sit amet lorem sed dolor placerat pulvinar. Integer consectetur, turpis ut elementum eleifend, ligula massa dapibus lacus, at pulvinar tellus justo vitae nisl. Integer gravida, velit ut ornare tincidunt, elit nisi euismod lorem, posuere blandit nulla sapien sit amet nunc. Proin at erat mi. Proin congue aliquet metus vel dictum. In dignissim nisi at leo accumsan facilisis.

Cras pulvinar leo lacinia tincidunt iaculis. Quisque blandit magna sit amet auctor pharetra. Fusce massa est, convallis sed fringilla vitae, congue et risus. Sed sit amet convallis dolor. Nullam varius quam quis quam tempor faucibus. Mauris elementum ut enim et ornare. Aliquam pulvinar sodales est vel accumsan. Pellentesque vitae tristique nulla. Sed auctor velit sed dolor rhoncus, a cursus sem varius.

Nunc eu ligula ac dolor aliquet sagittis. In sit amet lorem sed dolor placerat pulvinar. Integer consectetur, turpis ut elementum eleifend, ligula massa dapibus lacus, at pulvinar tellus justo vitae nisl. Integer gravida, velit ut ornare tincidunt, elit nisi euismod lorem, posuere blandit nulla sapien sit amet nunc. Proin at erat mi. Proin congue aliquet metus vel dictum. In dignissim nisi at leo accumsan facilisis.

Nunc eu ligula ac dolor aliquet sagittis. In sit amet lorem sed dolor placerat pulvinar. Integer consectetur, turpis ut elementum eleifend, ligula massa dapibus lacus, at pulvinar tellus justo vitae nisl. Integer gravida, velit ut ornare tincidunt, elit nisi euismod lorem, posuere blandit nulla sapien sit amet nunc. Proin at erat mi. Proin congue aliquet metus vel dictum. In dignissim nisi at leo accumsan facilisis.