Tab
1. What does the component do?
It is used to structure the display of data and forms.
2. When should the component be used?
- When switching between different aspects within the same context.
- When the content of various aspects cannot be seen at the same time by the user.
3. Rules
- There are at least two tabs.
- The first tab is always selected by default.
- The tab names are always single-line.
- The tab name should be as simple and concise as possible so that the themes can be quickly understood.
- If the tab is too long for the viewport, the other tabs can be reached with a horizontal scrollbar (desktop) or by swiping (tablet/mobile).
- Another tab module is not permitted within a tab (tab-in-tab).
4. Variants and statuses
The component has the following statuses:
- Active
- Inactive
- Hover
- Focused
4.1 Standard
Design specification
Code specification
4.2 With quantity indicator
- The quantity indicator provides information about how many entries a list in the content of the tab shows.
- The quantity indicator only contains numbers and is a maximum of three digits.