Styles
Colours
These are the main colours used throughout the website.
| Colour | Hex value | HSL value |
|---|---|---|
| #ffffff | hsl(0deg 0% 100%) | |
| #f5f5f5 | hsl(0deg 0% 96.08%) | |
| #e5e5e5 | hsl(0deg 0% 89.8%) | |
| #dddddd | hsl(0deg 0% 86.67%) | |
| #cccccc | hsl(0deg 0% 80%) | |
| #404040 | hsl(0deg 0% 25.1%) | |
| #353535 | hsl(0deg 0% 20.78%) | |
| #111111 | hsl(0deg 0% 6.67%) | |
| #045a90 | hsl(203deg,95%,29%) | |
| #266427 | hsl(120.97deg 44.93% 27.06%) | |
| #FEC577 | hsl(34.67deg 98.54% 73.14%) | |
| #D50000 | hsl(0deg 100% 41.76%) |
Colour contrast
The Web Content Accessibility Guidelines (WCAG) aim to make web content more accessible to a wider range of people with disabilities. The contrast ratio requirements ensure that text and graphical elements are easily distinguishable from their backgrounds. Here's a detailed breakdown of the contrast ratio requirements for different WCAG levels:
WCAG 2.0 Level AA
- Normal Text: A contrast ratio of at least 4.5:1.
- Large Text: A contrast ratio of at least 3:1.
WCAG 2.1
- Graphics and User Interface Components: A contrast ratio of at least 3:1.
WCAG Level AAA
- Normal Text: A contrast ratio of at least 7:1.
- Large Text: A contrast ratio of at least 4.5:1.
Definition of Large Text
- Large Text: Text that is at least 14 point (typically 18.66px) and bold, or 18 point (typically 24px) or larger.
These guidelines are designed to improve readability and usability for users with visual impairments, ensuring that web content is accessible to as many people as possible. When designing web content, adhering to these contrast ratio requirements is crucial for compliance with accessibility standards.
We use the WebAIM Colour Contract Checker (opens new window) to test the colours used on the website meet the WCAG guidelines.
Examples of colour contrast used throughout the website
Call to action buttons
Primary call to action buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #fffffff | #266427 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.15:1 | Link to results |
| Hover state | #fffffff | #183f19 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 11.9:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Secondary call to action buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #111111 | #ffffff | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Hover state | #111111 | #e6e6e6 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 15.12:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Form buttons
Primary form buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Hover state | #ffffff | #034975 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.48:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Secondary form buttons
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #111111 | #e5e5e5 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.99:1 | Link to results |
| Hover state | #111111 | #BABABA | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.72:1 | Link to results |
| Active and focus state | #111111 | #BABABA | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 9.72:1 | Link to results |
Header
Top navigation
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #111111 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Hover state | #ffffff | #111111 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 18.88:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Breadcrumb
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Hover state | #ffffff | #045a90 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 7.31:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Footer
Feedback
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Text | #111111 | #e5e5e5 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.99:1 | Link to results |
| Default state | #045a90 | #e5e5e5 | AA - Pass | AAA - Fail | AA - Pass | AAA - Pass | 5.8:1 | Link to results |
| Hover state | #034e7c | #e5e5e5 | AA - Pass | AAA - Fail | AA - Pass | AAA - Pass | 6.99:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Social links
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #353535 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 12.26:1 | Link to results |
| Hover state | #ffffff | #353535 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 12.26:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Ultility links
| State | Foreground colour | Background colour | Normal text size colour contrast | Large text size colour size | Contrast ratio | Results | ||
|---|---|---|---|---|---|---|---|---|
| Default state | #ffffff | #404040 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 10.36:1 | Link to results |
| Hover state | #ffffff | #404040 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 10.36:1 | Link to results |
| Active and focus state | #111111 | #ffdd00 | AA - Pass | AAA - Pass | AA - Pass | AAA - Pass | 14.02:1 | Link to results |
Images
Image - left aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image - right aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - right aligned with caption and border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - left aligned with caption and border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - right aligned with caption and no border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - left aligned with caption and no border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - right aligned without caption and with a border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - left aligned without caption and with a border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - right aligned without caption or border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Image caption - left aligned without caption or border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt lorem finibus velit efficitur blandit. Praesent elementum in est non bibendum. Donec nec elit fermentum, sodales purus non, molestie elit. Nunc interdum purus est, non sagittis massa posuere eu. Integer quis ex vel lorem pulvinar fermentum. Aenean rutrum convallis nisl posuere euismod. Sed lacus ipsum, elementum ut sapien sagittis, feugiat lobortis arcu. Aliquam accumsan arcu sit amet felis consequat, id sodales urna scelerisque.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id convallis libero, vitae mollis est. Curabitur efficitur euismod lacus, lobortis consectetur dolor consectetur non. Curabitur venenatis ipsum id diam dignissim sagittis. Suspendisse nec purus consequat, ultrices mauris quis, facilisis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dignissim magna vel venenatis. Vivamus ut sapien mauris. Vivamus ultrices, metus in sollicitudin accumsan, arcu dolor ultricies leo, vel ullamcorper urna sem ut felis. Morbi venenatis fermentum elit eu fermentum. Nam ullamcorper faucibus tellus, eu luctus tortor consectetur nec. Proin fermentum justo et risus condimentum, nec euismod mi interdum. Sed tortor ligula, efficitur ut sollicitudin ut, pulvinar nec nibh. Vestibulum at urna vel nunc finibus ultrices.
Links
Typography
| Example | Font family | Font size |
|---|---|---|
This is a H1 header example | "lato",Arial,Helvetica,sans-serif | 2.5em/40px |
This is a H2 header example | "lato",Arial,Helvetica,sans-serif | 2em/32px |
This is a H3 header example | "lato",Arial,Helvetica,sans-serif | 1.5em/24px |
This is a H4 header example | "lato",Arial,Helvetica,sans-serif | 1.25em/20px |
This is a H5 header example | "lato",Arial,Helvetica,sans-serif | 1.25em/20px |
This is a H6 header example | "lato",Arial,Helvetica,sans-serif | 1.25em/20px |
| This is a paragraph and lists text example | "open-sans", Arial, Helvetica, sans-serif; | 1.125em/18px |
Headers
This is a H1 header example
This is a H2 header example
This is a H3 header example
This is a H4 header example
This is a H5 header example
This is a H5 header example
Paragraph text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam nulla quis urna porta blandit vitae sed elit. Nulla congue non ipsum nec scelerisque. Quisque sed finibus massa, quis gravida magna. Phasellus posuere facilisis purus, non elementum tortor euismod sed. Etiam id ullamcorper nisi. Donec porta condimentum sem sit amet dapibus. Suspendisse tempus eleifend ultricies. Aliquam luctus est nibh, ut accumsan libero suscipit id. Integer quis pulvinar ante. Nunc pharetra leo eu ex fermentum cursus. Duis lacinia dolor tortor, quis sollicitudin felis condimentum eu. Duis congue libero a elit consequat, quis semper ipsum suscipit. Donec sit amet dolor luctus, suscipit elit placerat, molestie ante.
Lists
Unordered list
- List item 1
- List item 2
- List item 3
- List item 4
Ordered list
- List item 1
- List item 2
- List item 3
- List item 4
Nested unordered list
- List item 1
- List item 2
- List item 1
- List item 2
- List item 3
- List item 4
- List item 3
- List item 4
Nested ordered list
- List item 1
- List item 2
- List item 1
- List item 2
- List item 3
- List item 4
- List item 3
- List item 4
Form classes
Additional Styling Modifier
Add class names to the Additional Styling Modifier to apply custom styles.
Class names
- html
Add to [DISPLAY] HTML to add custom styles. For example, Lists will be styled with bullet points/numbers - small
Add to form legends to reduce the size of the font - highlight
Add highlight style to a fieldset - backlink
Style a button as a back link - payment
Add a £ in front of an input - forward
Add a right chevron to a submit button. For example, a submit button called "Continue" in a hub and spoke form