@ussebastian/kitdigital/docs/components/content/tabs.html

Kit Digital de la Universidad San Sebastián

<section class="w-100">
  <div class="uss-tab">
    <ul class="uss-tab__nav">
      <li class="uss-tab__nav-item">
        <button aria-current="page" class="uss-tab__nav-link active" data-uss-tabtarget="01">
          Selector de tab #1
        </button>
      </li>
      <li class="uss-tab__nav-item">
        <button aria-current="page" class="uss-tab__nav-link" data-uss-tabtarget="02">
          Selector de tab #2
        </button>
      </li>
      <li class="uss-tab__nav-item">
        <button aria-current="page" class="uss-tab__nav-link" data-uss-tabtarget="03">
          Selector de tab #3
        </button>
      </li>
    </ul>
    <div class="uss-tab__body p-20">
      <div class="uss-tab__body-content" id="01" data-uss-tab="01" data-uss-show>
        <p>Contenido del tab #1</p>
      </div>
      <div class="uss-tab__body-content" id="02" data-uss-tab="02">
        <p>Contenido del tab #2</p>
      </div>
      <div class="uss-tab__body-content" id="03" data-uss-tab="03">
        <p>Contenido del tab #3</p>
      </div>
    </div>
  </div>
</section>