Link
Styles for text used to navigate between sections or pages.
Less mixin
This component has been implemented as a Less mixin, not a Vue component. This mixin must be imported separately in your Less styles. See below for usage information.
WARNING
Before importing the Link mixin, you must first import the design tokens. If you don't, you will get errors that look like variable @color-progressive is undefined
.
Demos
Click on a link to see visited link styles.
Standard link
The cat (Felis catus) is a domestic species of small carnivorous mammal.
Underlined link
As a predator, it is crepuscular, i.e. most active at dawn and dusk.
Link with icon
According to "Living with a Cat", cats are ready to go to new homes at about 12 weeks of age.
Red link
Websites for cat lovers include The Catnip Times and Vanggy.
Usage
Default usage
To use standard, underlined, and red link styles, apply the .cdx-mixin-link()
mixin to a link class or to all anchor elements. This will automatically apply underline styles to links with the .is-underlined
class, and red link styles to links with the .is-red-link
class.
In ancient Egypt, cats were worshipped.
In ancient Egypt, cats were worshipped.
In ancient Egypt, cats were worshipped.
With custom CSS selectors
Alternately, you can apply sub-mixins directly to your own CSS selectors. The sub-mixins are:
.cdx-mixin-link-base()
.cdx-mixin-link-underlined()
.cdx-mixin-link-red()
The domestic cat is a cosmopolitan species.
The domestic cat is a cosmopolitan species.
The domestic cat is a cosmopolitan species.