Tabs
Huro provides styled 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.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab"><a>Projects</a></li>
<li data-tab="tasks-tab"><a>Tasks</a></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 id="tasks-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>
Centered Tabs
Huro provides styled navigation tabs that you can use to build
nice looking and optimized layouts. Tabs work with a
javascript implementation. Use the
is-centered class to center align the tabs. Check
the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs is-centered">
<ul>
<li data-tab="team-tab" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab"><a>Projects</a></li>
<li data-tab="tasks-tab"><a>Tasks</a></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 id="tasks-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>
Right Tabs
Huro provides styled navigation tabs that you can use to build
nice looking and optimized layouts. Use the
is-right class to center align the tabs on the
right. Tabs work with a javascript implementation. Check the
markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs is-right">
<ul>
<li data-tab="team-tab" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab"><a>Projects</a></li>
<li data-tab="tasks-tab"><a>Tasks</a></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 id="tasks-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>
Feather Icons
You can easily embed Feather Icons in your tab
elements. The styling is already taken care of, just add the
icons you want. Check the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab3" class="is-active">
<a>
<i data-feather="users"></i>
<span>Team</span>
</a>
</li>
<li data-tab="projects-tab3">
<a>
<i data-feather="box"></i>
<span>Projects</span>
</a>
</li>
<li data-tab="tasks-tab3">
<a>
<i data-feather="check"></i>
<span>Tasks</span>
</a>
</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>
Font Awesome
You can easily embed Font Awesome 5 in your tab
elements. The styling is already taken care of, just add the
icons you want. Check the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab4" class="is-active">
<a>
<i class="fas fa-users"></i>
<span>Team</span>
</a>
</li>
<li data-tab="projects-tab4">
<a>
<i class="fas fa-umbrella"></i>
<span>Projects</span>
</a>
</li>
<li data-tab="tasks-tab4">
<a>
<i class="fas fa-tasks"></i>
<span>Tasks</span>
</a>
</li>
</ul>
</div>
</div>
<div id="team-tab4" 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-tab4" 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-tab4" 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>
Line Icons
You can easily embed Line Icons in your tab
elements. The styling is already taken care of, just add the
icons you want. Check the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs">
<ul>
<li data-tab="team-tab5" class="is-active">
<a>
<i class="lnil lnil-hierchy-alt"></i>
<span>Team</span>
</a>
</li>
<li data-tab="projects-tab5">
<a>
<i class="lnil lnil-analytics-alt-1"></i>
<span>Projects</span>
</a>
</li>
<li data-tab="tasks-tab5">
<a>
<i class="lnil lnil-licencse"></i>
<span>Tasks</span>
</a>
</li>
</ul>
</div>
</div>
<div id="team-tab5" 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-tab5" 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-tab5" 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>
Boxed Tabs
Tabs can be displayed in an old school boxed layout. To
display boxed tabs, use the is-boxed class on the
main tabs element. check the markup for more
details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs is-boxed">
<ul>
<li data-tab="team-tab6" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab6"><a>Projects</a></li>
<li data-tab="tasks-tab6"><a>Tasks</a></li>
</ul>
</div>
</div>
<div id="team-tab6" 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-tab6" 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-tab6" 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>
Toggle Tabs
Tabs can be displayed in exclusive toggle layout. To display
toggle tabs, use the is-toggle class on the main
tabs element. check the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs is-toggle">
<ul>
<li data-tab="team-tab7" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab7"><a>Projects</a></li>
<li data-tab="tasks-tab7"><a>Tasks</a></li>
</ul>
</div>
</div>
<div id="team-tab7" 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-tab7" 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-tab7" 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>
Rounded Toggle Tabs
Tabs can be displayed in exclusive toggle layout. To display
rounded toggle tabs, use the is-toggle and
is-toggle-rounded classes on the main
tabs element. check the markup for more details.
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.
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.
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.
<div class="tabs-wrapper">
<div class="tabs-inner">
<div class="tabs is-toggle is-toggle-rounded">
<ul>
<li data-tab="team-tab8" class="is-active"><a>Team</a></li>
<li data-tab="projects-tab8"><a>Projects</a></li>
<li data-tab="tasks-tab8"><a>Tasks</a></li>
</ul>
</div>
</div>
<div id="team-tab8" 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-tab8" 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-tab8" 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>