We're creating a new front-end 'Experience Kit'
For more information go to the #Experience-library-support Slack channel (Co-op colleagues only).
Elements
Headings, paragraphs and lists
Headings, paragraphs and lists give your content structure and help to make it more readable.
Design guidelines
Our headings, paragraphs and lists have set font sizes.
Go to the guidelines on font sizes.
We’ve used our foundations to design headings, paragraphs and lists.
Headings
Headings should be structured logically. This is because assistive technology users can use the headings as a way to navigate around the page.
Heading 1 (H1) is the main page heading, you should only have one of these.
Heading 2 (H2) is a subheading, you can have several of these.
Heading 3 (H3) is a subheading within a H2 section, you can have several of these.
You can use our custom font sizes to adjust the size of headings to fit your design. For more information, go to the guidelines on font sizes.
Paragraphs and lists
Paragraphs, lead paragraphs and lists are set at a size to make content readable.
Do not change the font sizes, or the line spacing. These have been set to meet our accessibility standards.
To see the the content design guidelines for headings, paragraphs and lists.
Go to the content design guidelines on headings, paragraphs and lists.
Examples
Everything you need to know about Fairtrade
When you choose Fairtrade, you’re helping make a difference to farmers all over the world. Fairtrade is a global movement that guarantees producers a fair deal.
From the best ways to support Fairtrade, to how it’s transforming communities, here’s everything you need to know.
Fairtrade is about empowering farmers and workers
When you buy products with the Fairtrade Mark, you’re supporting the farmers and workers’ human rights.
This helps to provide:
- a fair price for their product through the Fairtrade Minimum Price and Premium
- fair terms of trade when selling their products
- good working conditions that are socially fair
- freedom from forced or underage labour
Text content using a H1, lead paragraph, paragraph, H2 and bullet list.
The meeting agenda will be:
- an overview of the last month
- a presentation
- a special announcement
A bullet point list.
Before leaving the house:
- Put on socks.
- Put on shoes.
- Tie laces.
A numbered list.
Changelog for this page
| Date | Notes |
|---|---|
| 3 June 2021 | First version of page published |