Patterns

There are many different patterns available to make a piece of content stand out, depending on the content. 

Page headings 

Label your headings. Make sure you apply heading style labels found in the WYSIWYG. 

These labels are what screen reading software uses to navigate our pages. They also ensure heading size is consistent with heading hierarchy, which helps people understand how important a subsection is when they scan.  

The title page is always H1 which is automatically applied by the CMS. 

Within the page, use subheadings to structure the text to help the user understand what they need to do and how. The first subheader is H2 and so on.  

Example: 

• [h1] Apply for [webpage topic]
• [h2] Eligibility
• [h2] Application
• [h3] Cost
• [h3] How to apply
• [h2] If something goes wrong
• [h2] Appeal 

Inset text 

Inset text allows you to highlight a piece of text or a link on a page so it stands out.  

This is usually when the text is intended to be on the page for a long time or permanently.  

For example: 

All 3 and 4 year olds are entitled to 30 hours of free childcare a week. 

New Council Tax bills are sent out once year in March. 

For urgent and more short-term information, use the alert info blocks pattern. 

Inset contact 

You should use the inset contact style when the details are needed to complete a task within the page. 

Do not put contact details in inline content. If you refer to a specific council team, capitalise each word of the team name, except ‘team’. 

Example: 

‘Environmental Health team’ 

For the contact methods, always use: 

Email: wokingwebsite@woking.gov.uk’
‘Telephone: 01483 755 855’ 

Alert info styles 

There are 3 key alert info styles.  

Alert info 

Use this to alert someone to a key piece of info they need to know. There might be consequences to them not knowing it or not doing something. 

Examples: 

You must give at least 6 weeks’ notice to apply for a licence.

The deadline for the school admissions is next week.

Accidents themselves do not have to be reported but the injuries which result from an accident do.

By law you must register a cooling tower or an evaporative condenser with us.

Most visits will not be announced and you will not be given notification that an inspection is happening.

Alert warning 

Use this to alert someone to a very important piece of information. 

For example:  

Service updates or changes 

You will be fined, or you will be breaking the law or taken to court if you don't do something 

Out of hours service is available in an emergency 

Alert danger 

Use in crisis situations and to highlight life and death emergency information. 

Examples: 

Call 999 if you think someone's life may be in danger.

Crisis comms messages (flood, public health incident) 

Alert banners 

There are 4 types of alert banner and each one is a different colour: 

• death of a notable person (grey)
• minor alert (pale pink)
• announcement (black)
• emergency (dark pink) 

You can apply a banner to a: 

• individual page
• section
• homepage
• entire site 

Be mindful of what other banners are active before adding one. Having more than 2 on a page would be a lot.  

You can choose to disable the ‘hide’ button if you decide you want the banner to be present all the time.