Accordion Container & Accordion Item

The Accordion Container and Accordion Item components are designed to create collapsible content sections for your web pages. The Accordion Container manages the functionality, allowing you to configure whether it is open or closed by default, the animation style and speed, and whether the page scrolls to the opened section. You can also adjust the spacing above and below the accordion. Accordion Items are placed inside the container and let you define the text that will appear as the clickable title for each section. These components make it easy to organize content into expandable sections, helping users navigate information efficiently.

Example

Accordion Number 1

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.

Accordion Number 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Accordion Number 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

According Container Settings

Start state

Start state: None 1

Start state: None 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Start state: All closed 1

Start state: All closed 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Start state: First open 1

Start state: First open 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Transition

Transition: Slide down 1

Transition: Slide down 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Transition: Fade 1

Transition: Fade 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Transition: None 1

Transition: None 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Transition Speed

Transition speed: Extra fast (100ms)

Transition speed: Fast (400ms)

Transition speed: Medium (700ms)

Transition speed: Slow (1000ms)

Transition speed: Extra slow (1300ms)

Behavior

Scroll to Open 1

Scroll to Open 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Create # URL 1

Create # URL 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Accordion Container Styling Options

Apparently, this functionality was never built out... Expect these options to be removed in the future.

Style: Default (white)

Style: Muted (grey)

Style: Primary (brand red)

Style: Secondary (teal/blue)

Style: Tertiary (dark grey)

Style: Gradient

Margin Bottom

Margin Bottom: None

Margin Bottom: X-Small

Margin Bottom: Small

Margin Bottom: Medium

Margin Bottom: Large

Margin Bottom: X-Large

the end

Margin Top

the end

Usage

Do

Ensure the most important or frequently accessed content is set to open by default, if relevant.
Use clear and concise text for the clickable panel titles to help users understand what’s inside.
Organize related information logically under each accordion item to improve readability.
Limit the number of items within an accordion to avoid overwhelming users with too many sections.
Choose an animation speed that balances smoothness with responsiveness.

Don't

Avoid adding too many accordion items in a single container, which can clutter the page and overwhelm users.
Don’t overload a single accordion item with too much content; break it into smaller sections if needed.
Don’t rely solely on the accordion for critical content; make sure important information is easily accessible elsewhere if needed.
Avoid using the accordion for content that requires frequent user interaction, such as forms or detailed inputs.
Refrain from placing critical content at the bottom of a long accordion list, where users might not notice it.

Accordion Container & Accordion Item

Gloss Examples and Webmaster Resources

Example

According Container Settings

Start state

Transition

Transition Speed

Behavior

Accordion Container Styling Options

Margin Bottom

Margin Top

Usage

Do

Don't