Tabs: Left

<h3>Tabs</h3>

<div class="c-tabs{{ modifier }} js-tabs" role="tablist" aria-label="Tabbed interface">
    <div class="c-tabs__controls" role="none">
        <button class="c-tabs__link c-tabs__link--active" data-target="#panel-1" title="One" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">One</button>

        <button class="c-tabs__link" data-target="#panel-2" title="Two" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Two</button>

        <button class="c-tabs__link" data-target="#panel-3" title="Three" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Three</button>

        <button class="c-tabs__link" data-target="#panel-4" title="Four" role="tab" aria-selected="false" aria-controls="panel-4" id="tab-4" tabindex="-1">Four</button>
    </div>

    <div class="c-tabs__content" role="none">
        <div class="c-tabs__tab c-tabs__tab--active" id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
            <div class="b-ugc">One</div>
        </div>

        <div class="c-tabs__tab" id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
            <div class="b-ugc">Two</div>
        </div>

        <div class="c-tabs__tab" id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
            <div class="b-ugc">Three</div>
        </div>

        <div class="c-tabs__tab" id="panel-4" role="tabpanel" tabindex="0" aria-labelledby="tab-4" hidden>
            <div class="b-ugc">Four</div>
        </div>
    </div>
</div>