Usage notes:
- FAQs: accordions are the primary component used for FAQ blocks across the site
- Service offerings: typically used as a two-column block
- Nielsen Norman Group has great write-ups on best use cases for accordions
Placement:
- Accordions can be a standalone element, taking up 8 columns to ensure a comfortable line length for reading.
- As an element within a column section, it fits most comfortably in a 4 or 8 column section (2/3rds 1/3rd), or 6 column section (1/2 and 1/2)
- Accordions are also available as a sidebar element — just make sure to keep the content within short
How to build:
- Accordions are made up of two nested parts:
- First you'll add an accordion block. This is the container for all of the individual items and can have intro text, background styling settings, etc.
- In the Accordion block, you'll add Accordion Items which are the individual headline that shows upon the closed accordion and body that is hidden when closed.
- Tip: both the individual Accordion Items and the whole Accordion block can be copied to easily build out accordions on multiple pages.
- In the Intro Text tab, headlines will typically be an H2.
Settings:
- Usually accordions have basic styling are on a white background with dark text but the same block background options are available.