Tabs will generally be the first item on a content page providing a switch between different sections of the content provided. Tabs are by default positioned on the left side but can also be set on top by using the 'top' class. The tab control consists of multiple elements which must be placed correctly to make them work.
Make sure you follow the guidelines below:
If the tabs are placed immediately after a soc-header, the 'follow-header' class can also be used to create the same consistent effect.
If you want to fill the height within an absolute positioned container, you can add the 'full-height' class to the 'soc-tabs' div.
Tab 1 content goes here
Tab 2 content goes here
Tab 3 content goes here
This is also the default active pane
.soc-tabs>(ul.nav.nav-tabs>(li>a[href="#tab$" data-toggle="tab"]{Tab $})*3+(li.active>a[href="#tab4" data-toggle="tab"]{Tab 4}))+div.tab-content>(.tab-pane#tab$>.container-fluid>.row>.col-xs-12>p{Tab $ content goes here})*3+(.tab-pane.active#tab4>.container-fluid>.row>.col-xs-12>p{Tab 4 content goes here})
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.
Combine emmets from Soc States and Soc header with the regular tab emmet
Tab 1 content goes here
Tab 2 content goes here
Tab 3 content goes here
This is also the default active pane
.soc-tabs.top>(ul.nav.nav-tabs>(li>a[href="#tab$" data-toggle="tab"]{Tab $})*3+(li.active>a[href="#tab4" data-toggle="tab"]{Tab 4}))+div.tab-content>(.tab-pane#tab$>.container-fluid>.row>.col-xs-12>p{Tab $ content goes here})*3+(.tab-pane.active#tab4>.container-fluid>.row>.col-xs-12>p{Tab 4 content goes here})