Site map

For employers: For investment documents relating to the SIP consultation visit our investment documents page.

Banner page title (Ref: 01)

This is the banner page title description. This should be a small introduction about what a reader will find on the page. Three lines max. 

What components are available and how they can be used

On this page you will find a guide of all the available components we have on the website and how you can use them. This will be a live page, and will be updated as and when component updates have been made. Whenever there have been any updates, you will be made aware.

Please fully read all aspects of this page and use these rules when you are creating web content to maximise visual appeal and engagement. The content on this page is to be used as a guide and ideally to be used before any content is written. This will allow the Digital Content team to create engaging web pages that compliment your written content.

It is advised to meet with/discuss with a member of the Digital Content team during the creation of your content to ensure ideas and suggestions on how best to layout out a page to enhance any content, is done as early as possible.

Please be aware, padding that appears throughout the page due to the stacking of particular components together, can't be changed.

Please note: Final page design decisions sit with the Digital team as SMEs but a collaborative decision between teams is always encouraged.

Top level page heading (H2) (Ref: 02)

NB: When writing your content, please ensure you start with a header, as this frames the content better within the page. Further information on the importance of headers is explained later.

This is an RTE (Rich Text Editor). This component is used for content which has multiple paragraphs.

The default font size is 16px with a normal (400) font weight, but there are options to make font bigger and smaller. Only the standard text direction is available on all web components.

Open Sans 10px

Open Sans 13px

Default - Open Sans 16px

Open Sans 18px

Open Sans 24px

Open Sans 32px

Open Sans 48px

About headings and subheadings (H3)

Headings and subheadings are not just on the page to make it look pretty. They play a key role in helping people navigate and understand the content. In terms of accessibility, the correct heading structure helps assistive technology users and people with cognitive difficulties find the content they need.

Most people visually scan the page to look for information, and headings help users do this. Without a correct heading structure, assistive tech users would have to read the whole page to find information they need.

Reading every word on every web page would be tiring and impractical. Instead, assistive tech users can scan the page using correctly structured headings and subheadings. For example, a screen reader user can bring up a list of the main headings on a page, they can then read and select the subheadings and content in that section. (Example, heading level one...... heading level two......heading level three).

How H tags need to be structured (H4)

To correctly structure headings and subheadings for accessibility purposes, the H tags used must be in a logical order within a page of content ie. H1, H2, H3, H2, H3, H4, H3, H4 etc, and not for example, H1, H3, H4, H2, H5. The Digital team will choose which H tags need to be used when designing the page as the H tags used in other components on the page need to be taken into consideration. If multiple components are used throughout a page, the H tags still need to follow a logical order between components.

The following is the font, size and weight of each H tag:

Heading 2 - Lato 36px/300 (Light)

Heading 3 - Lato 32px/300 (Light)

Heading 4 - Open Sans 24px/600 (Semi-bold)

Heading 5 - Open Sans 18px/600 (Semi-bold)
Heading 6 - Open Sans 16px/600 (Semi-bold)

Bold, italic and underline (H3) (Ref: 03)

The RTE allows text styling to be applied to pieces of content to put a particular emphasis on its meaning. That could be a design emphasis or an importance emphasis, and there are different ways this is achieved using the HTML code.

Bold styling is used to highlight text and there are two HTML tags out there, <b> or <strong>. The difference between the two tags is that the <b> tag is intended to visually draw attention to the text, while the <strong> tag highlights the text and indicates that this is an important word or section of text when read by a screen reader. <strong> is important for SEO and screen readers, whereas <b> isn't. The RTE uses <strong> by default therefore if we want to just visually highlight content, we would need to add some bolder font weight HTML code instead of bolding up text.

Italic styling can be used to emphasise text and there are two HTML tags out there, <i> or <em>. The visual result is the same but the main difference between these two tags is that the <em> tag emphasises on the important word or section of words while the <i> tag is just offset text conventionally styled in italic to show alternative mood or voice. A screen reader will pronounce any <em> words with a verbal stress, but not when <i> is used. The RTE uses <em> by default therefore if we don't want a word verbally stressed by a screen reader, then we would need to choose an alternative styling.

Don’t underline any text that’s not a hyperlink. Underlines provide a strongly perceived affordance of clickability, and users will be confused and frustrated if underlined text doesn’t match their expectations. If you need to emphasise certain words or sentences, using italics or bold is much safer.

Hyperlinks (H3) (Ref: 04)

Accessible hyperlinks are especially important because screen reader users often scan through lists of links in isolation. This means they do not have the surrounding context to help them understand what the link is for.

To check your hyperlinks, just read the link text - without paying attention to the surrounding content. If the link text still makes sense in isolation and clearly explains where the link goes, it’s likely the text you’re using is accessible.

If you’re using link text like ‘click here’ or ‘more information’ then you’re not meeting this requirement, as link text like that does not describe where the link will go or what it’s for.

Block quotes (H3) (Ref: 05)

Within the RTE you can use "block quotes" to emphasise content. A screen reader will read this content as a "quote" so we need to be mindful how we use this styling. The colour of this can't be changed and no other formatting should be applied ie. font size, hyperlinks.

Bulleted and numbered lists (H3) (Ref: 06)

Sometimes the best way to present information is in a bulleted list. Bulleted lists attract attention, support scanning, shorten text, and reveal the relationship of items.

Digital content is usually not the place for long, narrative writing. Instead, web readers prefer copy formatted for ease of scanning, which allows them to easily skip through chunks of text to get to areas of interest.

Many different web-formatting techniques help break up dense paragraphs. Along with bolding, indenting, line spacing, and colour-coding, bulleted lists are one of the most powerful methods for supporting efficient reading on the web.

A few tiny dots attract the eye and can make a complex concept understandable. Readers perceive the bullets as shortcuts to succinct, high-priority content. It’s not surprising that, in usability studies, we observe readers gravitate towards bulleted lists. Web readers want to digest content quickly.

To draw visual attention to items in a list without implying that items go in a certain order (eg, chronology, importance, priority), use a bulleted list. Use a numbered list if you want to display items in a numbered series. Use a lettered list if you want to emphasise separate parallel items within a sentence.

Bulleted list, where possible, should only be used for the following types of lists:

  • Where you need to highlight a range of ideas, options, features or benefits
  • Where the entire list is worthy of attention
  • Where the items can be conveyed concisely
  • Where the items are logically distinct
  • Where listing the points in the body text would be cumbersome.

Tables (H3) (Ref: 07)

Tables should only be used for numerical data and not for textual content. Styling of tables can't be changed.

Annual salary The contribution taken from your pay before tax The impact of your contribution on your take-home pay* (due to tax savings)
£10,000
£81.67
£81.67
£20,000
£163.33
£130.67
£30,000
£245
£196
£40,000
£326.67
£261.33
£50,000
£408.33
£326.67

Using special characters (H3) (Ref: 08)

Not all screen readers will read aloud certain special characters, therefore the less unnecessary special characters we use on written content, the better. For example, quotation marks and apostrophes used to emphasise words or phrases will not always be clear to tech assisted users as the majority of screen readers don't read them out. Therefore, it is best to use other stylings ie. italics, rather than apostrophes.

Coloured text (H3) (Ref: 09)

There is the option to change the font colour to a brand colour, but this should be used sparingly.

Coloured backgrounds (H3) (Ref: 10)

The RTE component also allows us to add a coloured background around a section of content. The following colours are available:

  • USS Blue 20% tint
  • USS Green 20% tint
  • USS Amber 10% tint
  • USS Berry 10% tint
  • USS Grey 10% tint

Using this feature, adds a little extra padding to where the text sits, and this can't be changed.

Featured content component (Ref: 11)

Tabbed content component (Ref: 12)

This is the content for the first tab. This tab will always show as the default and can't be changed.

This has full access to all RTE stylings including images.

There is no limit on the amount of tabs you can have but too many may not be the best decision, however you have to have a minimum of two.

Second tab RTE

Coloured backgrounds can be added to the content.

Third tab RTE

Icon block title - Mandatory, styling can't be changed (Ref: 13)

Optional description, styling can't be changed. All icon fields below are mandatory ie. title, icon image and button. One minimum, four max icons per row. Block background can be either white or grey.

See where your Investment Builder savings are invested

View now

Get up to speed on My USS

Learn more

Find out more about retiring as a USS member

Learn more

See how the Investment Builder works

Learn more

Optional iFrame title - styling can't be changed (Ref: 14)

Optional description - styling can't be changed. iFrames only fit within this width layout and a wider layout.

Optional card container title - styling can't be changed (Ref: 15)

Optional description - styling can't be changed. You can either have one, two or three cards in a row. The cards will resize to the full width of the container depending on the amount of cards used per row. Cards can be a mixture of normal and video cards. There are five different coloured options for the main card container background, with 10% grey being the default.

  • Eight top tips to tackle the rising cost of living

    Rising inflation’s still making the headlines, despite everything else that’s going on, and there’s little comfort in being told it won’t last forever because most of us are feeling the effects now.

  • Your quick guide to pension tax

    Your pension is a tax-efficient way of saving for the future as we provide a range of options that could help you manage your tax liability.
  • Ellen Kelleher

    Ellen Kelleher joined the board on 1 November 2021 and is also a member of the Pensions Committee and Governance and Nominations Committee.
  • Gary Dixon

    Gary became a Director of Universities Superannuation Scheme Limited in 2019. He’s also a member of the Audit Committee .

Document download - Optional title (Ref: 16)

Optional description. Document titles should be kept at a reasonable length to not skew the component format.

Columned content (Ref: 17)

This component can achieve columned content for both a two column and three column layout. The cards have six colour options with 10 card container colour options (only to be used surrounding a white card). Please note that when the columned content is viewed on a mobile, the cards stack and won't appear side by side. Therefore, if your content needs to be a 'comparison' that needs to be viewed side by side at all times, this is the not the component to use.

  • 2050
    committed to
    Net Zero

  • £82.2bn
    assets under management

  • £1.9bn
    in renewable
    energy

Example page of how this component can be used is linked below.

  • What you pay in and what you get

    You and your employer contribute on your salary up to the salary threshold, and you get tax relief on what you put in. You’ll build up benefits each year, which give you a guaranteed income for life and a one-off cash lump sum when you retire, as well as other benefits, like life cover and ill health cover.

    Watch our video on how you build benefits in this part.

    Page example of where this columned content component has been used.

  • What you pay in and what you get

    You and your employer contribute on your salary above the salary threshold and, just like the Retirement Income Builder, you get tax relief on what you put in. Your contributions build a flexible savings pot for your future. You can use this alongside your guaranteed income from the Retirement Income Builder.

Accordion and FAQ components (Ref: 18)

Accordion title - optional

Optional description. There is no limit on the amount of accordion items you can have within an accordion. Multiple accordions can be added on a page to separate different subjects.

FAQ component title - Mandatory

Next and previous component (Ref: 19)

The next and previous links are a component that can be added to any page and link to any pages. You can also change what the button says if you don't want it to say Previous and Next.

Notice card container - optional title (Ref: 20)

Optional description

  • Notice banner title - Optional

    Notice banner description - Optional. You can have one or two buttons on the banner.

The below is a new option to add authors name and photo to new lifestyle articles. (Ref:21)

26 OCTOBER 2022

Eight top tips to tackle the rising cost of living


Written by Lesley Broadhurst-Jones

 

What is inflation?

Rising inflation’s still making the headlines, despite everything else that’s going on, and there’s little comfort in being told it won’t last forever because most of us are feeling the effects now.