Tabs

[power_title color=”#787d7d” ]Information[/power_title]

Tabs allows you to logically divide information into sections. With the use of color, you can separate different subject and give a unique touch to your page.

You can even set the layout of tabs in all four directions.

[power_title color=”#576e6d” ]Default Tabs[/power_title]

[tabs width=” ][tab title=’Tab 1′ icon=”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab 2′ icon=”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab 3′ icon=” ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][/tabs]

[power_title color=”#576e6d” ]Tabs with Icon[/power_title][tabs width=” ][tab title=’Tab 1′ icon=’icon-star’ color=’#ffffff’ background=’#65c27f’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab’ icon=’icon-download’ color=’#ffffff’ background=’#7a99c7′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab’ icon=’icon-camera’ color=’#ffffff’ background=’#7ac3c7′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][/tabs]

[power_title color=”#576e6d” ]Color based Tabs[/power_title]

[tabs width=” ][tab title=’Tab 1′ icon=” color=’#ffffff’ background=’#d10018′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab 2′ icon=” color=’#ffffff’ background=’#00c0d1′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab 3′ icon=” color=’#ffffff’ background=’#3cccd9′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][tab title=’Tab 4′ icon=” color=’#ffffff’ background=’#635658′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante massa. Sed tincidunt sodales ante nec scelerisque. Integer quis tincidunt mauris. Etiam neque velit, dapibus in eleifend eu, malesuada ut felis. Vivamus sed nulla ut nisl porttitor pretium.[/tab][/tabs]

[power_title color=”#7f8794″ ]Tabs Layout[/power_title]

[tabs align=’top’ ][tab title=’Tab’ icon=” color=’#ffffff’ background=’#e82160′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=’#ffffff’ background=’#d1001f’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=” background=’#c72a2a’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][/tabs]

[tabs align=’left’ ][tab title=’Tab’ icon=” color=’#ffffff’ background=’#e82160′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=’#ffffff’ background=’#d1001f’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=” background=’#c72a2a’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][/tabs]

[tabs align=’right’ ][tab title=’Tab’ icon=” color=’#ffffff’ background=’#e82160′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=’#ffffff’ background=’#d1001f’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=” background=’#c72a2a’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][/tabs]

[tabs align=’bottom’ ][tab title=’Tab’ icon=” color=’#ffffff’ background=’#e82160′ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=’#ffffff’ background=’#d1001f’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][tab title=’Tab’ icon=” color=” background=’#c72a2a’ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa turpis, tristique a convallis accumsan, sodales et sapien. Nam vestibulum interdum sodales. Fusce et facilisis sem. Pellentesque gravida ornare velit, ac mollis nisi fringilla eget. Vivamus eget malesuada sapien.[/tab][/tabs]