Page elements

Page elements help display information on the page and promote content. These elements are already incorporated into the standard templates.

Size and positioning of the logo on websites

The University logo should be used on websites in the dimensions set out below (pixels).

The logo should never be resized.

The University logo should be positioned within the header of the website on the top left. The logo should have an exclusion zone on every side (as shown in the image below), though the padding to the left of the logo can be reduced for mobile versions. The logo should not be resized when used on different screen sizes and must always link to www.manchester.ac.uk.

Page titles and subtitles

Page titles and subtitles provide a structure to the page and help users understand how the sections on the page relate to each other. HTML headers are used to include titles and subtitles on a webpage and need to be added in the proper order (H1 to H6) — for example, an H2 heading should not be included on a page without an H1. See SEO copywriting for further information on HTML headers.

Examples

<h1>This is an example of H1 header</h1>

<h2>This is an example of H2 header</h2>

<h3>This is an example of H3 header</h3>

<h4>This is an example of H4 header</h4>

<h5>This is an example of H5 header</h5>

Paragraphs — regular and bold, link text

This is an example of a paragraph with regular font and bold font. A paragraph uses Opens Sans Regular, 16 pixels in size, #343536 in colour with a line height of 1.5. Links should use colour #3967c1 and hover colour #383a3c.

Bullet points

• This is an example of bullet points as used within a list.
• The bullet points use a purple square (gif image, size: 6 px, colour #6B2C91).
• List items use Open Sans, 16 pixels, colour #343536, line height of 1.5

Forms

All form fields should use:

• 1-pixel border #CCCCCC
• 4-pixel border radius
• Open Sans Regular 16 pixels
• Background colour #FFFFFF

Field text should use:

• Top, bottom padding of 5px; left, right padding of 8px

All buttons should use:

• Height: 48p
• order radious: 4 px
• Top, bottom padding of 6px; left, right padding of 15px.
• Font colour: #ffffff
• Default state colour:#6b2c91
• Rollover state colour:#79379D

This is an example of a form:

Tables

Heading cells use:

• Open Sans Bold 16 pixels with a line height of 1.5
• 6-pixel padding
• Colour #FFFFFF
• Background colour #383B3C
• Solid 1-pixel border colour #383B3C

Data cells use:

• Open Sans Regular 16 pixels with a line height of 1.5
• 6-pixel padding
• Colour #343536
• Background colour #FFFFFF
• Solid 1-pixel border colour #CCCCCC

Row striping (cell background colour #EEEEEE) can optionally be used to improve readability.

This is an example of a table:

Promo boxes

Promo boxes are used to promote relevant content and as navigational tool. They can be image- or colour-based.

Text goes here.

Colour promo box 1

• Text goes here
• Text with link

Colour promo box 2

Some text.

Read more

Accordions

Accordions are used to display big chunks of text on the page.