Элементы интерфейса

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. Иконки доступны по ссылке.