Content
Link
The link component facilitates setting hyperlinks from inline text items, buttons, or cards to navigate between pages or external websites.
Variants
Default
The `link` component class serves as the standard class for the basic anchor tag.
Underline on hover
Apply the `link-hover` modifier class to make links underlined when hovered over.
Animated underline
Apply the `link-animated` modifier class to make links underlined with animation on hovered over.
Colors
Semantic links
Utilize the `link-{semantic-color}` modifier class to assign specific semantic colors to links.
Custom Color
Use the `--link-color` for the custom color of the link.
Illustrations
In paragraphs
Below is an example demonstrating how to use links within paragraph.
Tailwind CSS resets the appearance of links by default.
To restore them to a standard look, add the 'link' class, making it appear as a normal link once more.
In cards
Below is an example demonstrating how to use links in card.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
In alerts
Below is an example demonstrating how to use links in alert.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
link | component | Adds underline to a text. |
link-hover | style | Only show underline on hover. |
link-animated | style | Show underline on hover with animation. |
link-neutral | color | Applies'neutral' color to link. |
link-primary | color | Applies'primary' color to link. |
link-secondary | color | Applies'secondary' color to link. |
link-accent | color | Applies'accent' color to link. |
link-success | color | Applies'success' color to link. |
link-info | color | Applies'info' color to link. |
link-warning | color | Applies'warning' color to link. |
link-error | color | Applies'error' color to link. |
--link-color | variable | Link color var. |