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:

  • Place the entire component inside a div with a 'soc-tabs' class
  • First, set an unordered list ul'nav nav-tabs'
    • Inside, use list items li with an optional class 'active' if they are selected
    • For the links use an anchor element which contains a reference to the id of the tab you want to toggle a[href="#tab1"]
    • Links should have the data-toggle="tab" attribute
  • Follow the tabs section with a div with the 'tab-content' class
  • Inside, create a 'tab-pane' div for each of tabs required, give this div an id matching the link in the tabs section
  • Within the tab-panes it is recommended to continue with creating a default container-fluid grid (.container-fluid>.row>.col-xs-12)

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.

Regular tab element

Tab 1 content goes here

Tab 2 content goes here

Tab 3 content goes here

This is also the default active pane

  • Because this tab-pane has the 'active' class
  • And because the matching list item li has the 'active' class
  • This is only required for drawing the element the first time
  • Once the document is ready, javascript will take over and switch these classes around
emmet:
.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})

Tab element following states & header

State 1
State 2
State 3
State 4
State 5
Leuven Janssens Marina
89120125468 304/00000468437
TAB1 : Lorem ipsum dolor sit amet

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.

TAB2 : Lorem ipsum dolor sit amet

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.

TAB3 : Lorem ipsum dolor sit amet

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.

emmet:
Combine emmets from Soc States and Soc header with the regular tab emmet

Tab element with 'top' class applied

Tab 1 content goes here

Tab 2 content goes here

Tab 3 content goes here

This is also the default active pane

  • Because this tab-pane has the 'active' class
  • And because the matching list item li has the 'active' class
  • This is only required for drawing the element the first time
  • Once the document is ready, javascript will take over and switch these classes around
emmet:
.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})