Link

Define different styles to integrate links into specific content.

Usage

To apply this component, add the .uk-link class to an <a> element.

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

Muted modifier

If you want the link to apply a muted style instead, just add the .uk-link-muted class to the anchor element. You can also add the class to a parent element, and it will be applied to all <a> elements inside it.

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

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

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

<p class="uk-link-muted uk-margin">
  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.
</p>

Text modifier

To make a link appear like body text and apply a hover effect, add the .uk-link-text class to the anchor element. You can also add the class to a parent element, and it will be applied to all <a> elements inside it. This is useful for link lists in the page footer.

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

- Link
- Link
- Link

<ul class="uk-link-text uk-list">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Reset modifier

To reset a link’s color, so that it inherits the color from its parent, add the .uk-link-reset class. There won’t be any hover effect at all. This is useful for links inside heading elements. You can also add the class to a parent element, and it will be applied to all <a> elements inside it.

Link
Heading

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

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

Toggle

To use an anchor as a parent element and apply the link style on one of its child elements, just add the .uk-link-toggle class to the parent element and one of the .uk-link-* classes to the child element. For instance, you can link the whole card and still have the hover effect on the heading.

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

Heading

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

<a
  href
  class="uk-card uk-card-body uk-card-default uk-link-toggle uk-display-block uk-width-medium"
>
  <h3 class="uk-card-title">
    <span class="uk-link-text">Heading</span>
  </h3>
  <p class="uk-margin">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
</a>

Theme development

On your tailwind.config.js file, add the Link component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        link: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
`hook-muted`	`a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted`
`hook-muted-hover`	`a.uk-link-muted:hover, .uk-link-muted a:hover, .uk-link-toggle:hover .uk-link-muted`
`hook-text`	`a.uk-link-text, .uk-link-text a, .uk-link-toggle .uk-link-text`
`hook-text-hover`	`a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text`
`hook-heading`	`a.uk-link-heading, .uk-link-heading a, .uk-link-toggle .uk-link-heading`
`hook-heading-hover`	`a.uk-link-heading:hover, .uk-link-heading a:hover, .uk-link-toggle:hover .uk-link-heading`
`hook-reset`	`a.uk-link-reset, .uk-link-reset a`
`hook-misc`	`*`