Преимущества | Дизайн-система Tele2

1. Большие цифры

Для акцентирования внимания на важных цифрах (достижениях, статистике) можно использовать большие цифры с анимацией.

№1

Самый привлекательный работодатель среди телеком-компаний (по версии hh.ru)

86

Международных наград заработала команда дистанционной поддержки с 2017 года

Топ-10

9-е место в рейтинге лучших работодателей России среди крупнейших компаний (по версии hh.ru)

2. Иконки

Блок подходит для перечисления большого числа преимуществ в компактном виде.

<div class="box-content">
    <h2 class="box-content__title"> Безлимит внутри сети&nbsp;— это еще не&nbsp;все </h2>
    <div class="benefits box-content__benefits">
        <p class="subtitle"> Нам всегда есть, что предложить нашим абонентам&nbsp;— и&nbsp;чем удивить&nbsp;их: </p>
        <ul class="benefits__list mb-2">
            <li class="benefits__item fadeIn wow animated" data-wow-delay=".1s" style="visibility: visible;-webkit-animation-delay: .1s; -moz-animation-delay: .1s; animation-delay: .1s;"> <img src="fire-icon.c965cfa3.svg" alt="Иконка"> <span>остатки не&nbsp;сгорают</span> </li>
            <li class="benefits__item fadeIn wow animated" data-wow-delay=".3s" style="visibility: visible;-webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;">
            <img src="gift-internet.fee5467c.svg" alt="Иконка"> <span>можно делиться ГБ</span> </li>
            <li class="benefits__item fadeIn wow animated" data-wow-delay=".5s" style="visibility: visible;-webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s;">
            <img src="internet.490620c5.svg" alt="Иконка"> <span>поездки по&nbsp;России без доплат</span> </li>
            <li class="benefits__item fadeIn wow animated" data-wow-delay=".7s" style="visibility: visible;-webkit-animation-delay: .7s; -moz-animation-delay: .7s; animation-delay: .7s;">
            <img src="help-1.693e6451.svg" alt="Иконка"> <span>SOS-пакет включен</span> </li>
            <li class="benefits__item fadeIn wow animated" data-wow-delay=".9s" style="visibility: visible;-webkit-animation-delay: .9s; -moz-animation-delay: .9s; animation-delay: .9s;">
            <img src="market.cc3eaa6b.svg" alt="Иконка"> <span>Маркет Tele2</span> </li>
            <li class="benefits__item fadeIn wow animated" data-wow-delay="1.1s" style="visibility: visible;-webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; animation-delay: 1.1s;">
            <img src="protection-icon.cae20fe4.svg" alt="Иконка"> <span>защита от&nbsp;нежелательных подписок</span> </li>
        </ul>
        <p class="subtitle"> Подключайтесь к&nbsp;Tele2, чтобы пользоваться этими и&nbsp;многими другими сервисами для вашего комфорта. </p> <a class="btn btn-primary js-gtm-event" href="https://tele2.ru/tariffs" data-event="conv_connect-else" target="_blank">Подключиться</a>        </div>
</div>

3. Карточки

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

<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
    <div class="box-slider__item swiper-slide swiper-slide-active" style="width: 133.667px; margin-right: 36px;">
        <div class="fadeIn slide wow animated" data-wow-delay=".2s" style="visibility: visible;-webkit-animation-delay: .2s; -moz-animation-delay: .2s; animation-delay: .2s;">
            <div class="slide__pic"> <img src="stages_boat.c0381077.svg" alt=""> </div>
            <div class="slide__title">Знакомство: 2 месяца</div>
            <div class="slide__text"> Первые два месяца мы&nbsp;постепенно будем погружать тебя в&nbsp;ценности, практики работы и&nbsp;профессиональную специфику нашей компании. Особое внимание уделим развитию базовых компетенций. </div>
        </div>
    </div>
    <div class="box-slider__item swiper-slide swiper-slide-next" style="width: 133.667px; margin-right: 36px;">
        <div class="fadeIn slide wow animated" data-wow-delay=".4s" style="visibility: visible;-webkit-animation-delay: .4s; -moz-animation-delay: .4s; animation-delay: .4s;">
            <div class="slide__pic"> <img src="stages_lamp.b80d9e32.svg" alt=""> </div>
            <div class="slide__title">Задачи: 7 месяцев</div>
            <div class="slide__text"> Следующий период —это полноценное включение в повседневную работу с&nbsp;реальными задачами и&nbsp;интересными проектами. Самое время для развития инновационности и&nbsp;бизнес-мышления. </div>
        </div>
    </div>
    <div class="box-slider__item swiper-slide" style="width: 133.667px; margin-right: 36px;">
        <div class="fadeIn slide wow animated" data-wow-delay=".6s" style="visibility: visible;-webkit-animation-delay: .6s; -moz-animation-delay: .6s; animation-delay: .6s;">
            <div class="slide__pic"> <img src="stages_rocket.9a42ec79.svg" alt=""> </div>
            <div class="slide__title">Возможности: 3 месяца</div>
            <div class="slide__text"> Приобретя знания и&nbsp;опыт, ты&nbsp;сфокусируешься на&nbsp;собственном проекте, который ты&nbsp;будешь вести в&nbsp;течение трех месяцев. На&nbsp;этом этапе тебе особенно пригодятся приобретенные ранее навыки, а&nbsp;в&nbsp;фокусе будет
                развитие лидерской компетенции. </div>
        </div>
    </div>
</div>