Slider Tabs 2x
Huro provides special navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 2 items.
<div class="tabs-wrapper is-slider">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab" class="is-active"><a><span>Team</span></a></li>
<li data-tab="projects-tab"><a><span>Projects</span></a></li>
<li class="tab-naver"></li>
</ul>
</div>
</div>
<div id="team-tab" class="tab-content is-active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="projects-tab" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
</div>
Squared Slider Tabs 2x
Huro provides special navigation tabs that you can use to
build nice looking and optimized layouts. Add the
is-squared class to the
tabs-wrapper element to make the tabs squared.
Tabs work with a javascript implementation. Check the markup
for more details. These tabs only support 2 items.
<div class="tabs-wrapper is-slider is-squared">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab1" class="is-active"><a><span>Team</span></a></li>
<li data-tab="projects-tab1"><a><span>Projects</span></a></li>
<li class="tab-naver"></li>
</ul>
</div>
</div>
<div id="team-tab1" class="tab-content is-active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="projects-tab1" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
</div>
Slider Tabs 3x
Huro provides special navigation tabs that you can use to build nice looking and optimized layouts. Tabs work with a javascript implementation. Check the markup for more details. These tabs only support 3 items.
<div class="tabs-wrapper is-triple-slider">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab2" class="is-active"><a><span>Team</span></a></li>
<li data-tab="projects-tab2"><a><span>Projects</span></a></li>
<li data-tab="tasks-tab2"><a><span>Tasks</span></a></li>
<li class="tab-naver"></li>
</ul>
</div>
</div>
<div id="team-tab2" class="tab-content is-active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="projects-tab2" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="tasks-tab2" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
</div>
Squared Slider Tabs 3x
Huro provides special navigation tabs that you can use to
build nice looking and optimized layouts. Add the
is-squared class to the
tabs-wrapper element to make the tabs squared.
Tabs work with a javascript implementation. Check the markup
for more details. These tabs only support 3 items.
<div class="tabs-wrapper is-triple-slider is-squared">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab3" class="is-active"><a><span>Team</span></a></li>
<li data-tab="projects-tab3"><a><span>Projects</span></a></li>
<li data-tab="tasks-tab3"><a><span>Tasks</span></a></li>
<li class="tab-naver"></li>
</ul>
</div>
</div>
<div id="team-tab3" class="tab-content is-active">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="projects-tab3" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
<div id="tasks-tab3" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
abducam, times. Quae diligentissime contra Aristonem dicuntur a Chryippo.
Duo Reges: constructio interrete.</p>
</div>
</div>