Search the Staffnet siteSearch StaffNet
Search type
Image of computer

Page elements

Page elements help display information on the page and promote content. These elements are already incoporated 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).

Logo widthLogo heightx height
169px 70 px 51 px

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.

Main logo (web)
x = exclusion zone
Website example
Positioning of logo on websites

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 infomation on HTML headers.

Header WeightSize (px)ColourLine heightUsage
H1 300 40/42px #6B2C91/#333333
or Faculty colour
1.1 Page headers
H2 300 34/28px #1D1D1D or Faculty colour 1.2 Body of the page
H3 400 26px #1D1D1D or Faculty colour 1.3 Body of the page
H4 600 22px #1D1D1D or Faculty colour 1.3  
H5 600  19px #1D1D1D or Faculty colour 1.4  

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

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.

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:

Date of birth *

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:

Header 1Header 2Header 3Header 4
Column 1 Column 2 Column 3 Column 4
Column 1 Column 2  Column 3 Column 4
Column 1 Column 2 Column 3 Column 4
Column 1 Column 2 Column 3 Column 4
Column 1 Column 2 Column 3 Column 4
Column 1 Column 2 Column 3 Column 4

Promo boxes

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

Accordions

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

Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 

Item 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.