Anatomy
Tabs are divided into several elements. The component always shows two or more individual tabs, with one active tab at a time. The active tab has an indicator to highlight the state without relying solely on text colour. The tab component usually fills the available space in terms of width - the bottom divider separates the component from the content.
States
Types
In the examples we mainly display the classic tab component, used to switch between related sections of content on the page. However, the component also includes the segmented tab variant.
Segmented tabs have the purpose to switch between views of the same content, for example a list vs map view, instead of switching between related sections of content.
