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.
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
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).
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:
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.
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.
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.
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:
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
|
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.
There is the option to change the font colour to a brand colour, but this should be used sparingly.
The RTE component also allows us to add a coloured background around a section of content. The following colours are available:
Using this feature, adds a little extra padding to where the text sits, and this can't be changed.
This is where the main bulk of your content will sit.
You can have the following stylings:
The banners have five colour options:
The image can sit on either the left or right hand side of the banner. The standard width of the image needs to be 470px. The height can be determined by the amount of content on the other side. Average size is 470px x 300px as you don't want the banner too wide (like this one).
Page example of where multiple featured content components have been used.
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
Optional description - styling can't be changed. iFrames only fit within this width layout and a wider layout.
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.
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.
Here in Liverpool we run a large scale operation that’s responsible for managing pensions for over 500,000 members and their families. We’re here to ensure we deliver on our promise to members.
Optional description. Document titles should be kept at a reasonable length to not skew the component format.
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.
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.
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.
Optional description
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
Written by Lesley Broadhurst-Jones
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.
