Tabs componentAvailable since EcoComposer 1.2

Tabs examples
Default SCSS values
SCSS implementation
HTML implementation

First tab
Second tab
Third tab
Fourth tab

The first content.

The second content.

The third content.

The fourth content.

The default values are :

animate : true,
background : true,
border : null,
divs--font-size : 1.6rem * theming.$font-size,
divs--margin-bottom : 4rem * theming.$font-size,
tabs--font-size : 1.6rem * theming.$font-size,
tabs--background-color : 'tabs--background-color',
tabs--background-image : 'tabs--background-image',
tabs--hover--background-color : 'tabs--hover--background-color',
tabs--hover--background-image : 'tabs--hover--background-image',
tabs--border--color : 'tabs--border--color',
tabs--color : 'tabs--color',
tabs--div--background : 'tabs--div--background',
tabs--div--box-shadow : 'tabs--div--box-shadow',
count : 4,
print : false,
suffix : '',
themes : (
  light : (
    default--tabs--background-color : #ddd,
    default--tabs--background-image : linear-gradient(45deg, #e0e6e6, #b9dada),
    default--tabs--hover--background-color : #ddf,
    default--tabs--hover--background-image : linear-gradient(45deg, #e0e6e6, #b9dada),
    default--tabs--border--color : #f00,
    default--tabs--color : #000,
    default--tabs--div--background : #eee,
    default--tabs--div--box-shadow : 0 0 3px #000
  ),
  dark : (
    default--tabs--background-color : #ddd,
    default--tabs--background-image : linear-gradient(45deg, #e0e6e6, #b9dada),
    default--tabs--hover--background-color : #ddf,
    default--tabs--hover--background-image : linear-gradient(45deg, #e0e6e6, #b9dada),
    default--tabs--border--color : #fff,
    default--tabs--color : #000,
    default--tabs--div--background : #333,
    default--tabs--div--box-shadow : 0 0 3px #000
  )
)

We can implement it that way :

@include tabs.init;
@include tabs.create;
@include tabs.create(
  (
    count : 4,
    themes : $themes,
    border-radius : 0 0 .5rem .5rem
  )
);

We can implement it that way :

<input type=radio id=first-tab class="tabs-radios suffix" name=gallery checked>
<input type=radio id=second-tab class="tabs-radios suffix" name=gallery>
<input type=radio id=third-tab class="tabs-radios suffix" name=gallery>
<input type=radio id=fourth-tab class="tabs-radios suffix" name=gallery>

<ul class="tabs suffix">
  <li class="tabs--item suffix" role=tab>
    <label for=first-tab class="tab--item-label suffix">
      First tab
    </label>
  </li>

  <li class="tabs--item suffix" role=tab>
    <label for=second-tab class="tab--item-label suffix">
      Second tab
    </label>
  </li>

  <li class="tabs--item suffix" role=tab>
    <label for=third-tab class="tab--item-label suffix">
      Third tab
    </label>
  </li>

  <li class="tabs--item suffix" role=tab>
    <label for=fourth-tab class="tab--item-label suffix">
      Fourth tab
    </label>
  </li>
</ul>

<div class="activatable-divs suffix">
  <div class="activatable-divs--item suffix">
    The first content.
  </div>

  <div class="activatable-divs--item suffix">
    The second content.
  </div>

  <div class="activatable-divs--item suffix">
    The third content.
  </div>

  <div class="activatable-divs--item suffix">
    The fourth content.
  </div>
</div>