[box type=”custom-boxed-item” align=”center” text_align=”textcenter”]
[fancy_header tag=”h4″ size=”medium” text_align=”textcenter” bold=”1″]What’s this?[/fancy_header]
You can dynamically switch between content using tabs. It’s a widely used website element so we’ve made sure it has all the variations you might need. Check out these examples.
[icon icon=”fa-arrow-down” font_size=”15″ boxed=”1″ description=”See examples below” position=”center” margin_top=”20px” margin_bottom=”-40px” link=”#content” class=”infinite wobble”]
[/box]
[section_break type=”blank” margin_bottom=”30″ /]
[fancy_header bold=”1″ type=”style1″]Small[/fancy_header]
[tabs convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Medium[/fancy_header]
[tabs size=”med” convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="med" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Large[/fancy_header]
[tabs size=”lrg” convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="lrg" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Add animation[/fancy_header]
[tabs animation=”sliding” convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs animation="sliding" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Fill all space[/fancy_header]
[tabs size=”med” fill=”blocks-2″ convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="med" fill="blocks-2" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Up to 5 tabs[/fancy_header]
[tabs size=”med” fill=”blocks-5″ convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[tab title=”3″][box type=”basic-light” align=”center”]This is tab THREE. Any content you like goes here. [/box][/tab]
[tab title=”4″][box type=”basic-light” align=”center”]This is tab FOUR. Any content you like goes here. [/box][/tab]
[tab title=”etc”][box type=”basic-light” align=”center”]This is tab FIVE, you get the idea. You can have a maximum of 6 tabs in this format.[/box][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="med" fill="blocks-5" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Vertical tabs[/fancy_header]
[tabs layout=”vertical” convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs layout="vertical" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Medium[/fancy_header]
[tabs size=”med” layout=”vertical” convert=”cvt-phone-ldsp”]
[tab title=”Tab1″][box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box][/tab]
[tab title=”Tab2″][h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="med" layout="vertical" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
[fancy_header bold=”1″ type=”style1″ margin_top=”50″]Large[/fancy_header]
[tabs size=”lrg” layout=”vertical”]
[tab title=”Tab1″]
[box type=”basic-light” align=”center”]This is tab one. Any content you like goes here. [/box]
[/tab]
[tab title=”Tab2″]
[h2]React has unlimited colors[/h2][image src=”2014/06/3740308199_0341325acb_o.jpg” frame=”style2″ align=”right” width=”300″ height=”200″ alt=”alt_tag”]
[p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p]
[/tab]
[/tabs]
[accordion style=”plain”]
[accordion_toggle title=”Get code”]
[tabs size="lrg" layout="vertical" convert="cvt-phone-ldsp"] [tab title="Tab1"] ... [/tab] [/tabs]
[/accordion_toggle]
[/accordion]
