We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Define different styles to integrate links into specific content.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Link component
within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
link: {
hooks: {}
}
}
}),
To apply this component, add the .uk-link
class to an <a>
element.
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>
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>
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>
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.
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>
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>