KSS Style Guide

<insert-markup>organisms.tabs-</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
.-layout-horizontal-right
right tabs
<insert-markup>organisms.tabs-0</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
.-layout-horizontal-center
center tabs
<insert-markup>organisms.tabs-1</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
.-layout-vertical-left
vertical left
<insert-markup>organisms.tabs-2</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
.-layout-vertical-right
vertical right
<insert-markup>organisms.tabs-3</insert-markup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
Markup: ..\..\styleguide\templates\organisms\tabs.html
<div class="rocksite-o-tabs [modifier class]">
    <ul class="rocksite-o-tabs__navigation"
        role="tablist">
        <li class="rocksite-o-tabs__navigation__item -active ui-tabs-active"
            role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true"
            aria-expanded="true"><span class="rocksite-o-tabs__navigation__item__wrapper"><a href="#tab-0"
                                                                                      class="rocksite-o-tabs__navigation__item__wrapper__link"
                                                                                      role="presentation" tabindex="-1"
                                                                                      id="ui-id-1"><span
                class="rocksite-o-tabs__navigation__item__wrapper__link__title">Tab Name 1</span></a></span></li>
        <li class="rocksite-o-tabs__navigation__item "
            role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true"
            aria-expanded="true"><span class="rocksite-o-tabs__navigation__item__wrapper"><a href="#tab-0"
                                                                                      class="rocksite-o-tabs__navigation__item__wrapper__link"
                                                                                      role="presentation" tabindex="-1"
                                                                                      id="ui-id-1"><span
                class="rocksite-o-tabs__navigation__item__wrapper__link__title">Tab Name 2</span></a></span></li>
        <li class="rocksite-o-tabs__navigation__item "
            role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true"
            aria-expanded="true"><span class="rocksite-o-tabs__navigation__item__wrapper"><a href="#tab-0"
                                                                                      class="rocksite-o-tabs__navigation__item__wrapper__link"
                                                                                      role="presentation" tabindex="-1"
                                                                                      id="ui-id-1"><span
                class="rocksite-o-tabs__navigation__item__wrapper__link__title">Tab Name 3</span></a></span></li>
    </ul>
    <div id="tab-0" class="rocksite-o-tabs__content ui-tabs-panel ui-widget-content ui-corner-bottom "
         aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae dignissim massa, at viverra ligula. Sed id neque porta leo mattis vehicula. Quisque accumsan massa in lacus tincidunt, vitae aliquam lacus aliquet.
    </div>
    <div id="tab-0" class="rocksite-o-tabs__content ui-tabs-panel ui-widget-content ui-corner-bottom u-hidden"
         aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block;">Nunc ultricies lectus quis odio consequat tincidunt. Duis nec lectus sit amet nisl malesuada imperdiet. Cras ac viverra purus, quis pretium sem. Nunc vehicula nunc non nibh molestie gravida. Maecenas fermentum est non ipsum blandit bibendum. Aliquam maximus, diam in rhoncus ultrices, eros urna ultricies metus, sit amet maximus turpis elit eu augue. Pellentesque non dignissim neque, a luctus mi.
    </div>
    <div id="tab-0" class="rocksite-o-tabs__content ui-tabs-panel ui-widget-content ui-corner-bottom u-hidden"
         aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block;">Donec sed nisi blandit, dapibus lectus et, pellentesque dolor. Suspendisse eu placerat eros, eu maximus nisi. Maecenas imperdiet posuere pretium.
    </div>


</div>
Source: ../source/scss/components/organisms/_tabs.scss, line 1