Tab
Default
Copy Pug Copy HTML Show code Hide code.e-tabs
<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-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>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
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
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
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
Variations
Nested tab Copy Pug Copy HTML Show code Hide code
<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"><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>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
Nested tab
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
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
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
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
Without checkbox Copy Pug Copy HTML Show code Hide code
<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>
<div class="e-box">
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 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><div class="e-box">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>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.
Embed Copy Pug Copy HTML Show code Hide code.e-tabs-embed
<div class="e-box e-box-nopadding">
<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>
</div>
<div class="e-box e-box-nopadding"><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></div>Dialogheader Copy Pug Copy HTML Show code Hide code.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 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>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
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
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
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
With badge Copy Pug Copy HTML Show code Hide code
<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="exclamation-circle" 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-warning">
3
<e-icon icon="exclamation-circle" 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="exclamation-circle" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
</div>
<div class="e-box">
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 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="exclamation-circle" 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-warning">3<e-icon icon="exclamation-circle" 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="exclamation-circle" size="small" color="inherit"></e-icon></span></a></div></div><div class="e-box">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>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.
fullheight Copy Pug Copy HTML Show code Hide code.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>
<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>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
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
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
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
no padding Copy Pug Copy HTML Show code Hide code.e-tabs__panel__content-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>
<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>| lorem ipsum | Dolor sit amet |
|---|---|
| Lorem, ipsum dolor sit amet consectetur | onsequatur, aut. Cum expedita enim et quam itaque aut in dolor |
Lorem ipsum dolor sit amet