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.
{% set content %}
<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 %} >
{% apply spaceless %}
{{ text }}
{% endapply %}
{% if hidden_read_more %}
<span class="visually-hidden">
{{ hidden_read_more }}
</span>
{% endif %}
</a>
{% endset %}
{% if not add_dark_background %}
{{ content }}
{% else %}
{% include '@feature-block' with {
'modifier': 'primary dark-background',
'title': title,
'content': content
} %}
{% endif %}
<!-- Default -->
<a href='#'>
Link text </a>
<!-- External Link -->
<a href='https://stad.gent'>
Link text </a>
<!-- Link With Gent Be -->
<a href='https://uitingent.be'>
Link text </a>
<!-- Download Link -->
<a href='#' download>
Link text </a>
<!-- Mailto Link -->
<a href='mailto:info@stad.gent'>
Link text </a>
<!-- Standalone -->
<a href='#' class="standalone-link">
Link text </a>
<!-- Standalone External -->
<a href='https://stad.gent' class="standalone-link">
Link text </a>
<!-- Standalone Mailto -->
<a href='mailto:info@stad.gent' class="standalone-link">
Link text </a>
<!-- Standalone Download -->
<a href='#' class="standalone-link" download>
Link text </a>
<!-- Standalone Back -->
<a href='#' class="standalone-link back">
back </a>
<!-- External Link Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='https://stad.gent'>
Link text </a>
</p>
</div>
<!-- Download Link Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='#' download>
Link text </a>
</p>
</div>
<!-- Mailto Link Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='mailto:info@stad.gent'>
Link text </a>
</p>
</div>
<!-- Standalone Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='#' class="standalone-link">
Link text </a>
</p>
</div>
<!-- Standalone External Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='https://stad.gent' class="standalone-link">
Link text </a>
</p>
</div>
<!-- Standalone Mailto Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='mailto:info@stad.gent' class="standalone-link">
Link text </a>
</p>
</div>
<!-- Standalone Download Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='#' class="standalone-link" download>
Link text </a>
</p>
</div>
<!-- Standalone Back Background Dark -->
<div class="feature-block primary dark-background">
<p> <a href='#' class="standalone-link back">
back </a>
</p>
</div>
<!-- Link Styled As Button -->
<a href='#' class="button button-primary">
Link text </a>
<!-- Link Styled As Button Mailto -->
<a href='mailto:info@stad.gent' class="button button-primary">
Link text </a>
<!-- Link Styled As Button Download -->
<a href='#' class="button button-primary" download>
Link text </a>
<!-- Link Styled As Button External -->
<a href='https://stad.gent' class="button button-primary">
Link text </a>
<!-- Link Styled As Button Block -->
<a href='#' class="button button-primary button-block">
Link text </a>
<!-- Link Styled As Button Block Mailto -->
<a href='mailto:info@stad.gent' class="button button-primary button-block">
Link text </a>
<!-- Link Styled As Button Block Download -->
<a href='#' class="button button-primary button-block" download>
Link text </a>
<!-- Link Styled As Button Block Custom Icon -->
<a href='#' class="button button-primary button-block icon-favicon">
Link text </a>
/* Default */
{
"link": "#",
"text": "Link text",
"aria_label": null
}
/* External Link */
{
"link": "https://stad.gent",
"text": "Link text",
"aria_label": null
}
/* Link With Gent Be */
{
"link": "https://uitingent.be",
"text": "Link text",
"aria_label": null
}
/* Download Link */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"download": true
}
/* Mailto Link */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null
}
/* Standalone */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link"
}
/* Standalone External */
{
"link": "https://stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link"
}
/* Standalone Mailto */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link"
}
/* Standalone Download */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link",
"download": true
}
/* Standalone Back */
{
"link": "#",
"text": "back",
"aria_label": null,
"modifier": "standalone-link back"
}
/* External Link Background Dark */
{
"link": "https://stad.gent",
"text": "Link text",
"aria_label": null,
"add_dark_background": true
}
/* Download Link Background Dark */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"download": true,
"add_dark_background": true
}
/* Mailto Link Background Dark */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null,
"add_dark_background": true
}
/* Standalone Background Dark */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link",
"add_dark_background": true
}
/* Standalone External Background Dark */
{
"link": "https://stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link",
"add_dark_background": true
}
/* Standalone Mailto Background Dark */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link",
"add_dark_background": true
}
/* Standalone Download Background Dark */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "standalone-link",
"download": true,
"add_dark_background": true
}
/* Standalone Back Background Dark */
{
"link": "#",
"text": "back",
"aria_label": null,
"modifier": "standalone-link back",
"add_dark_background": true
}
/* Link Styled As Button */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary"
}
/* Link Styled As Button Mailto */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary"
}
/* Link Styled As Button Download */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary",
"download": true
}
/* Link Styled As Button External */
{
"link": "https://stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary"
}
/* Link Styled As Button Block */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary button-block"
}
/* Link Styled As Button Block Mailto */
{
"link": "mailto:info@stad.gent",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary button-block"
}
/* Link Styled As Button Block Download */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary button-block",
"download": true
}
/* Link Styled As Button Block Custom Icon */
{
"link": "#",
"text": "Link text",
"aria_label": null,
"modifier": "button button-primary button-block icon-favicon"
}
$link-padding: .2em;
%a,
a {
@include theme('color', 'color-tertiary', 'link-color');
@include link-background('color-primary', 'color-primary--lighten-4', 'link-underline-color', 'link-hover-background');
@include semi-bold-text;
position: relative;
text-decoration: none;
word-wrap: break-word;
word-break: break-word;
&::before,
&::after {
display: inline;
margin-left: 5px;
transition: margin .1s ease-in;
border: 0;
font-size: 1.3em;
line-height: 1.4em;
vertical-align: middle;
}
// Different button link types. These are links styled as a button.
&.button,
&.tag {
@include button;
@include button-icon;
// Overrule flex for IE
align-items: flex-start;
padding-top: .6em;
border-bottom: 0;
background-image: inherit;
&:not([class*="icon"]) {
@include button-icon;
@include icon(arrow-right, 'after');
}
&[href^="mailto:"]:not(.no-icon) {
@include button-icon;
@include icon(envelope, 'after');
}
&[href^="tel:"]:not(.no-icon) {
@include button-icon;
@include icon(phone, 'after');
}
&[download] {
&:not(.no-icon):not(.tag),
&[href^="http://"]:not([href*="gent.be"]),
&[href^="https://"]:not([href*="gent.be"]) {
@include button-icon;
@include icon(download, 'after');
margin-right: 0;
}
}
&.button-success {
@extend %button-success;
}
&.button-alert {
@extend %button-alert;
}
&::after {
margin-left: 8px;
}
}
&.button:not(.no-icon):not([class^="icon-"]):not([download]) {
&[href^="http://"]:not([href*="gent.be"]),
&[href^="https://"]:not([href*="gent.be"]) {
@include button-icon;
@include icon(arrow-right-top, 'after');
}
}
///
/// Stand alone links.
///
&.standalone-link:not(.no-icon) {
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([href*="gent.be"]):not(.back):not(.refresh),
&.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]),
&.standalone-link[href*="gent.be"],
&.button[href*="gent.be"] {
@extend %a-arrow-animation;
}
&.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([href*="gent.be"]):not(.back):not(.refresh),
&.standalone-link[href*="gent.be"] {
@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):not(.tag):not([href*="gent.be"]),
&[href^="https://"]:not(.no-icon):not(.tag):not([href*="gent.be"]) {
@include icon(arrow-right-top, after);
&[download]:not(.button):not(.no-icon) {
@include icon(download, after);
}
}
&.refresh:not(.no-icon),
&.back:not(.no-icon) {
@extend %a-arrow-animation--left;
margin-left: 32px;
padding-left: 0;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: -44px;
height: 24px;
margin-top: auto;
margin-bottom: auto;
padding-right: 4px;
padding-left: 8px;
}
}
&.back:not(.no-icon) {
@include icon('arrow-left', after);
}
&.refresh:not(.no-icon) {
@include icon('refresh', after);
}
.dark-background & {
@include reset-link-background;
@include link-background('color-none', 'color-none', 'spotlight-link-border-color', 'spotlight-link-background-color');
@include theme('color', 'color-none');
&:hover,
&:focus {
@include theme('color', 'color-primary');
}
}
}
%a-arrow-animation {
&::after,
&::before {
padding-right: 4px;
animation: arrow-reverse .5s 1;
animation-fill-mode: revert;
}
&:focus,
&:hover {
&::after,
&::before {
animation: arrow .5s 1;
animation-fill-mode: forwards;
// 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: 4px;
padding-left: 0;
}
100% {
padding-right: 0;
padding-left: 4px;
}
}
@keyframes arrow-reverse {
0% {
padding-right: 0;
padding-left: 4px;
}
100% {
padding-right: 4px;
padding-left: 0;
}
}
}
%a-arrow-animation--left {
&::after,
&::before {
animation: arrow-left-reverse .5s 1;
animation-fill-mode: reverse;
}
&:focus,
&:hover {
&::after,
&::before {
animation: arrow-left .5s 1;
animation-fill-mode: forwards;
// 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: 4px;
padding-left: 8px;
}
100% {
padding-right: 8px;
padding-left: 4px;
}
}
@keyframes arrow-left-reverse {
0% {
padding-right: 8px;
padding-left: 4px;
}
100% {
padding-right: 4px;
padding-left: 8px;
}
}
}
///
/// External links other than group Ghent get an indicator.
///
%a-remove-indicator {
&[href^="http://"]:not([href*="gent.be"]),
&[href^="https://"]:not([href*="gent.be"]) {
&:not([download]):not(.standalone-link) {
margin-right: 0;
&::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):not([href*="gent.be"]),
&[href^="https://"]:not(.no-icon):not([href*="gent.be"]) {
@extend %a-arrow-animation;
@include icon(arrow-right);
&::after {
content: none;
}
}
}
}