Instructions for adding accordions in the body content section of a page.
Content components
Use the Accordion feature to create a scannable step-by-step list or checklist for readers.
Accordions can also be used to conceal content on long pages where the reader doesn’t need to see the information all at once. For example, General orders or Annual report pages.
Use the Accordion feature to create a scannable step-by-step list or checklist for readers.
Once the accordion is published, an Open all and Close all button will appear on the browser (front-end).
...
Create an accordion
Leave the Accordion title field blank.
For the Accordion style choose either Basic or Numbered..
Accordions should have at least 2 pieces of accordion content.
| Info |
|---|
To view the front-end design of the Accordion component, visit the Ripple design system. |
On this page:
| Table of Contents |
|---|
Add an accordion
When using the Landing page template, scroll down to the Page content section and select Add Component.
...
Here you will be able to populate the following fields
Accordion title: add a heading 2 if you need a heading above your accordions (this isn’t mandatory)
Style: a Standard or Numbered accordion style can be applied to the front-end design
Numbered accordions should only be used for procedural-type instructions where the order is important.
...
Accordion items: add an accordion Item title and Item content. Headings within the Item content section should start from Heading 3.
To add another accordion block, click the Add another component button.
Headings
All accordion headings are set to Heading 2 level.
Any headings within the accordion body text should start at Heading 3.
Accordion image dimensions
Landscape image: maximum 818px wide, no more than 496px high
Portrait image: maximum 400px high