Tabs Stable

With Tabs the user has the ability to switch between different views of similar content easily.

<div class="tabs js-tabs" data-label-more="More…">
  <div class="bare-list tabs__list">
    <a href="#tabs-1" class="tabs__item  is-active">
      System Info
    </a>
    <a href="#tabs-2" class="tabs__item ">
      Upgrades
    </a>
    <a href="#tabs-3" class="tabs__item ">
      Tickets
    </a>
    <a href="#tabs-4" class="tabs__item ">
      Activities
    </a>
    <a href="#tabs-5" class="tabs__item ">
      Contracts
    </a>
    <a href="#tabs-6" class="tabs__item ">
      Documents
    </a>
  </div>
  <div id="tabs-1" class="tabs__panel  is-active">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quia officia eum accusantium tenetur commodi odio totam rem. Illum placeat quae officiis repellendus rerum expedita, quibusdam ducimus reprehenderit cumque ipsum.
  </div>
  <div id="tabs-2" class="tabs__panel ">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda magni perspiciatis asperiores totam harum qui tempore deleniti provident, omnis laudantium facilis dolores aliquam voluptatibus, eveniet earum quae recusandae perferendis consequuntur?
  </div>
  <div id="tabs-3" class="tabs__panel ">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt soluta ratione delectus assumenda iure accusantium sunt earum ad fugit dignissimos totam ipsa nesciunt eveniet consequatur et voluptate, molestiae est a.
  </div>
  <div id="tabs-4" class="tabs__panel ">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae illum accusamus earum explicabo laborum? Omnis accusantium, quaerat vero corporis dignissimos unde assumenda fugit minus nisi vel excepturi, necessitatibus obcaecati laboriosam.
  </div>
  <div id="tabs-5" class="tabs__panel ">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet repellat quaerat reiciendis corporis debitis ipsum quae ducimus natus assumenda, dolore dicta nam vel excepturi! Quidem accusantium amet pariatur odit quam?
  </div>
  <div id="tabs-6" class="tabs__panel ">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias totam labore odit vel temporibus architecto culpa molestias consectetur ratione doloribus voluptates illum natus, eligendi cumque, tempore maiores? Doloribus, quidem amet.
  </div>
</div>