Use the accordion component to create a scannable, expandable checklist or step-by-step list for users.
When a user clicks on an item, it expands to reveal text or media contents.
The accordion component fills the full width of the available content area on the live page.
The numbered style of accordion displays a sequential number on each accordion segment title. Numbered accordions should only be used for procedural-type instructions where the order of doing things is important.
How to build accordions
Accordions can be embedded into the body content area of any landing page.
To build an accordion:
- Click the Component type dropdown and select Accordion. Click you the Add another component button.
- What you put in the Accordion title will display on the page as an H2. Enter a descriptive heading. If you don't want a heading to display on the page above the accordion, leave this field blank.
- On the Accordion style dropdown, choose Basic or Numbered. Only use numbered accordions for procedural-type instructions where the order of doing things is important.
- Enter your first accordion subheading in the Item name field. This is what the user will see before they click, so make sure it's a clear description of the information that will be hidden. If you're using numbered accordions, use a verb and write it as an instruction,
- Enter the content that will be hidden in the Accordion content section:
- Click the Add another component button to add another section in the accordion. Fill in the Item name and Item content sections. (Accordions should have at least 2 pieces of accordion content.)
Accordion image dimensions
If you are going to embed images in accordion content, use these image dimensions:
- Landscape image: maximum 818 wide
- Portrait image: maximum 400 high
Reviewed 30 March 2021