Phoenix Reisen Styleguide
Example
Ich bin Content von Tab 1
Ich bin Content von Tab 2
Ich bin Content von Tab 3
Markup
<article class="tabs">
    <div class="tabs__tabs-bar">
        <a class="tab tab-0 tab--link is-inactive-tab">Tab 1</a>
        <a class="tab tab-1 tab--link is-active-tab">Tab 2</a>
        <a class="tab tab-2 tab--link is-inactive-tab">Tab 3</a>
    </div>
    <div class="tabs__tabs-content">
        <div class="tab-content tab-content-0 is-hidden-tab">
            <div style="padding: 1rem;">Ich bin Content von Tab 1</div>
        </div>
        <div class="tab-content tab-content-1 is-visible-tab">
            <div style="padding: 1rem;">Ich bin Content von Tab 2</div>
        </div>
        <div class="tab-content tab-content-2 is-hidden-tab">
            <div style="padding: 1rem;">Ich bin Content von Tab 3</div>
        </div>
    </div>
</article>
Source: components/_tabs.scss, line 1