Links
Links are used to highlighting texts which will redirect the user to a part of your website or some external website.
Basic links
Basic links are displayed in the primary text colour of the site's theme. On hover, the colour of the link changes to the primary colour. You can also customize their hover colour using classes associated with other accent colours.
<a class="link">Visit</a>
<a class="link link--secondary">Visit</a>
<a class="link link--tertiary">Visit</a>Underlined links
Underlined links have a border below them, the color of the border can be changed using classes mapping to the site's theme.
<a class="link link--underline">Visit</a>
<a class="link link--secondary link--underline">Visit</a>
<a class="link link--tertiary link--underline">Visit</a>Animated links
This style add an underline to the link on hover and removes it, it has a cool animation which makes the underline move when hovered on and off. The effects can be from left to right, from center, from right to left.
<a class="link link--primary link--animated">Visit</a>
<a class="link link--secondary link--animated link--animated--centerd">
Visit
</a>
<a class="link link--tertiary link--animated link--animated--right">
Visit
</a>Button links
You can also style the links as buttons using the button component classes.
<a class="link link--underline">Visit</a>
<a class="link link--secondary link--underline">Visit</a>
<a class="link link--tertiary link--underline">Visit</a>