Accordion
Accordions are best used to display long text that can be hidden within panes. We also use accordions for Frequently Asked Questions. Use your discretion on the accordion settings, but we recommend starting with the accordion panes closed.
Example Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper lacus, in tincidunt ex. Cras varius turpis ac tempus congue. Quisque fermentum maximus risus id gravida. Integer ante nulla, vestibulum vitae diam nec, dignissim lobortis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget feugiat sapien. Curabitur lobortis enim vel luctus rhoncus. Maecenas porta pellentesque risus tincidunt condimentum. Quisque ornare pulvinar ipsum eget malesuada.
Nullam blandit magna consequat luctus scelerisque. Integer convallis molestie tincidunt. Integer metus neque, dictum id urna ac, tempus venenatis mauris. In eros erat, posuere eget nunc sit amet, luctus efficitur eros.
- Vestibulum scelerisque venenatis neque quis interdum. Etiam cursus vestibulum nisi et tincidunt. Praesent ac fringilla lacus. Praesent cursus varius aliquet. Suspendisse vel rhoncus turpis, id fermentum eros.
- Phasellus tincidunt, erat id finibus mollis, ligula ligula sagittis nisi, eu convallis risus metus ut odio. Pellentesque ultrices, lorem eget ultricies tempor, ex lectus tincidunt quam, nec ultricies tortor eros sit amet nisl.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut nisi vestibulum, tincidunt lectus a, tempor enim. Sed non nisi ut felis blandit suscipit. Mauris eget enim quam. Quisque in faucibus nisl.
Curabitur pulvinar egestas mollis. Nulla eget eleifend est. Donec fermentum nisl lacus, in varius orci egestas non. Pellentesque feugiat tortor ac congue dictum. Fusce ac nisi ut ex dapibus commodo. Aenean lectus magna, porta ut est id, tristique vestibulum sapien. Sed at ipsum consequat, fermentum nulla eu, finibus purus. Etiam gravida blandit commodo. Suspendisse potenti. Proin mattis ligula et nulla feugiat, in cursus justo interdum. Aliquam nibh nulla, posuere sed nulla a, condimentum fermentum tellus. Aliquam porttitor eu turpis non viverra. Aliquam congue, magna at rhoncus tristique, velit eros mattis libero, sit amet aliquet diam felis a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper lacus, in tincidunt ex. Cras varius turpis ac tempus congue. Quisque fermentum maximus risus id gravida. Integer ante nulla, vestibulum vitae diam nec, dignissim lobortis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget feugiat sapien. Curabitur lobortis enim vel luctus rhoncus. Maecenas porta pellentesque risus tincidunt condimentum. Quisque ornare pulvinar ipsum eget malesuada.
Nullam blandit magna consequat luctus scelerisque. Integer convallis molestie tincidunt. Integer metus neque, dictum id urna ac, tempus venenatis mauris. In eros erat, posuere eget nunc sit amet, luctus efficitur eros. Vestibulum scelerisque venenatis neque quis interdum. Etiam cursus vestibulum nisi et tincidunt. Praesent ac fringilla lacus. Praesent cursus varius aliquet. Suspendisse vel rhoncus turpis, id fermentum eros. Phasellus tincidunt, erat id finibus mollis, ligula ligula sagittis nisi, eu convallis risus metus ut odio. Pellentesque ultrices, lorem eget ultricies tempor, ex lectus tincidunt quam, nec ultricies tortor eros sit amet nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut nisi vestibulum, tincidunt lectus a, tempor enim. Sed non nisi ut felis blandit suscipit. Mauris eget enim quam. Quisque in faucibus nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper lacus, in tincidunt ex. Cras varius turpis ac tempus congue. Quisque fermentum maximus risus id gravida. Integer ante nulla, vestibulum vitae diam nec, dignissim lobortis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget feugiat sapien. Curabitur lobortis enim vel luctus rhoncus. Maecenas porta pellentesque risus tincidunt condimentum. Quisque ornare pulvinar ipsum eget malesuada.
Curabitur pulvinar egestas mollis. Nulla eget eleifend est. Donec fermentum nisl lacus, in varius orci egestas non. Pellentesque feugiat tortor ac congue dictum. Fusce ac nisi ut ex dapibus commodo. Aenean lectus magna, porta ut est id, tristique vestibulum sapien. Sed at ipsum consequat, fermentum nulla eu, finibus purus. Etiam gravida blandit commodo. Suspendisse potenti. Proin mattis ligula et nulla feugiat, in cursus justo interdum. Aliquam nibh nulla, posuere sed nulla a, condimentum fermentum tellus. Aliquam porttitor eu turpis non viverra. Aliquam congue, magna at rhoncus tristique, velit eros mattis libero, sit amet aliquet diam felis a ante.
Nulla venenatis augue non ante semper, vel facilisis neque imperdiet. Sed sem nulla, interdum vel augue ut, ultrices egestas magna.
- Duis efficitur lacinia lacus, et rutrum dolor. Nam pulvinar accumsan imperdiet. Etiam quam quam, dapibus et sapien id, pretium auctor ipsum.
- Pellentesque cursus luctus massa. Aliquam lacus odio, condimentum ut auctor nec, luctus quis justo. Donec fringilla congue orci a aliquam.
- Nulla facilisi. Aliquam laoreet eu leo a egestas. Aenean at hendrerit erat. Nulla efficitur lacinia orci, eget imperdiet justo maximus ut.
[Be sure to leave some space after the accordion, otherwise, the next block of text will bump up underneath it.]
Incorrect Use of Snippets
Sometimes accordion panes can be glitchy with sizing. Make sure all of the panes are the same size width when closed. Below is an exmaple of an accordion with incorrect sizing.
Accordion Pane Title 1
Also, be wary of creating an accordion title pane that is longer than the pane allows or is two-lines deep. Below is an example. If you run into this problem, either place the accordion in a wider row option, or reduce the pane title so that it is only one line. Otherwise, it makes the accordion look jumbled and messy. This is only OK if it is absolutely unavoidable.
Example Title
Accordions can start with the first pane open if the information within it is relatively short, as shown here.
Example bulleted list heading within accordion
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Sed sit amet ullamcorper lacus, in tincidunt ex. Cras varius turpis ac tempus congue.
- Quisque fermentum maximus risus id gravida.
Curabitur pulvinar egestas mollis. Nulla eget eleifend est. Donec fermentum nisl lacus, in varius orci egestas non. Pellentesque feugiat tortor ac congue dictum. Fusce ac nisi ut ex dapibus commodo. Aenean lectus magna, porta ut est id, tristique vestibulum sapien. Sed at ipsum consequat, fermentum nulla eu, finibus purus. Etiam gravida blandit commodo. Suspendisse potenti. Proin mattis ligula et nulla feugiat, in cursus justo interdum. Aliquam nibh nulla, posuere sed nulla a, condimentum fermentum tellus. Aliquam porttitor eu turpis non viverra. Aliquam congue, magna at rhoncus tristique, velit eros mattis libero, sit amet aliquet diam felis a ante.