Accordions are grouped sets of expanding and collapsing panels. Use them to group and simplify large amounts of content such as product information.
Accordion
Default accordion: See Visual design for the usage recommendations for the default style.
Lego accordion: See Visual design for the usage recommendations for the lego style.
Responsive tabcordion: This a responsive component that can render as either a tabset or an accordion, depending on the screen width available. The tabcordion, can appear in either the default or lego style, see Visual design for the usage recommendations for either style.
User experience
The accordion component has two modes:
- Accordion – collapsible content containers, allowing multiple content panels to be visible simultaneously, by selecting the relevant bar.
- Tabcordion – a responsive combination of accordions and Tabs.
‘Tabcordion’ is the term we use to describe a responsive tab set. When using a Tabset in our web applications we typically experience layout issues when the application needs to display on small viewports (phones). Often the tabs won’t fit horizontally in the limited screen size. To remedy this problem, we developed the Tabcordion where the Tabset will turn into an Accordion when viewed on smaller devices (phones).
This component is useful when trying to simplify and group content for users to view when they need it, as opposed to displaying everything at once.
Visual design
Tabset, Accordions and Tabcordions, can have one of two styles applied to them Default and Lego:
The Default style is designed to be subtle and understated while still providing a clear indication of which tab or accordion bar is selected, and its related content. To further reinforce this relationship a transition is used to display related content when a tab or accordion bar is selected. Generous padding provides a larger hit area and important breathing space to provide emphasis without adding noise.
The Lego tabset is designed to be more prominent. This design came out of a project request for a more emphasised component which would also add some brand colour to an otherwise dry, text heavy interface.
Tab sets and accordions are intended to visually group related content. When used correctly with moderate content they do this extremely well. However, if too much content is used it becomes difficult to visualise this relationship as content extends below the viewport.
Dos and don’ts
- Avoid using too much content and consider smaller viewports when designing responsive web apps.
- Avoid changing the styles of Tabs and Accordions (border, colour, size etc )
- Do use Tabs and Accordions on any background (light or dark).
- Avoid making Tab and Accordion labels too long. Although they will wrap the interface will become cluttered very quickly.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.