Компонент Ссылка
Устанавливайте различные стили для ссылок. Использование модификаторов. Сбросить цвет ссылки. Применить стиль ссылки к одному из его дочерних элементов. Руководство. Примеры.
Модификатор «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>
<ul class="uk-list uk-link-text">
<li><a href="#">Создание анимации</a></li>
<li><a href="#">Grid</a></li>
<li><a href="#">Flexbox</a></li>
</ul>Модификатор «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>.
Примеры
Ссылка, заголовок, текст.
Заголовок
<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>
Пример
<a href class="uk-display-block uk-card uk-card-body uk-card-default uk-link-toggle uk-width-medium">
<h3 class="uk-card-title"><span class="uk-link-heading">Заголовок</span></h3>
<p>Просыпаюсь. Утро. Весь в цветах. Думаю, ну всё... Пох0ронили уже. Ан нет, всё нормально. Клумба.</p>
</a>