Tabs are used to organize content by grouping similar information on the same page.
Tabs states 
<ul class="ptabs states">
    <li class="ptab active">
        <span class="ptab-label">Label</span>
    </li>
    <li class="ptab disabled">
        <span class="ptab-label">Label</span>
    </li>
    <li class="ptab">
        <span class="ptab-label">Label</span>
    </li>
    <li class="ptab active disabled">
        <span class="ptab-label">Label</span>
    </li>
</ul>
Tab group 
<ul class="ptabs">
    <li id="ptab-1" class="ptab active">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-2" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-3" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-3" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-3" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-3" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
    <li id="ptab-3" class="ptab">
        <span class="ptab-label">Label#</span>
    </li>
</ul>
General guidelines
  • Each tab label describes the content it contains. The labels are concise and do not use more than two words.

  • Do not use icons in tab labels.
Structure
1
Selected: Active tab.
2
Unselected: Other available tabs.
3
Divider: Separates the tab navigation and content.