FAQ Accordions - Usage
Basic Guidelines
The Accordions within the section should always use 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 FAQ Accordions component has an optional Text Link at the bottom that can be used to 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.
Variants Usage
Thumbnails within Accordion titles are not supported in FAQ accordions by design. This ensures FAQs remain quick and easy for users to read and understand. Please do not enable thumbnails in Figma, while the option appears due to the nested component’s properties, it is not supported in React and will not be implemented.
FAQ Accordions only support text in the title.
Thumbnails cannot be used in the FAQ Accordion.
Content Guidance
Customised content - Set up in Figma
The layer 'Replaceable Content Area' within the expanded area of each of the individual Accordion components 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.
Accordion structure
Each Accordion within the FAQ Accordion section should only contain one question and answer. If you have many FAQs, you may want to consider having only the six most 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
Sections are always placed at full width of the viewport.
Mobile
Desktop
The FAQ Accordion inside the section will only expand up to a width of 996px to span 10 columns on a large viewport.
The example below is downscaled proportionally for illustration purposes.
