Skip to content
MENU

Soracom

Design System

Tabs

Displays a tab bar style list of menu items and contents

ds-tabs works inside ds-group containers, and adjusts appropriately if it is the first-child of the group (with no group title), follows a group title, or inline with mixed content

Options 

Basic usage 

ds-tabs can be implemented as pure decoration by using the following format. When used like this, any interactive highlighting of the current selected tab, or switching of the tab contents needs to be implemented by another means (i.e. javascript).

Using this method, the currently selected tab can be highlighted by adding --selected to the list item.

When used in this format, the contents of the <li> can be any element such as a <span>, <div>, <p> or <a>.
Basic non-interactive usage
<ul class="ds-tabs">  
  <li>
    <span>Label One</span>
  </li>
  <li class="--selected">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-tabs">  
  <li>
    <span>Label One</span>
  </li>
  <li class="--selected">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>

Interactive tabs 

Using the following html structure, ds-tabs will also handle the interactive highlighting of the current selected tab and switching of the tab content.

Each input on a page requires a unique id with the same value used in the matching <label for=""> element.
All inputs within a ds-tabs must use the same name element unique to that ds-tabs instance.
Each tab requires a matching radio input, and the order of the inputs must match the order of the li elements.
SDS currently supports a maximum of 10 tabs

Content for each tab is contained inside an html element with the classname __content --X where X is 1 to 10. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Example with simple content
<div class="ds-tabs">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul class="">
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul class="">
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
Example with mixed content
<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Disabled tabs 

A non-interactive tab can be disabled by setting the tab to --disabled.

Basic non-interactive usage
<ul class="ds-tabs">  
  <li class="--selected">
    <span>Label One</span>
  </li>
  <li class="--disabled">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-tabs">  
  <li class="--selected">
    <span>Label One</span>
  </li>
  <li class="--disabled">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>

An interactive tab can be disabled by setting the radio input to disabled.

Example with simple content
<div class="ds-tabs">
  <input id="tab-c1" type="radio" name="tabs-c" checked="checked"/>
  <input id="tab-c2" type="radio" name="tabs-c" disabled/>
  <input id="tab-c3" type="radio" name="tabs-c"/>
  <ul>
    <li>
      <label for="tab-c1">Label 1</label>
    </li>
    <li>
      <label for="tab-c2">Label 2</label>
    </li>
    <li>
      <label for="tab-c3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs">
  <input id="tab-c1" type="radio" name="tabs-c" checked="checked"/>
  <input id="tab-c2" type="radio" name="tabs-c" disabled/>
  <input id="tab-c3" type="radio" name="tabs-c"/>
  <ul>
    <li>
      <label for="tab-c1">Label 1</label>
    </li>
    <li>
      <label for="tab-c2">Label 2</label>
    </li>
    <li>
      <label for="tab-c3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Tab bar 

Tab wrapping 

By default, tabs will wrap to a new row if they do not fit on a single row. To keep all tabs on a single row and allow the label text to wrap instead use --no-wrap. Note: At screen sizes less than 680px tabs will wrap to a new row if required.

Example with simple content
<div class="ds-tabs --no-wrap">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul>
    <li>
      <label for="tab-a1">Example with mixed content 1</label>
    </li>
    <li>
      <label for="tab-a2">Example with mixed content Example with mixed content 2</label>
    </li>
    <li>
      <label for="tab-a3">Example with mixed content 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --no-wrap">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul>
    <li>
      <label for="tab-a1">Example with mixed content 1</label>
    </li>
    <li>
      <label for="tab-a2">Example with mixed content Example with mixed content 2</label>
    </li>
    <li>
      <label for="tab-a3">Example with mixed content 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Sticky tab bar 

The tab bar can be made sticky by adding the class --sticky. The offset position can be controlled by setting an offset amount like --x where x is 0–180 in increments of 10, for example --60

<div class="ds-tabs --sticky --60">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul class="">
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="ds-tabs --sticky --60">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul class="">
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Content panels 

Content panel indent 

By default all tab content is indented. You can change indenting on all tab content by using the following classes on the ds-tabs container:

<!-- Remove indent from all content panels -->
<div class="ds-tabs --no-indent">...</div>

<!-- Remove vertical (top and bottom) indent from all content panels -->
<div class="ds-tabs --no-v-indent">...</div>

<!-- Remove horizontal (left and right) indent from all content panels -->
<div class="ds-tabs --no-h-indent">...</div>

Additionally, you can control indenting of individual content panels by using the following classes on the __content element. These classes will override the classes set on the parent ds-tabs container.

<!-- Add indent to a content panel -->
<div class="__content --1 --indent">...</div>

<!-- Remove indent from a content panel -->
<div class="__content --1 --no-indent">...</div>

<!-- Add vertical (top and bottom) indent to a content panel -->
<div class="__content --1 --v-indent">...</div>

<!-- Remove vertical (top and bottom) indent from a content panel -->
<div class="__content --1 --no-v-indent">...</div>

<!-- Add horizontal (left and right) indent to a content panel -->
<div class="__content --1 --h-indent">...</div>

<!-- Remove horizontal (left and right) indent from a content panel -->
<div class="__content --1 --no-h-indent">...</div>
Example --no-indent for all content except the first tab
<div class="ds-tabs --no-indent">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1 --indent">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --no-indent">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1 --indent">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Content panel height 

By default ds-tabs will be a fixed height equal to the height of the largest content panel. To allow the height to change based on the height of the currently visible panel, use --adjust-height.

<div class="ds-tabs --panel --adjust-height">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --panel --adjust-height">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Styles 

Custom styles exist for specific use cases.

Panel style 

Panel style provides additional styling to the container, plus does not by default indent the tab contents. Individual tab contents can be indented using the class __content --indented.

Example with mixed content
<div class="ds-tabs --panel">
  <input id="tab-e1" type="radio" name="tabs-e" checked="checked"/>
  <input id="tab-e2" type="radio" name="tabs-e"/>
  <input id="tab-e3" type="radio" name="tabs-e"/>
  <ul>
    <li>
      <label for="tab-e1">Label 1</label>
    </li>
    <li>
      <label for="tab-e2">Label 2</label>
    </li>
    <li>
      <label for="tab-e3">Label 3</label>
    </li>
  </ul>
  <div class="__content --1 --no-indent">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --panel">
  <input id="tab-e1" type="radio" name="tabs-e" checked="checked"/>
  <input id="tab-e2" type="radio" name="tabs-e"/>
  <input id="tab-e3" type="radio" name="tabs-e"/>
  <ul>
    <li>
      <label for="tab-e1">Label 1</label>
    </li>
    <li>
      <label for="tab-e2">Label 2</label>
    </li>
    <li>
      <label for="tab-e3">Label 3</label>
    </li>
  </ul>
  <div class="__content --1 --no-indent">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
</div>

Vertical style 

Vertical style can be combined with other options above including panel style and use within groups.

<div class="ds-tabs --vertical --no-v-indent">
  <input id="tab-f1" type="radio" name="tabs-f" checked="checked"/>
  <input id="tab-f2" type="radio" name="tabs-f"/>
  <input id="tab-f3" type="radio" name="tabs-f"/>
  <ul>
    <li>
      <label for="tab-f1">Label 1</label>
    </li>
    <li>
      <label for="tab-f2">Label 2</label>
    </li>
    <li>
      <label for="tab-f3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1 ds-rows">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --vertical --no-v-indent">
  <input id="tab-f1" type="radio" name="tabs-f" checked="checked"/>
  <input id="tab-f2" type="radio" name="tabs-f"/>
  <input id="tab-f3" type="radio" name="tabs-f"/>
  <ul>
    <li>
      <label for="tab-f1">Label 1</label>
    </li>
    <li>
      <label for="tab-f2">Label 2</label>
    </li>
    <li>
      <label for="tab-f3">Label 3</label>
    </li>
  </ul>  
  <div class="__content --1 ds-rows">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
  <div class="__content --3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Examples 

Vertical style combined with Panel style 

<div class="ds-tabs --panel --vertical">
  <input id="tab-g1" type="radio" name="tabs-3" checked="checked"/>
  <input id="tab-g2" type="radio" name="tabs-3"/>
  <input id="tab-g3" type="radio" name="tabs-3"/>
  <ul>
    <li>
      <label for="tab-g1">Label 1</label>
    </li>
    <li>
      <label for="tab-g2">Label 2</label>
    </li>
    <li>
      <label for="tab-g3">Label 3</label>
    </li>
  </ul>
  <div class="__content --1 --no-indent">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tabs --panel --vertical">
  <input id="tab-g1" type="radio" name="tabs-3" checked="checked"/>
  <input id="tab-g2" type="radio" name="tabs-3"/>
  <input id="tab-g3" type="radio" name="tabs-3"/>
  <ul>
    <li>
      <label for="tab-g1">Label 1</label>
    </li>
    <li>
      <label for="tab-g2">Label 2</label>
    </li>
    <li>
      <label for="tab-g3">Label 3</label>
    </li>
  </ul>
  <div class="__content --1 --no-indent">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="__content --2">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="__content --3 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <div class="ds-input">
        <input type="text" name="test"/>
        <div class="ds-text --addon-light">Text</div>
      </div>
    </div>
  </div>
</div>

Vertical style within a group 

<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs --vertical">
    <input id="tab-h1" type="radio" name="tabs-h" checked="checked"/>
    <input id="tab-h2" type="radio" name="tabs-h"/>
    <input id="tab-h3" type="radio" name="tabs-h"/>
    <ul>
      <li>
        <label for="tab-h1" class="ds-text --icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-h2" class="ds-text --icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-h3" class="ds-text --icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="__content --1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="__content --2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <div class="ds-input">
          <input type="text" name="test"/>
          <div class="ds-text --addon-light">Text</div>
        </div>
      </div>
    </div>
    <div class="__content --3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs --vertical">
    <input id="tab-h1" type="radio" name="tabs-h" checked="checked"/>
    <input id="tab-h2" type="radio" name="tabs-h"/>
    <input id="tab-h3" type="radio" name="tabs-h"/>
    <ul>
      <li>
        <label for="tab-h1" class="ds-text --icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-h2" class="ds-text --icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-h3" class="ds-text --icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="__content --1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="__content --2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <div class="ds-input">
          <input type="text" name="test"/>
          <div class="ds-text --addon-light">Text</div>
        </div>
      </div>
    </div>
    <div class="__content --3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>

Inside group 

ds-tabs can be implemented inside a ds-group container:

Interactive tabs example with mixed content
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs">
    <input id="tab-d1" type="radio" name="tabs-d" checked="checked"/>
    <input id="tab-d2" type="radio" name="tabs-d"/>
    <input id="tab-d3" type="radio" name="tabs-d"/>
    <ul>
      <li>
        <label for="tab-d1" class="ds-text --icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-d2" class="ds-text --icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-d3" class="ds-text --icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="__content --1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="__content --2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <div class="ds-input">
          <input type="text" name="test"/>
          <div class="ds-text --addon-light">Text</div>
        </div>
      </div>
    </div>
    <div class="__content --3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs">
    <input id="tab-d1" type="radio" name="tabs-d" checked="checked"/>
    <input id="tab-d2" type="radio" name="tabs-d"/>
    <input id="tab-d3" type="radio" name="tabs-d"/>
    <ul>
      <li>
        <label for="tab-d1" class="ds-text --icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-d2" class="ds-text --icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-d3" class="ds-text --icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="__content --1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="__content --2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <div class="ds-input">
          <input type="text" name="test"/>
          <div class="ds-text --addon-light">Text</div>
        </div>
      </div>
    </div>
    <div class="__content --3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>