Tabs

Tabs come in two different styles: Simple and Traditional

 

Simple

  • Tab 1
  • Tab 2
  •  Tab 3

Tab content 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Traditional

  • Tab 1
  •  Tab 2
  • Tab 3

Tab content 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

 

Simple / Vertical Left

  • Tab 1
  • Tab 2
  •  Tab 3

Tab content 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Traditional / Vertical Right

Tab content 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

Tab content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec ipsum quis ligula consequat vehicula et vitae dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta luctus ullamcorper. Vivamus sit amet leo metus.

  • Tab 1
  •  Tab 2
  • Tab 3
 
  • 1.
    Tab Shortcode
  • 2.
    =============
  • 3.
    [tabs style="simple" layout="horizontal"]
  • 4.
    [tab title="Tab title" icon=""]Tab content...[/tab]
  • 5.
    [tab title="Tab title" icon=""]Tab content...[/tab]
  • 6.
    [tab title="Tab title" icon=""]Tab content...[/tab]
  • 7.
    [/tabs]
  • 8.
    style: simple (default), traditional
  • 9.
    layout: horizontal (default), vertical-left, vertical-right
  • 10.
    title: [Tab title]
  • 11.
    icon: (please see: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/)