<a class="link " href="#" title="Title">
Link
</a>
<a
class="link {{ class }}"
href="{{ href }}"
{{{ attributes }}}
{{#if title}}
title="{{ title }}"
{{else}}
title="{{ text }}"
{{/if}}
>
{{ text }}
</a>
{
"href": "#",
"title": "Title",
"text": "Link"
}
$link__display : inline-flex !default;
$link__font-family : $font-family-base !default;
$link__font-weight : $font-weight-normal !default;
$link__line-height : $font-line-height !default;
$link__decoration : none !default;
$link__decoration-inline : underline !default;
$link__decoration-hover : underline !default;
$link__color : $color-primary !default;
$link__color-hover : $color-info !default;
$link__color--invert : $color-info !default;
$link__color-hover--invert : $color-primary !default;
$link__color--secondary : $color-secondary !default;
$link__color-hover--secondary: $color-primary !default;
$link__transition : $transition-base !default;
.link {
display: $link__display;
color: $link__color;
font-family: $link__font-family;
font-weight: $link__font-weight;
line-height: $link__line-height;
text-decoration: $link__decoration;
transition: $link__transition;
&:hover {
color: $link__color-hover;
text-decoration: $link__decoration-hover;
cursor: pointer;
}
&--invert {
color: $link__color--invert;
&:hover {
color: $link__color-hover--invert;
}
}
&--secondary {
color: $link__color--secondary;
&:hover {
color: $link__color-hover--secondary;
}
}
// visible only for screen readers and when focused
&--visually-hidden {
@include visually-hidden($usePseudo: true);
}
&--button {
&:hover {
color: inherit;
}
}
p &,
cite & {
background-clip: content-box;
text-decoration: $link__decoration-inline;
&.focus-visible:not(.banner) {
@include focus-inline();
}
}
}
a {
@extend .link;
}
There are no notes for this item.