Ссылки

С помощью модификатора .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 - при наведении, ссылка не подчеркнута

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

Параметры

Использование модификатора: .sf-link

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

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

Обычные ссылки (без темы)

<a href="#" class="sf-link">Link 1</a>
<a href="#" class="sf-link sf-link-dashed">Link 2</a>
<a href="#" class="sf-link sf-link-dotted">Link 3</a>

Ссылки с темами

<a href="#" class="sf-link sf-link-theme">Link 1</a>

Ссылка в несколько строк

SIMAI Framework создан как инструмент позволяющий облегчить работу веб-мастеров с интерфейсом сайта. Он содержит большое количество модификаторов, позволяющих изменять различные свойства элементов. Для того чтобы ориентироваться в таком большом количестве вариантов, используется правило единообразия, при котором зная как работает один модификатор, вы с легкостью сможете разобраться как работают и другие.

SIMAI Framework создан как инструмент позволяющий облегчить работу веб-мастеров с интерфейсом сайта. Он содержит большое количество модификаторов, позволяющих изменять различные свойства элементов. Для того чтобы ориентироваться в таком большом количестве вариантов, используется правило единообразия, при котором зная как работает один модификатор, вы с легкостью сможете разобраться как работают и другие.

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