Переключатели

1. Таб

Универсальный блок, который можно использовать для разведения коммуникации.

<div class="box-content">
    <h2 class="box-content__title fadeInUp wow animated" data-wow-delay=".3s" style="visibility: visible;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;"> Как получать подарки </h2>
    <div class="fadeIn userstate-tabs wow animated" data-wow-delay=".5s" style="visibility: visible;-webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s;">
        <ul class="filter-options js-tab-selector">
            <li class="active js-gtm-event" data-event="tab_nonuser" data-target=".tab_one"> <span class="filter-option">Я еще не абонент Tele2</span> </li>
            <li class="js-gtm-event" data-event="tab_user" data-target=".tab_two"> <span class="filter-option">Я абонент Tele2</span> </li>
        </ul>
        <div class="active js-tabs__pane tab_one">
            <div class="userstate-tabs__tab-content">
                <p> Присоединяйтесь к&nbsp;Tele2 и&nbsp;получайте 3&nbsp;подарка просто так каждый понедельник! </p>
                <p> Скачайте «<a class="js-gtm-event text-link" data-event="conv_link_myTele2" data-section="section-about" href="https://q.tele2.ru/mondays-landing" target="_blank">Мой&nbsp;Tele2</a>» и&nbsp;следуйте инструкциям для подключения. «Понедельники
                    Tele2» будут ждать вас в&nbsp;мобильном приложении. </p>
                <div class="app-links">
                    <a class="app-links__item appstore-link js-gtm-event" data-event="app-store-link" data-section="section-app" href="https://q.tele2.ru/mondays-landing" target="_blank">
                        <picture>
                            <source media="(max-width: 1100px)" srcset="appstore-logo@2x.44dad257.png"> <img alt="appstore" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                    </a>
                    <a class="app-links__item js-gtm-event playmarket-link" data-event="playmarket-link" data-section="section-app" href="https://q.tele2.ru/mondays-landing" target="_blank">
                        <picture>
                            <source media="(max-width: 1100px)" srcset="googleplay.fc6f7d05.png"> <img alt="googleplay" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                    </a>
                    <a class="app-links__item appgallery-link js-gtm-event" data-event="appgallery-link" data-section="section-app" href="https://redirect.appmetrica.yandex.com/serve/892696892876571496" target="_blank">
                        <picture>
                            <source media="(max-width: 1100px)" srcset="appgallery.cf6ec3d8.png"> <img alt="appgallery" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                    </a>
                </div>
            </div>
        </div>
        <div class="js-tabs__pane tab_two">
            <div class="userstate-tabs__tab-content">
                <p> Подарки уже ждут вас в мобильном приложении <a class="js-gtm-event text-link" data-event="conv_link_myTele2" data-section="section-about" href="https://q.tele2.ru/mondays-landing" target="_blank">«Мой&nbsp;Tele2»</a>! </p>
                <p> Мы позаботились, чтобы вы не забыли о подарках: просто добавьте напоминание в свой календарь в мобильном приложении. </p>
                <div class="mt-4">
                    <div class="app-links">
                        <a class="app-links__item appstore-link js-gtm-event" data-event="app-store-link" data-section="section-app" href="https://q.tele2.ru/mondays-landing" target="_blank">
                            <picture>
                                <source media="(max-width: 1100px)" srcset="appstore-logo@2x.44dad257.png"> <img alt="appstore" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                        </a>
                        <a class="app-links__item js-gtm-event playmarket-link" data-event="playmarket-link" data-section="section-app" href="https://q.tele2.ru/mondays-landing" target="_blank">
                            <picture>
                                <source media="(max-width: 1100px)" srcset="googleplay.fc6f7d05.png"> <img alt="googleplay" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                        </a>
                        <a class="app-links__item appgallery-link js-gtm-event" data-event="appgallery-link" data-section="section-app" href="https://redirect.appmetrica.yandex.com/serve/892696892876571496" target="_blank">
                            <picture>
                                <source media="(max-width: 1100px)" srcset="appgallery.cf6ec3d8.png"> <img alt="appgallery" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> </picture>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. Слайдер

Позволяет компактно отобразить много информации. При различных модификациях, может служить списком преимуществ, фичей или показывать шаги, быть разводящим элементом.

<div class="fadeIn section-slider wow animated" data-wow-duration="1.6s" style="visibility: visible;-webkit-animation-duration: 1.6s; -moz-animation-duration: 1.6s; animation-duration: 1.6s;">
    <div class="active section-slider__item">
        <div class="item">
            <div class="item__title">Быстрые и
                <br>гибкие решения</div>
            <div class="item__content">
                <p> Мы&nbsp;работаем в&nbsp;атмосфере постоянных изменений. Мы&nbsp;быстро действуем и&nbsp;всегда находимся в&nbsp;центре событий. </p>
                <p> Мы&nbsp;никогда не&nbsp;стоим на&nbsp;месте и&nbsp;предлагаем инновационные решения, которые опережают желания наших клиентов. </p>
            </div>
        </div>
    </div>
    <div class="section-slider__item">
        <div class="item">
            <div class="item__title"> Честные и
                <br>открытые отношения </div>
            <div class="item__content">
                <p> Мы&nbsp;общаемся друг с&nbsp;другом так&nbsp;же, как с&nbsp;нашими клиентами&nbsp;— честно. </p>
                <p> Мы&nbsp;доверяем сотрудникам, открыто делимся опытом и&nbsp;эффективно инвестируем в&nbsp;команду. Мы&nbsp;справедливо оцениваем результаты и&nbsp;умеем достойно благодарить. </p>
            </div>
        </div>
    </div>
    <div class="section-slider__item">
        <div class="item">
            <div class="item__title"> Интересные и
                <br>инновационные улучшения </div>
            <div class="item__content">
                <p> Мы&nbsp;с&nbsp;интересом изучаем новое и&nbsp;готовы к&nbsp;изменениям. </p>
                <p> Мы&nbsp;меняем сложившиеся правила рынка в&nbsp;интересах наших клиентов. Каждый из&nbsp;нас уникален, а&nbsp;вместе мы&nbsp;— сильная и&nbsp;профессиональная команда, достигающая выдающихся результатов. </p>
            </div>
        </div>
    </div>
</div>