REMOVED
This component has been removed from the Framework. Move to using faq panel.
- Taxonomic name: A-FAQ-LIST
- Added on: v3.0.0 (15/09/17)
- Removed on: v4.0.0 (20/07/18)
FAQ list
In instances where five or fewer questions are required within the context of a particular page, FAQs should be displayed within the contextual help panel as per the example below.
Design and usage
In instances where more content dictates that a dedicated block is required for FAQs, a show / hide display should be used.
-
FAQ content should be:
- Up to date, including information on current or seasonal events where relevant; content should evolve based on what we learn about customer's questions through research and feedback.
- Grouped, with concise titles that reflect their content to aid scanning; titles should be no longer than one line in a desktop view (although this is likely to wrap to at least three lines in a mobile view).
- In an appropriate format - could an illustration or video explanation help?
- Reviewed to feed in to content improvements - if there's a question that's frequently asked, does this indicate a gap in content, or an area where more support is required?
- Do not allow an FAQ question list to span more than eight columns at tablet or desktop screen sizes to ensure readability.
- Must not be used on dark accent colours.
Examples
Interactive example
Code example
<p class="a-list-faq-back-link" aria-hidden="true"><a href="..." class="a-link-icon a-link-icon--back">...</a></p>
<dl class="a-list-definition a-list-faq" data-module="a-list-faq">
<dt class="a-list-faq__question">...</dt>
<dd class="a-list-faq__answer">...</dd>
...
</dl>
Development and test
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.a-list-faq-back-link |
Base style for the FAQ list back link that is shown when a question has been selected | Yes | p |
|
.a-list-faq |
Base style for the FAQ list | Yes | .a-list-definition |
|
.a-list-faq__question |
Base style for each FAQ question | Yes | .a-list-faq > dt |
|
.a-list-faq__answer |
Base style for each FAQ answer | Yes | .a-list-faq > dd |
Component releases
- Added on: v3.0.0 (15/09/17)
- Removed on: v4.0.0 (20/07/18)
Latest update:
- updated: The contextual help organism (blue help bar) has been deprecated and the option to place an FAQ list within it has been removed. Please use the call us panel and faq panel instead.