Ссылки

С помощью модификатора .l вы можете менять оформление ссылок.

Цвет ссылок

Вы можете использовать модификаторы .l-{состояние}-{цвет} для задания цвета ссылок.

Параметры

Использование модификатора: .l-{состояние}-{цвет}

  • Состояние Необязательный параметр. При его остуствии задается цвет для a:link. Может принимать значения: visited, active,hover.
  • Цвет. Обязательный параметр. Указывается любой из именнованных цветов или цветов Material Design.

Примеры использования

Вы можете задавать цвет непосредственно ссылке

<ul>
<li><a href="#" class="l-danger l-hover-info">Цвет ссылки "l-danger", При наведение - "l-hover-info"</a></li>
<li><a href="#" class="l-blue l-hover-green">Цвет ссылки "l-blue", При наведение - "l-hover-green"</a></li>
</ul>

Так и элементам в которых находятся ссылки

<ul class="l-purple l-hover-pink">
<li><a href="#">Пример ссылки 1</a></li>
<li><a href="#">Пример ссылки 2</a></li>
</ul>

Наследование цвета

Если необходимо чтобы ссылка наследовала цвет текста, используйте модификатор ссылки .l-inherit

<ul class="c-green l-inherit">
<li>Это текст</li>
<li><a href="#">А это ссылка с унаследованным цветом</a></li>
</ul>

Подчеркивание ссылок

С помощью модификаторов вы можете задать оформление ссылок:

  • .l-underline - подчеркивание ссылок
  • .l-underline-none - ссылка без подчеркивания
  • .l-hover-underline - подчеркивание ссылки при наведении
  • .l-hover-underline-none - при наведении, ссылка не подчеркнута

Модификаторы вы можете использоввать как класс самой ссылки, так и клас элемента в котором находится данная ссылка.