REMOVED

This component has been removed from the Framework. Move to using faq panel.

  • Atom
  • CORE COMPONENT
  • 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:

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team