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>.
<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 16 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.
<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>
<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><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.
<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.
<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>Sizing
<!-- Default -->
<div class="ds-tabs">
<input id="tab-a1" type="radio" name="tabs-a" checked="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="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><!-- Default -->
<div class="ds-tabs --vertical --no-v-indent">
<input id="tab-a1" type="radio" name="tabs-a" checked="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="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.
<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 --offset-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="--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>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.
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><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>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.
<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><div class=ds-cols --3">
<ul class="ds-tabs --vertical">
<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>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>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-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:
<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-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>