Tabs are grouped sets of hide/show panels. Use them to group and simplify large amounts of content such as product information.
Tabs
Default tabs: See Visual design for the usage recommendations for the default style. Tabs can appear both ranged to the right, or justified.
Lego tabs: See Visual design for the usage recommendations for the lego style. Tabs can appear both ranged to the right, or justified.
Responsive tabcordion: This a responsive component that can render as either a tabs 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 Tabs component has two modes:
- Tabs – traditional horizontal tabs, allowing only one content panel to be visible at a time, by selecting the relevant tab.
- Tabcordion – a responsive combination of accordions and tabs.
‘Tabcordion’ is the term we use to describe responsive tabs. When using a tabs 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 Tabs 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
Tabs and Accordions 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 tabs are 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.