Accordion on White
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Narrower row (Row Width 75%)
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Narrower row (Row Width 50%)
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Accordion on Light Blue 3
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Accordion on Dark Blue 2
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Multiple open allowed
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
Two column row
It shows a list of collapsible panels. Click a heading to reveal its answer. Useful for FAQs, specifications and any content that benefits from being scannable.
Yes. It can be placed in one, two, three and four column rows as well as full width rows. In a full width row it keeps its own container so it lines up with the rest of the page.
- Works in every row type
- Adapts to every theme
Each heading is a real button with aria-expanded and aria-controls, it can be operated with Tab, Enter and Space, and the focus outline adapts to the section theme.
The accordion sits in the left column of a two column row. This rich text block is here to show how it lines up with a sibling component.
Narrow column
A long unbroken word in the title, to show that it wraps instead of overflowing a narrow column.
A short answer.
Second column.