Элементы интерфейса
1. Кнопки.
КнопкаЕсли, необходимо оформить ссылку (или другого тега) в виде кнопки используйте класс .button:
<a class="button" href="#">Кнопка</a>
Для кнопки акцентного цвета, добавье класс .button--acc
Кнопка<a class="button button--acc" href="#">Кнопка</a>
2. Кнопка с иконкой.
КнопкаИспользуйте следующую разметку:
<a class="button button-with-icon"> <em class="button__icon fas fa-question"></em>Кнопка </a>
Классы fas fa-question необходимо заменить на класс нужной иконки fontawesome. Иконки доступны по fontawesome 5 (доступны варианты solid, regular, light и brands).
3. Маленькая кнопка.
КнопкаДля миниатюрной кнопки используйте класс .small:
<a class="button small" href="#">Кнопка</a>
4. Ссылка Читать далее.
Для стилизованной ссылки на другую страницу, используйте разметку:
<a class="show-all" href="#"> Читать далее <i class="button-more fal fa-long-arrow-right"></i> </a>
Для ссылки базового цвета используйте класс bs-color:
Для ссылки акцентного цвета используйте класс ac-color:
5. Ссылка с пунктирным подчеркиваем.
Ссылка СсылкаПодобный вид ссылки может использоваться для какого-либо действия, например открытия модального окна. Для первого варианта используйте класс link-action:
<a href="#" class="link-action">Ссылка</a>
Для второго варианта используйте класс half-link.
Для базового или акцентного цвета используйте классы bs-color или ac-color
Ссылка Ссылка6. Ссылка с иконкой.
Для ссылки с иконкой используйте разметку:
<a href="#" class="link-action-icon"> <i class="fas fa-question icon"></i><span class="link-action-icon__title">Ссылка</span> </a>
Классы fas fa-question необходимо заменить на класс нужной иконки fontawesome. Иконки доступны по ссылке.