Tabs

Tabs display only one piece of information at a time.

TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet eget lectus eu congue. Nam finibus urna eget nisl aliquam, in dictum ligula feugiat. Donec mollis ligula purus, et interdum velit bibendum eget. Aliquam magna diam, tristique eu libero nec, sagittis finibus sapien. Cras a ex ultricies, faucibus elit sagittis, maximus nisi. Donec quis arcu sapien.
TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.
TAB 3 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus. Quisque sed augue porta, facilisis felis vitae, cursus mi. Nullam mollis magna eget tincidunt mollis. Sed suscipit placerat ultricies. Sed eget lorem et ipsum ultricies congue eu a enim. Nam quis ex nec lorem dignissim suscipit eu ut felis. Vivamus molestie felis id purus congue, vel ultrices sem molestie.

Code

The tab container must have a class with a specific name that starts with .tab, ie .tab-demo along with the generic .tabs class.

Each separate tab must follow the markup and class structure below and have a specific number.

You must use the tabs mixin and specify the number of tabs and tab name. You can find this mixin in the tabs file with a comment next to it explaining it.

				
<div class="card g--8 tabs tab-demo-name">
  <input type="radio" name="tabs" id="tab1" checked>
  <div class="tab-label-content" id="tab1-content">
    <label for="tab1">Tab 1</label>
    <div class="tab-content">TAB 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet eget lectus eu congue.</div>
  </div>

  <input type="radio" name="tabs" id="tab2">
  <div class="tab-label-content" id="tab2-content">
    <label for="tab2">Tab 2</label>
    <div class="tab-content">TAB 2 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus.</div>
  </div>

  <input type="radio" name="tabs" id="tab3">
  <div class="tab-label-content" id="tab3-content">
    <label for="tab3">Tab 3</label>
    <div class="tab-content">TAB 3 - Quisque egestas, purus in tempor vulputate, diam augue mollis quam, quis elementum ipsum ex a risus.</div>
  </div>

  <div class="slide slide-demo"></div>
</div>