FAQ Accordions - Usage
Frequently asked questions
Our team of experts are always here to help. Here are some answers to frequently asked questions, for starters.
Basic Guidelines
The Accordions within the pattern should always be the Default variant. This is already fixed within the Figma component and should not be altered. This is to allow consistency across all of Sky UI for FAQ content.
Accordions within the FAQ Accordion pattern should be kept to the ‘Default’ style.
An example showing the Accordions switched to the ‘Bordered’ style.
Optional Text link component
The Accordion - FAQ component has an optional Text Link at the bottom that can be used link to a separate page that shows all FAQs if there are too many to fit into one section.
The Text Link should not be used as a method to expand to view more FAQs. Unlike Buttons, Text links are used for directions, linking to a different location. It’s better to show all FAQs in one place (on a new page) if there are too many to show in one section. This allows the user to easily browse through all FAQs and navigate back to their journey once complete.
The Text Link is used to navigate to a new page where more FAQs or information can be housed.
The Text Link should not be used as a method to expand to view more FAQs as this is not semantically correct.
FAQ Accordion used with Legal Accordion
It is important that Legal Accordions stand out clearly when used alongside FAQ Accordions. When both are in use, we suggest using a 72px gap between the two, to make sure there is a clear distinction between them.
Desktop
Set up in Figma
The layer ‘Replaceable Content Area’ is set up as a composable component. It can be swapped for a locally created component without the need to detach the Accordion. There is no need to include padding or a background fill in your own locally created component.
To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.
Content Guidance
Each Accordion within the FAQ Accordion pattern should only contain one question and answer. If you have many FAQs, you may want to consider having only the most six frequently asked questions within the component, placing follow up questions on a separate page which can be linked via the Text Link at the bottom of the pattern.
For SEO purposes, only the title of the Accordion is visible, not the content within. This is why it’s important that each FAQ is housed within its own Accordion, otherwise this information won’t be surfaced for users researching for an answer.
There should always be one FAQ per Accordion.
Do not put Accordions within Accordions as this is bad for both accessibility and SEO.
Alignment
The FAQ Accordion must align with the grid system set out in Foundations, with no additional padding. It sits in-line with the rest of the content and always span full width (minus margins) on mobile and tablet.
In a 12-column grid layout the FAQ Accordion sits within the ten centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.
Colour Usage
The headline element for FAQ Accordion can use any brand colour (including text-grey) as well as gradients from the defined accessible Sky colour palette in Foundations.
Using the Accessible version of the Spectrum Gradient.
Using the default version of the Spectrum Gradient which is not accessible on white.