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

Устанавливайте различные стили для ссылок.

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

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

<a class="uk-link-muted" href="#"></a>
  • Ссылка
  • <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="https://asuikit.com/v3/animation">Создание анимации</a></li>
        <li><a href="https://asuikit.com/v3/grid">Grid css</a></li>
        <li><a href="https://asuikit.com/v3/flex">Flexbox</a></li>
    </ul>

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

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

<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>

Пример

Документация
Компоненты