Skip to main content

Paragraph: Accordion

Accordions are a simple way to organize information on a web page. Simply add accordion panels to the container to get started. Each accordion panel will be rendered as closed by default, meaning that the user will only see the title. When the user clicks on the title or the plus sign opener button, the accordion panel will expand and show the accordion's content. This means that the accordion panel's title should be descriptive enough to hint at the content within. It is also good practice to ensure that the accordion panels within an accordion all contain related content.

Grid 2 with Even Widths Sizing

Left Column
Right Column

Grid 2 with Wide Left Sizing

Left Column
Right Column

Grid 2 with Wide Right Sizing

Left Column
Right Column

Grid 3

Left Column
Middle Column
Right Column