Links

Styles

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.
c-link

Primary Deprecated*

Lorem ipsum dolor sit amet consectetur adipiscing elit.
c-link c-link--primary

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.
c-link c-link--muted

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.
c-link c-link--inverse

Inherit

Lorem ipsum dolor sit amet consectetur adipiscing elit.
c-link c-link--inherit
Primary variant is deprecated
Following the update of the interaction colors in v1.18, there is no more visual difference between the default and primary variants. The primary will removed in a future release.

No-history

This variant remove any effect on visited links.

c-link--no-history

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inherit

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Underline

By default the links display an underline on hover. You can force the underline in any state with this variant.

c-link--underline

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inherit

Lorem ipsum dolor sit amet consectetur adipiscing elit.

No underline

By default the links display an underline on hover. You can prevent the underline tpo display in any state with this variant.

c-link--no-underline

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Inherit

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Next

Add a next icon with hover animation. The icon should be embbeded as SVG.

c-link--next

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Learn more

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Learn more

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Learn more

Inherit

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Learn more

Prev

Add a prev icon with hover animation. The icon should be embbeded as SVG.

c-link--prev

Default

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Back

Muted

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Back

Inverse

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Back

Inherit

0
Lorem ipsum dolor sit amet consectetur adipiscing elit.
Back

Interactive child

You can create link blocks with an inner (fake) link. When you add the is-interactive class to the wrapping link block, the inner link component will then react when you hover the parent block, instead of when hovering itself.

IC
Disney

Imbricated c-link components elements with is-interactive class.

IC
Disney

Imbricated c-link components elements without is-interactive class.