Tabs organize content into groups at the same level of hierarchy. Norbielink uses primary tabs with an underline indicator. The active indicator uses #A614C3 (Purple) for all tab variants.
Variants
Two layout variants — both using the purple indicator. Document tabs and section navigation tabs share the same active color.
Purple indicator — Document tabs
Active tab content area
Purple indicator — Section tabs
Active tab content area
Tab item states
Each tab item has three interactive states. Only one tab can be active at a time.
Specs
| Property | Value |
|---|---|
| Tab height | 44px (12px top + bottom padding) |
| Tab padding horizontal | 28px |
| Font | 14px / SemiBold 600 / Montserrat |
| Active color | color.primary (#A614C3) |
| Indicator height | 3px bottom border |
| Container border | 2px solid color.outline at bottom |
| Rest color | gray-400 |
| Dark active | Same teal / purple indicator, text matches |
| Dark rest | rgba(white, 45%) |