Information
<div class="ecl-tabs" data-ecl-tabs="true" data-ecl-auto-init="Tabs"> <div class="ecl-tabs__container"> <div class="ecl-tabs__list" role="tablist"> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link ecl-tabs__link--active" role="tab" tabindex="-1" aria-selected="true">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item"><a href="/example" class="ecl-link ecl-link--no-visited ecl-tabs__link" role="tab" tabindex="-1" aria-selected="false">Tab label</a></div> <div class="ecl-tabs__item ecl-tabs__item--more"></div> </div><button class="ecl-button ecl-button--ghost ecl-tabs__toggle" type="button" tabindex="-1"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">More (%d)</span><svg class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use> </svg></span></button> </div> <div class="ecl-tabs__controls"><button class="ecl-button ecl-button--ghost ecl-tabs__prev ecl-tabs__item--hidden ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Previous</span><svg class="ecl-icon ecl-icon--s ecl-icon--rotate-270 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use> </svg></span></button><button class="ecl-button ecl-button--ghost ecl-tabs__next ecl-tabs__item--hidden ecl-button--icon-only" type="button"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Next</span><svg class="ecl-icon ecl-icon--s ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use> </svg></span></button></div> </div>
Try it yourself on the playground
Playground