Here we have an example of the new accessible accordion content control.
Accordions break long content into smaller, labeled sections so users can scan headings and only open what they need—reducing overwhelm on content-heavy pages (like FAQs, documentation, and help centers).
By letting users expand only relevant questions, accordions reduce scrolling and make it quicker to locate specific information—especially on mobile where screen space is limited.
They group multiple Q&As into a consistent, predictable structure (question = header, answer = panel), which improves information hierarchy and makes the content easier to navigate.
They keep pages compact by hiding details until requested, helping maintain a clean design while still providing comprehensive information when users want it.
When users can progressively reveal details, they’re more likely to stay oriented and continue through the content—supporting self-service behavior (e.g., troubleshooting steps, policy clarifications, onboarding guidance).
Highlight Blocks
Below are all of the possible colour choices for the new highlight block controls.
Option 1
This is a highlight block using the following colours:
Background: #d1dde6
Text: #000033
Option 2
This is a highlight block using the following colours:
Background: #3063b0
Text: #ffffff
Option 3
This is a highlight block using the following colours:
Background: #000033
Text: #ffffff
Option 4
This is a highlight block using the following colours:
Background: #006272
Text: #ffffff
Option 5
This is a highlight block using the following colours:
Background: #80225f
Text: #ffffff
Option 6
This is a highlight block using the following colours:
Background: #c24a17
Text: #ffffff
Option 7
This is a highlight block using the following colours:
Background: #ccdd99
Text: #000033
Option 8
This is a highlight block using the following colours:
Background: #ff9900
Text: #000033
Option 9
This is a highlight block using the following colours:
Background: #fdb7b6
Text: #000033
Quote blocks
Here we have a selection of quotes with the various options selected.
"Qualifications Wales is the independent regulator of non-degree qualifications in Wales.
Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding."
Qualifications Wales
Qualifications Wales is the independent regulator of non-degree qualifications in Wales.
Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding.
Qualifications Wales
Qualifications Wales is the independent regulator of non-degree qualifications in Wales.
Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding.
Qualifications Wales
"Qualifications Wales is the independent regulator of non-degree qualifications in Wales. Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding."
Qualifications Wales
CTA section & button update
Here we can see the results of the CTA section & button update - now with an increased range of colour options.
We have also changed the content layout to be stacked with the button right aligned rather than the current 2-column approach. This was agreed to be the most succint way to fix the range of issues we had with certain content configurations.
It's important to note that there is a possibilty for the content editors to create a section with non-compliant colour contrast as we have not set any validation on the selected colours.
Please refer to the accessibilty report for guidance.
This is the new and improved CTA section - now with an increased range of colour options.
This is another improved CTA section albeit with a rather long and drawn out block of text. This is because we want to show you how the section reacts to larger amounts of text. You will also see that the accompanying link will center align iteslf vertically on desktop and horizontally on smaller screens.
Below we have a few examples of stand alone CTA buttons - these can be configured in the same way as the CTA section and carry the same warning that they can be configured in a way that would fail colour contrast tests. Please refer to the accessibilty report for guidance.
We have introduced the width options of 100% or auto which can be seen below:
In order to best address the need of a 50% width button we have decided to remove the required content validation on 2 column controls. This allows you to add a button to either column and will react to the different screen sizes in the exact same way as all other 50% content.
We've also ensured that if the content is empty in either column - then we don't output any html to avopid any unwanted empty spaces.
This is what the accordion looks like in a 50% column
This is what the accordion looks like in a 50% column
This is what the accordion looks like in a 50% column
Qualifications Wales is the independent regulator of non-degree qualifications in Wales.
Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding.
Qualifications Wales
Option 9
This is a highlight block using the following colours:
Background: #fdb7b6
Text: #1c1d43
This is the new and improved CTA section - now with an increased range of colour options.
Here is some rich text content with a link to the homepage as well as some lorem ipsum for good measure.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus condimentum turpis venenatis mattis. Suspendisse aliquet rhoncus nibh, sit amet venenatis mi. Etiam mollis nibh sed odio eleifend sodales. Donec id pretium est, non laoreet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae varius sem. Morbi dolor risus, semper ac venenatis et, porta a massa. Vestibulum non tortor ut erat vulputate sagittis.
This is what the accordion looks like in a 50% column
This is what the accordion looks like in a 50% column
This is what the accordion looks like in a 50% column
Qualifications Wales is the independent regulator of non-degree qualifications in Wales.
Learners are at the heart of what we do, and we want them to be confident that their qualifications are a fair, trusted and valued record of their knowledge, skills and understanding.
Qualifications Wales
Option 1
This is a highlight block using the following colours:
Background: #ccd6dd
Text: #1c1d43
This is another improved CTA section albeit with a rather long and drawn out block of text. This is because we want to show you how the section reacts to larger amounts of text. You will also see that the accompanying link will center align iteslf vertically on desktop and horizontally on smaller screens.
Here is some rich text content with a link to the homepage as well as some lorem ipsum for good measure.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus condimentum turpis venenatis mattis. Suspendisse aliquet rhoncus nibh, sit amet venenatis mi. Etiam mollis nibh sed odio eleifend sodales. Donec id pretium est, non laoreet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae varius sem. Morbi dolor risus, semper ac venenatis et, porta a massa. Vestibulum non tortor ut erat vulputate sagittis.
