Компонент Ссылка Link

Устанавливайте различные стили для ссылок. Использование модификаторов. Сбросить цвет ссылки. Применить стиль ссылки к одному из его дочерних элементов. Руководство. Примеры.

Модификатор «Muted»

Компонент База устанавливает цвет ссылки по умолчанию. Если вы хотите, чтобы ссылка имела приглушенный стиль, просто добавьте к элементу <a> класс .uk-link-muted. Вы также можете добавить класс к родительскому элементу, и тогда стиль будет применён ко всем внутренним элементам <a>.

<a class="uk-link-muted" href="#"></a>
  • Ссылка

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua UIkit 3.

  • <a class="uk-link-muted" href="#">Ссылка</a>

<p class="uk-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua UIkit 3.</p>

Модификатор «Text»

Чтобы сделать ссылку похожей на основной текст и применить эффект наведения, добавьте к элементу <a> класс .uk-link-text. Вы также можете добавить класс к родительскому элементу, и он будет применен ко всем элементам <a> внутри родителя. Это полезно для списков из ссылок в подвале сайта.

<a class="uk-link-text" href="#"></a>

Модификатор «Heading»

Чтобы оформить ссылку внутри элемента заголовка, добавьте класс .uk-link-heading к элементу <a>.

<h3><a class="uk-link-heading" href="#"></a></h3>

  • Заголовок 

  • <h3>
	<a class="uk-link-heading" href="#">Заголовок</a>
</h3>

Модификатор «Reset»

Чтобы в UIkit 3 сбросить цвет ссылки и она наследовала цвет своего родителя, добавьте класс .uk-link-reset. Ссылка не будет иметь hover-эффекта при наведении. Это полезно для ссылок внутри заголовка.

Вы также можете добавить класс к родительскому элементу, и он будет применен ко всем внутренним элементам <a>.

Примеры
Ссылка, заголовок, текст.

  • Ссылка на сайт

    Заголовок

    Пожарный CSS мечтательно смотрел в огонь и ничего не делал. Банк горел, кредит гасился. 
  • <a class="uk-link-reset" href="#">Ссылка на сайт</a>

<h3>
	<a class="uk-link-reset" href="#">Заголовок</a>
</h3>

<!-- Ниже добавлен класс к родительскому элементу -->
<div class="uk-link-reset">
	Пожарный <a href="#">CSS</a> мечтательно смотрел в огонь и ничего не делал. Банк горел, кредит гасился.
</div>

Плюшка «Toggle»

Чтобы использовать ссылку в качестве родительского элемента и применить стиль ссылки к одному из его дочерних элементов, просто добавьте класс .uk-link-toggle к родительскому элементу и один из классов .uk-link-* к дочернему элементу. Например, вы можете связать всю карту и по-прежнему иметь эффект наведения на заголовок.

<a class="uk-link-toggle" href="#">
    <span class="uk-link-heading"></span>
</a>

Пример