Tabs

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

html

Copy

<ul class="ds-tabs" role="tablist">
  <li role="tab">
    <span>Label One</span>
  </li>
  <li role="tab" class="--selected">
    <span>Label Two</span>
  </li>
  <li role="tab">
    <span>Label Three</span>
  </li>
</ul>

It is also possible to use this format without the role attributes, but this is not recommended as it will reduce accessibility and prevent some styling options.

Basic non-interactive usage

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<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>

Click to view deprecated code

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.

SDS currently supports a maximum of 16 interactive tabs. Content for each tab is contained inside an html element with role="tabpanel" and a counter __X where X is 1 to 16. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Input placement at root

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

Input inside the ds-tabs container

html

Copy

<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked />
  <input id="tab-b2" type="radio" name="tabs-b" />
  <input id="tab-b3" type="radio" name="tabs-b" />
  <ul role="tablist">
    <li role="tab">
      <label for="tab-b1">Label 1</label>
    </li>
    <li role="tab">
      <label for="tab-b2">Label 2</label>
    </li>
    <li role="tab">
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>
  <div class="__1" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

It is also possible to use this format without the role attributes, but this is not recommended as it will reduce accessibility and prevent some styling options. Content for each tab is contained inside an html element with the classname __content --X where X is 1 to 16. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Input inside the ds-tabs container

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" 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>

Click to view deprecated code

Input placement inside tab

Each tab must contain a label element, which contains the input and label text
All input elements must use the same name attribute unique to that ds-tabs instance.

Input inside the tab

html

Copy

<div class="ds-tabs">
  <ul role="tablist">
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 2</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </label>
    </li>
  </ul>
  <div class="__1" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Input inside the tab

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<div class="ds-tabs">
  <ul>
    <li>
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 2</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </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>

Click to view deprecated code

Disabled tabs

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

Basic non-interactive usage

html

Copy

<ul class="ds-tabs" role="tablist">
  <li role="tab" class="--selected">
    <span>Label One</span>
  </li>
  <li role="tab" class="--disabled">
    <span>Label Two</span>
  </li>
  <li role="tab">
    <span>Label Three</span>
  </li>
</ul>

Basic non-interactive usage

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<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>

Click to view deprecated code

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

Input placement at root

Input inside the ds-tabs container

html

Copy

<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked />
  <input id="tab-b2" type="radio" name="tabs-b" disabled/>
  <input id="tab-b3" type="radio" name="tabs-b" />
  <ul role="tablist">
    <li role="tab">
      <label for="tab-b1">Label 1</label>
    </li>
    <li role="tab">
      <label for="tab-b2">Label 2</label>
    </li>
    <li role="tab">
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>
  <div class="__1" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Input inside the ds-tabs container

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked />
  <input id="tab-b2" type="radio" name="tabs-b" disabled/>
  <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>

Click to view deprecated code

Input placement inside tab

Input inside the tab

html

Copy

<div class="ds-tabs">
  <ul role="tablist">
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" disabled />
        <span>Label 2</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </label>
    </li>
  </ul>
  <div class="__1" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Input inside the tab

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<div class="ds-tabs">
  <ul>
    <li>
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs-b" disabled />
        <span>Label 2</span>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </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>

Click to view deprecated code

Sizing

Horizontal tabs sizing

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<!-- Default -->
<div class="ds-tabs">
  <input id="tab-a1" type="radio" name="tabs-a" checked />
  <input id="tab-a2" type="radio" name="tabs-a" disabled />
  <input id="tab-a3" type="radio" name="tabs-a" />
  <ul>
    <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>
<!-- Small -->
<div class="ds-tabs --small">
  <input id="tab-c1" type="radio" name="tabs-c" 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>

Click to view deprecated code

Vertical tabs sizing

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<!-- Default -->
<div class="ds-tabs --vertical --no-v-indent">
  <input id="tab-a1" type="radio" name="tabs-a" checked />
  <input id="tab-a2" type="radio" name="tabs-a" disabled />
  <input id="tab-a3" type="radio" name="tabs-a" />
  <ul>
    <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>
<!-- Small -->
<div class="ds-tabs --small --vertical --no-v-indent">
  <input id="tab-c1" type="radio" name="tabs-c" 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>

Click to view deprecated code

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

Deprecated This example is deprecated and should be avoided in new implementations.

html

Copy

<div class="ds-tabs --no-wrap">
  <input id="tab-a1" type="radio" name="tabs-a" 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>

Click to view deprecated code

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

html

Copy

<div class="ds-tabs --offset-60">
  <input id="tab-a1" type="radio" name="tabs-a" checked />
  <input id="tab-a2" type="radio" name="tabs-a" />
  <input id="tab-a3" type="radio" name="tabs-a" />
  <ul class="--sticky">
    <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>

Label 1
Label 2
Label 3

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.

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:

html

Copy

<!-- 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.

html

Copy

<!-- 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

html

Copy

<div class="ds-tabs --no-indent">
  <input id="tab-b1" type="radio" name="tabs-b" 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.

html

Copy

<div class="ds-tabs --panel --adjust-height">
  <input id="tab-b1" type="radio" name="tabs-b" 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

html

Copy

<div class="ds-tabs --panel">
  <input id="tab-e1" type="radio" name="tabs-e" 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

Non-interactive vertical tabs

html

Copy

<div class=ds-cols --3">
  <ul class="ds-tabs --vertical" role="tablist">
    <li role="tab">
      <label>Label 1</label>
    </li>
    <li role="tab">
      <label>Label 2</label>
    </li>
    <li role="tab">
      <label>Label 3</label>
    </li>
  </ul>
</div>

Interactive vertical tabs

html

Copy

<div class="ds-tabs --vertical">
  <ul role="tablist">
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 2</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </label>
    </li>
  </ul>
  <div class="__1 ds-rows" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

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

Interactive vertical tabs with panel style

html

Copy

<div class="ds-tabs --vertical --panel">
  <ul role="tablist">
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" checked />
        <span>Label 1</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 2</span>
      </label>
    </li>
    <li role="tab">
      <label>
        <input type="radio" name="tabs-b" />
        <span>Label 3</span>
      </label>
    </li>
  </ul>
  <div class="__1 ds-rows" role="tabpanel">
    <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="__2 ds-rows" role="tabpanel">
    <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="__3" role="tabpanel">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Examples

Vertical style combined with Panel style

html

Copy

<div class="ds-tabs --panel --vertical">
  <input id="tab-g1" type="radio" name="tabs-3" 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

html

Copy

<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 />
    <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-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

html

Copy

<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 />
    <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-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>

Vertical style interactive with inputs at root

html

Copy

<div class="ds-tabs --vertical">
  <input id="tab-f1" type="radio" name="tabs-f" 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>