[tabs] shortcode arguments
classes:
Type -
[primary|secondary|pointing|tabular|text|pagination]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Alignment -
[left aligned|right aligned]
Attachment -
[top attached|bottom attached]
tab_classes:
Classes for all child items.
[tab] shortcode arguments
classes:
State -
[active|disabled]
Position -
[right]
title:
Tab title.
Basic tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Basic pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs pointing>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab active title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Notes
Adding an .active class can make another tab active by default on page load.
Attached tabs
Tab 1 content
Tab 2 content
<tabs top attached tab_classes="bottom attached">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab disabled title="Tab 3 title">Tab 3 content</tab>
</tabs>
Notes
Adding a .disabled class can disable a tab item.
Attached pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs top attached pointing tab_classes="bottom attached">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Tabular attached tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs top attached tabular tab_classes="bottom attached">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Secondary tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Secondary basic tabs with basic content
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary tab_classes="basic paddingless">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Secondary pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary pointing>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Secondary pointing basic tabs with basic content
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary pointing tab_classes="basic paddingless">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Tabular right aligned tabs
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
<tabs top attached tabular tab_classes="bottom attached">
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab right title="Tab 3 title">Tab 3 content</tab>
  <tab right title="Tab 4 title">Tab 4 content</tab>
</tabs>
Notes
Adding the .right class to the tab makes it's item float right.
Compact tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs compact>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Notes
Adding the .compact class prevents the menu from extending to full width.
Compact center aligned tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs compact center aligned>
  <tab title="Tab 1 title">Tab 1 content</tab>
  <tab title="Tab 2 title">Tab 2 content</tab>
  <tab title="Tab 3 title">Tab 3 content</tab>
</tabs>
Notes
Compact menu can be center aligned.
Portfolio example
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.

Projects 2016
Image grid with details on hover

Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image

Projects 2015
Cards with title, image and action button

Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.

Project 2014
Detailed card

Lorem ipsum
Dolor sit amet 332.
Eu nec esse splendide
7+ mel meis tollit
Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.

Projects 2013
Basic grid with zoomable images

Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
Job name
Read more
Dimmer image
<tabs huge horizontal bulleted center aligned link list tab_classes="basic paddingless">
  <tab title="2011">
    <grid four column stackable>
      <column>
        <dimmer image="https://placehold.it/300x240">
          <header inverted>Job name</header>
          <button inverted link="#">Read more</button>
        </dimmer>
      </column>
      <column>
        <dimmer image="https://placehold.it/300x240">
          <header inverted>Job name</header>
          <button inverted link="#">Read more</button>
        </dimmer>
      </column>
      <column>
        <dimmer image="https://placehold.it/300x240">
          <header inverted>Job name</header>
          <button inverted link="#">Read more</button>
        </dimmer>
      </column>
      <column>
        <dimmer image="https://placehold.it/300x240">
          <header inverted>Job name</header>
          <button inverted link="#">Read more</button>
        </dimmer>
      </column>
    </grid>
  </tab>
  <tab title="2012">
    ...
  </tab>
  <tab title="2013">
    ...
  </tab>
  <tab title="2014">
    <page title="Portfolio" wpautop="false">
  </tab>
  <tab title="2015">
    ...
  </tab>
  <tab title="2016">
    ...
  </tab>
  <tab title="2017">
    ...
  </tab>
</tabs>
Notes
Tabs can contain other shortcodes.

Leave a comment

Your email address will not be published. Required fields are marked *