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.
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.
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.
For the filled text field all you need to do is use the
classes .text-field
and .text-field--filled
.