Base styles
Headings
Heading 1
A heading 1 is denoted using the <h1> tag. We do not use them in the body of web pages as they are displayed automatically. The format for a heading 1 is:
Desktop: Camber, 60px, #E80033
Mobile: Camber, 35px, #E80033
This is a heading 1
Heading 2
A heading 2 is denoted using the <h2> tag. They are used in the body of web pages and appear outdented from the rest of the text. They are also used to display anchor links in the table of contents component. The format for a heading 2 is:
Desktop: Camber, 40px, weight 500, #040c49
Mobile: Camber, 24px, weight 500, #040C49
This is a heading 2
Heading 3
A heading 3 is denoted using the <h3> tag. They are used in the body of web pages and are the final layer of hierarchy. We do not use heading 4-6 in order to keep the narrative simple. The format for a heading 3 is:
Desktop: Camber, 24px, weight 400, #040C49
Mobile: Camber, 19px, weight 400, #040C49
This is a heading 3
Lists
Unordered list
A Unordered list is denoted using the <ul> and <li> tags. It displays with a red dash as the replacement for the bullet as displayed here. We do not indent unordered lists by default. If you need to indent a unordered list, think again about how the text is being laid out.
- Unordered list item one
- Unordered list item two
- Unordered list item three
Ordered list
An ordered list is denoted using the <ol> and <li> tags. It displays with a red number as displayed here. We do not indent ordered lists by default. If you need to indent an ordered list, think again about how the text is being laid out.
- Ordered list item one
- Ordered list item two
- Ordered list item three
Links
There are two types of links used within a rich text component. A link is displayed in red with a blue underline. If a link takes the user to a different website, it will be displayed with an icon denoting the action to the user. There is also a glossary link, which is more subtle and displays a pop up explanation for terms including works.
Buttons
There is one main button style used throughout the website. There are a couple of variants but they are only used in exceptional circumstances and not as part of the main body copy.
A button will be displayed with a blue background and a subtle drop shadow as below.