A link is used to trigger navigation. A link is used to link a web page (internal or external link) or a document (document link). A link can also be used to link to an e-mail address (mailto link).
Do not use a link to trigger an action. In this case, use a button.
All links must have the default behavior, in other words they should open in the same window. This is the case for all types of links, internal links, external links and also links to documents and print-friendly versions of web pages.
The only exception that could be made is when opening the link would otherwise interrupt an ongoing process:
…, using a modal could be a better solution.
By default, a link is shown as a link. Links can also by styled as a button. This can be particulary useful in call-to-actions. Note that while a link can be styled as a button, it is important that it remains a link and not a button.
With the exception of the default (inline) internal link, links show an icon to give an extra hint that it is a link and what type of link it is. The icon is always shown at the right of the label of the link. See the examples.
<a
{% if rel %}
rel="{{ rel }}"
{% endif %}
href='{{ link }}'
{% if modifier %}
class="{{ modifier }}"
{% endif %}
{% if aria_label %}
aria-label="{{ aria_label }}"
{% endif %}
{% if download %}
download
{% endif %}
{% if title %}
title="{{ title }}"
{% endif %} >
{% spaceless %}
{{ text }}
{% endspaceless %}
{% if hidden_read_more %}
<span class="visually-hidden">
{{ hidden_read_more }}
</span>
{% endif %}
</a>
<a href='#' class="button button-primary" download>
Link text </a>
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary",
"download": true
}
$link-padding: .2em;
%a,
a {
@include theme('color', 'color-primary', 'link-color');
@include link-background('color-primary', 'color-primary--lighten-4', 'link-underline-color', 'link-background-color');
@include bold-text;
padding: $link-padding 0;
border-radius: border-radius('radius-1');
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
text-decoration: none;
word-wrap: break-word;
// Different button link types. These are links styled as a button.
&.button {
@include reset-link-background;
@include button;
@include button-icon;
// Overrule flex for IE
align-items: flex-start;
padding-top: .6em;
&::before,
&::after {
line-height: 1.4em;
}
&:not([class*="icon"]) {
@include button-icon;
@include icon(arrow-right);
}
&[href^="http://"]:not(.no-icon),
&[href^="https://"]:not(.no-icon) {
@include button-icon;
@include icon(external-link);
}
&[href^="mailto:"]:not(.no-icon) {
@include button-icon;
@include icon(envelope);
}
&[href^="tel:"]:not(.no-icon) {
@include button-icon;
@include icon(phone);
}
&[download]:not(.no-icon) {
@include button-icon;
@include icon(download);
}
&.button-success {
@extend %button-success;
}
&.button-alert {
@extend %button-alert;
}
}
&::before,
&::after {
transition: margin .1s ease-in;
font-size: 1.5em;
line-height: 1em;
vertical-align: -25%;
}
&:not(.button)::after {
margin-left: .2rem;
}
///
/// Stand alone links.
///
&.standalone-link:not(.no-icon) {
@include reset-link-background;
margin-left: 0;
padding-left: 0;
&:focus,
&:hover {
@include theme('color', 'color-primary--darken-2', 'link-hover-color');
}
}
&.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back),
&.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]) {
@extend %a-arrow-animation;
}
&.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back) {
@include icon(arrow-right, after);
}
///
/// Download links.
///
&[download]:not(.no-icon) {
@include icon(download, after);
}
///
/// Mail links.
///
&[href^="mailto:"]:not(.no-icon) {
@include icon(envelope, after);
}
///
/// Phone links.
///
&[href^="tel:"]:not(.no-icon) {
@include icon(phone, after);
}
///
/// External links get an indicator.
///
&[href^="http://"]:not(.no-icon),
&[href^="https://"]:not(.no-icon) {
@include icon(external-link, after);
&[download]:not(.button):not(.no-icon) {
@include icon(download, after);
}
}
&.back:not(.no-icon) {
@extend %a-arrow-animation--left;
@include icon(fancyback, after);
display: inline-flex;
flex-direction: row-reverse;
padding-left: 0;
&::after {
margin-left: -.2rem;
padding-right: .2rem;
padding-left: .4rem;
}
}
}
%a-arrow-animation {
&::after,
&::before {
padding-right: .2rem;
}
&:focus,
&:hover {
&::after,
&::before {
animation: arrow 1s 2;
// Animation causes pointer flickering in IE.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
animation: none;
}
}
}
@keyframes arrow {
0% {
padding-right: .2rem;
padding-left: 0;
}
40% {
padding-right: 0;
padding-left: .2rem;
}
100% {
padding-right: .2rem;
padding-left: 0;
}
}
}
%a-arrow-animation--left {
&:focus,
&:hover {
&::after,
&::before {
animation: arrow-left 1s 2;
// Animation causes pointer flickering in IE.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
animation: none;
}
}
}
@keyframes arrow-left {
0% {
padding-right: .2rem;
padding-left: .4rem;
}
40% {
padding-right: .4rem;
padding-left: .2rem;
}
100% {
padding-right: .2rem;
padding-left: .4rem;
}
}
}
///
/// External links other than group Ghent get an indicator.
///
%a-remove-indicator {
&[href^="http://"],
&[href^="https://"] {
&[href*="stad.gent"] {
&:not([download]):not(.standalone-link)::after {
content: none;
}
///
/// Download links.
///
&[download] {
@include icon(download, after);
}
///
/// Stand alone links.
///
&.standalone-link:not(.no-icon) {
@extend %a-arrow-animation;
@include icon(arrow-right, after);
}
}
}
&.button {
&[href^="http://"]:not(.no-icon),
&[href^="https://"]:not(.no-icon) {
&[href*="stad.gent"]:not(.no-icon) {
@extend %a-arrow-animation;
@include icon(arrow-right);
&::after {
content: none;
}
}
}
}
}