Define different styles to integrate links into specific content.
To apply this component, add the .z-link class to an <a> element.
If you want the link to apply a muted style instead, just add the .z-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="z-link-muted" href="#"></a>To make a link appear like body text and apply a hover effect, add the .z-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="z-link-text" href="#"></a>To reset a link’s color, so that it inherits the color from its parent, add the .z-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 .z-link-toggle class to the parent element and one of the .z-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="z-link-toggle" href="#">
<span class="z-link-text"></span>
</a>