Tabs

Used to switch between views within the same context.

Tabs

Brand Default Tab3 Brand Default Tab Hover3 Brand Default Tab Focus Tab3

Brand Active Tab3 Brand Active Tab Hover3 Brand Default Tab Focus3

Underline Default Tab3 Underline Default Tab Hover3 Underline Default Tab Focus3

Underline Active Tab3 Underline Active Tab Hover3 Underline Default Tab Focus3

Underline Vertical Default Tab3 Underline Vertical Default Tab Hover3 Underline Vertical Default Tab Focus3

Underline Vertical Active Tab3 Underline Vertical Active Tab Hover3 Underline Vertical Default Tab Focus3

Enclosed Default Tab3 Enclosed Default Tab Hover3 Enclosed Default Tab Focus3

Enclosed Active Tab3 Enclosed Active Tab Hover3 Enclosed Default Tab Focus3

Horizontal Tabs

Brands

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3 Tab 6

Tab 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis facere sint minus id doloremque libero praesentium ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, obcaecati, assumenda autem laborum.

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs brands">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Active Tab Tab 2 Tab 3 Tab 4 3 Tab 5

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs brands full-width">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
  </div>
</div>

Underline

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3 Tab 6

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs underline">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Active Tab Tab 2 Tab 3 Tab 4 3 Tab 5

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs underline full-width">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Enclosed (White)

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3 Tab 6

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs enclosed">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

HTML

<div class="tabs js-tabs">
  <div class="tabs-navs enclosed full-width">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Vertical Tabs

Brands

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3 Tab 6

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs vertical js-tabs">
  <div class="tabs-navs brands">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Underline

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs vertical js-tabs">
  <div class="tabs-navs underline">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>

Enclosed (White)

Active Tab Tab 2 Tab 3 Tab 4 Tab 5 3 Tab 6

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Tab 6

HTML

<div class="tabs vertical js-tabs">
  <div class="tabs-navs enclosed">
    <a href="#tab1" class="tabs-nav active js-tab-link"><i class="fa-regular fa-house"></i> Active Tab</a>
    <a href="#tab2" class="tabs-nav js-tab-link">Tab 2</a>
    <a href="#tab3" class="tabs-nav js-tab-link">Tab 3</a>
    <a href="#tab4" class="tabs-nav js-tab-link">Tab 4</a>
    <a href="#tab5" class="tabs-nav js-tab-link">Tab 5 <span class="tabs-counter">3</span></a>
    <a href="#tab6" class="tabs-nav js-tab-link">Tab 6</a>
  </div>
  <div class="tabs-contents">
    <div class="tabs-content active js-tab-content" id="tab1">
      <h4>Tab 1</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Reiciendis facere sint minus id doloremque libero praesentium 
        ullam omnis voluptatum quas porro veritatis, saepe illo laboriosam harum, 
        obcaecati, assumenda autem laborum.
      </p>
    </div>
    <div class="tabs-content js-tab-content" id="tab2">
      <h4>Tab 2</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab3">
      <h4>Tab 3</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab4">
      <h4>Tab 4</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab5">
      <h4>Tab 5</h4>
    </div>
    <div class="tabs-content js-tab-content" id="tab6">
      <h4>Tab 6</h4>
    </div>
  </div>
</div>