Accordions
ACCORDIONS: COPY & PASTE
The accordions are available below for copying and pasting in the Visual Editor.
Selection bars are necessary for accordions.
Open the accordion you want by clicking the toggle. If you leave it closed, it will not copy correctly, and Canvas does not allow for automatically open accordions.
Do not delete the selection bars until you are done editing your accordion contents. This will ensure that you don’t accidentally hide content under an accordion that should be out of the accordion.
Start of Selection
Placeholder paragraph so you don’t get stuck in the accordion.
Standard Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the accordion.
End of Selection
Start of Selection
Placeholder paragraph so you don’t get stuck in the accordion.
Small Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the accordion.
End of Selection
Start of Selection
Placeholder paragraph so you don’t get stuck in the accordion.
Dark Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the accordion.
End of Selection
Start of Selection
Placeholder paragraph so you don’t get stuck in the accordion.
Cards Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Placeholder paragraph so you don’t get stuck in the accordion.
End of Selection
ACCORDIONS: INFO & NOTES
Accordions are sections that expand and collapse when a user selects them. They allow you to create content-rich pages without overwhelming users.
Ways you can use accordions in Canvas…
- Add to a Frequently Asked Questions page.
- Present information about multiple items of the same type.
- Add footnotes or further reading.
Notes
- The accordions are designed to make it clear that they can be expanded and collapsed. It’s still a good idea to include a note above them, such as “Click to expand” or “Select for more information.”
- Accordions can contain any content, including design library elements.
- Accordions stack well on top of each other, such as you see on this page. They can also be placed on the page on their own.