carbon-components/html/tabs/tabs.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<nav data-tabs class="bx--tabs" role="navigation">
  <div class="bx--tabs-trigger" tabindex="0">
    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
  </div>
  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
      <li class="bx--tabs__nav-item bx--tabs__nav-item--selected " data-target=".tab-1" role="presentation" >
        <a tabindex="0" id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab label 1</a>
      </li>
      <li class="bx--tabs__nav-item " data-target=".tab-2" role="presentation" >
        <a tabindex="0" id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2">Tab label 2</a>
      </li>
      <li class="bx--tabs__nav-item " data-target=".tab-3" role="presentation" >
        <a tabindex="0" id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3">Tab label 3</a>
      </li>
      <li class="bx--tabs__nav-item  bx--tabs__nav-item--disabled " data-target=".tab-4" role="presentation" >
        <a tabindex="0" id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4">Tab label 4</a>
      </li>
  </ul>
</nav>
<!-- The markup below is for demonstration purposes only -->
<div>
    <div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1" aria-hidden="false">
      <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for first tab goes here.</p>
    </div>
    <div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2" aria-hidden="true" hidden>
      <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for second tab goes here.</p>
    </div>
    <div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3" aria-hidden="true" hidden>
      <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for third tab goes here.</p>
    </div>
    <div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4" aria-hidden="true" hidden>
      <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for fourth tab goes here.</p>
    </div>
</div>