Tab Navigation

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

News

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Contact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Tab Navigation

This component can be used as navigation, or it may be used for collections of some kind. If the component were not limited in width on this page, it would have spread out covering 'wall-to-wall'. That can of course be done, and the height may be set to100%, so you can use it for whole pages.

You may prefer changing the colours to something less striking, and that involves both the class .tabsconent and the attributes on each button.

The contents of the panels can be anything you need to put in there.

At the bottom of the component there is a HTML element which makes the whole thing work. If you want to add contents below this component, it is best to insert a new container section below and outside the container .tabs-wrap.

Placeholder Picture

Download this component for 'mobile-up'

Placeholder Picture

Download this component for 'desktop-down'