Callouts (blue)
A callout lets you highlight text on a page so it stands out. This is used when the text will be on the page for a long time or permanently. For urgent or more short-term information use an alert, emergency alert or an alert banner.
Examples:
- You must register a birth within 42 days
- Even if you are exempt from paying council tax you must still apply for a full reduction
You must register a birth within 42 days
Alerts (yellow)
You should only use an alert box to alert users to something unusual or as a warning to take action.
Examples:
- School admissions close tomorrow
- Some bin collections were missed today
- A grant application deadline is approaching
School admissions close tomorrow
Emergency alerts (red)
Only use emergency alerts when you need to warn users about something important, such as the legal consequences of an action, or lack of action, or if someone is in danger.
Examples:
- If you suspect someone is in imminent danger, call 999
- If you come across fire, call 999 immediately
- If you don't respond to your final warning letter, we will start legal action against you
If you suspect someone is in imminent danger, call 999
Quotes
To add quotes, click the ” icon on the WYSIWYG toolbar. It will apply a blue/green box around the quote. Below the quote (but within the box) you can attribute the quote. Use bold to make it stand out.
This is a test quote
An anonymous person
Blue document standout style
If you want to make a document stand out on the page:
- Add the file to the media library.
- Go to the place on the page where you want to add it.
- Select ’Add from media library’ and choose the file.
- Once it has been added, click ‘Edit media’.
- Under the display option, choose ‘WYSIWYG download’.
- This will then apply the correct blue styling and display the text used in the document ‘name’ field.
Start now buttons
Start now buttons let a user taken an action like apply for something. Apply a link to a piece of text, then click ‘Start button’ on the WYSIWYG toolbar.
If it's appropriate, use the text 'Start now'. Always use active language. Other options you can use are:
- Check now
- Apply now
- Pay now
- Subscribe now
- Order now
- Report now
- Renew now
If linking to an external form or service, for example on GOV.UK or My Account, make sure you put text above the button explaining which website the user will go to.
If you need more than one start now button
If there's a need for more than one start now button on a page, vary the button text so both buttons do not read the same. For example, one could say 'Start now' and one could say 'Cancel appointment'.
This also helps improve accessibility, as people using screen readers are more easily able to identify the different actions on the page.