Tabs usage

You can use a couple of different tabs. You can use tabs with text only, text with icons and icons only.

Text only

These are tabs that only contain text.

		
<div class="tabs">
  <a href="#" class="tab">Tab 1</a>
  <a href="#" class="tab">Tab 2</a>
  <a href="#" class="tab">Tab 3</a>
  <a href="#" class="tab">Tab 4</a>
</div>
		
	

Icons only

These are tabs that only contain icons.

		
<div class="tabs">
  <a href="#" class="tab-icon"><i class="material-icons">home</i></a>
  <a href="#" class="tab-icon"><i class="material-icons">home</i></a>
  <a href="#" class="tab-icon"><i class="material-icons">home</i></a>
  <a href="#" class="tab-icon"><i class="material-icons">home</i></a>
</div>
		
	

Icons with text

These are tabs that contain both icons and text.

		
<div class="tabs">
  <a href="#" class="tab-icon-text"><i class="material-icons">home</i><span>Example 1</span></a>
  <a href="#" class="tab-icon-text"><i class="material-icons">home</i><span>Example 2</span></a>
  <a href="#" class="tab-icon-text"><i class="material-icons">home</i><span>Example 3</span></a>
  <a href="#" class="tab-icon-text"><i class="material-icons">home</i><span>Example 4</span></a>
</div>
		
	

Settings

Variable Options Result
$tab-background Variable / color Changes the background color of the tabs
$tab-font-color Variable / color Changes the font color for tabs that are off/ not acitve
$tab-font-on-color Variable / color Changes the font for tabs that are on/ active
$tab-indicator-on-color Variable / color Changes the indicator color on hover and active

Resources