Examples
<div class="e-tabs">
<input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
<label class="e-tabs__title" for="tabs-1-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-1">
<label class="e-tabs__title" for="tabs-1-1">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-2" disabled>
<label class="e-tabs__title" for="tabs-1-2">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-3">
<label class="e-tabs__title" for="tabs-1-3">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div><div class="e-tabs">
<input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
<label class="e-tabs__title" for="tabs-2-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-2" id="tabs-2-1">
<label class="e-tabs__title" for="tabs-2-1">
<span class="e-tabs__separator">
Nested tab
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
<h2>
Nested tab
</h2>
<div class="e-tabs">
<input type="radio" name="tabs-3" id="tabs-3-0" checked="checked">
<label class="e-tabs__title" for="tabs-3-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-1">
<label class="e-tabs__title" for="tabs-3-1">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-2" disabled>
<label class="e-tabs__title" for="tabs-3-2">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-3">
<label class="e-tabs__title" for="tabs-3-3">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
</div>
</div>
</div><div class="e-tabs">
<div class="e-tabs__title">
<a class="e-tabs__separator">
Tab 1
</a>
</div>
<div class="e-tabs__title e-tabs__title-active">
<a class="e-tabs__separator">
Active Tab
</a>
</div>
<div class="e-tabs__title e-tabs__title-disabled">
<a class="e-tabs__separator">
Disabled Tab
</a>
</div>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content e-tabs__panel__content-active">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>.e-tabs-embed
<div class="e-tabs e-tabs-embed">
<input type="radio" name="tabs-4" id="tabs-4-0" checked="checked">
<label class="e-tabs__title" for="tabs-4-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-4" id="tabs-4-1">
<label class="e-tabs__title" for="tabs-4-1">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-4" id="tabs-4-2" disabled>
<label class="e-tabs__title" for="tabs-4-2">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-4" id="tabs-4-3">
<label class="e-tabs__title" for="tabs-4-3">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>.e-tabs-dialogheader
<div class="e-tabs e-tabs-dialogheader">
<input type="radio" name="tabs-5" id="tabs-5-0" checked="checked">
<label class="e-tabs__title" for="tabs-5-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-5" id="tabs-5-1">
<label class="e-tabs__title" for="tabs-5-1">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-5" id="tabs-5-2" disabled>
<label class="e-tabs__title" for="tabs-5-2">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-5" id="tabs-5-3">
<label class="e-tabs__title" for="tabs-5-3">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div><div class="e-tabs">
<div class="e-tabs__title e-tabs__title-active">
<a class="e-tabs__separator">
Tab 1
<span class="e-tabs__badge text-color-warning">
1
<e-icon icon="warning" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
<div class="e-tabs__title">
<a class="e-tabs__separator">
Tab 2
<span class="e-tabs__badge text-color-error">
3
<e-icon icon="e-error" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
<div class="e-tabs__title e-tabs__title-disabled">
<a class="e-tabs__separator">
Tab 3
<span class="e-tabs__badge text-color-warning">
15
<e-icon icon="warning" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content e-tabs__panel__content-active">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>.e-tabs-fullheight
<div style="height: 500px;">
<div class="e-tabs e-tabs-fullheight">
<input type="radio" name="tabs-6" id="tabs-6-0" checked="checked">
<label class="e-tabs__title" for="tabs-6-0">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-6" id="tabs-6-1">
<label class="e-tabs__title" for="tabs-6-1">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-6" id="tabs-6-2" disabled>
<label class="e-tabs__title" for="tabs-6-2">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-6" id="tabs-6-3">
<label class="e-tabs__title" for="tabs-6-3">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content" style="background:rgba(120, 20, 0, .6); height: 100%;">
<span style="color: #fff;">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</span>
</div>
<div class="e-tabs__panel__content" style="background:rgba(60, 40, 0, .6); height: 100%;">
<span style="color: #fff;">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</span>
</div>
<div class="e-tabs__panel__content" style="background:rgba(40, 60, 0, .6); height: 100%;">
<span style="color: #fff;">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</span>
</div>
<div class="e-tabs__panel__content" style="background:rgba(30, 80, 0, .6); height: 100%;">
<span style="color: #fff;">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</span>
</div>
</div>
</div>
</div>.e-tabspanelcontent-no_padding
<div style="height: 500px;">
<div class="e-tabs">
<input type="radio" name="tabs-nopadding" id="tabs-nopadding-1" checked="checked">
<label class="e-tabs__title" for="tabs-nopadding-1">
<span class="e-tabs__separator">
Overview
</span>
</label>
<input type="radio" name="tabs-nopadding" id="tabs-nopadding-2">
<label class="e-tabs__title" for="tabs-nopadding-2">
<span class="e-tabs__separator">
Content
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
<table class="e-table" data-e-version="2">
<thead>
<tr>
<th>
lorem ipsum
</th>
<th>
Dolor sit amet
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem, ipsum dolor sit amet consectetur
</td>
<td>
onsequatur, aut. Cum expedita enim et quam itaque aut in dolor
</td>
</tr>
</tbody>
</table>
</div>
<div class="e-tabs__panel__content e-tabs__panel__content-no_padding">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</div>