Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

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>