menu
Tabs
person
code Github

Tabs

There are a few varieties of tabs. You have fixed and scrollable tabs. But there are also text only tabs or text and icon tabs.

Fixed

For any tabs to work you need to start with the class .tabs.

For the text only tab you also need to specify the class .tabs--text-only on the tabs. The tab it self needs the class .tabs__tab. For making a tab active add the class .tabs__tab--active. The content of the tab needs wrapped in a class .tabs__content.

For the icon only tab you almost need the same class. However the tabs now need the class .tabs--icon-only Instead of the class .tabs__content you need to use the class .tabs__icon on an icon.

So for a tab with icon and text you need to use the class .tabs--icon-text on the tabs. From there you can just use class .tabs__icon on an icon and class .tabs__content around the text.

Scrollable

For the filled text field all you need to do is use the classes .text-field and .text-field--filled.