Use the file download component to link to a document as a standalone link, in other words not inside a text but separated from text (for instance in a call to action).
Do not use the file download component to link to a web page (internal or external link), to an e-mail address (mailto link) or to link to a document inside a text. In these case, use a normal link.
Do not use the file download component to trigger an action (other than downloading a file). In this case, use a button.
The file download component consists of two elements:
The file format and the file size of the document are shown so that the user knows what to expect, what kind of document it is and how large it is. For instance, the user could decide do not open the document now because of low bandwidth (in case of large file).
The file download component is used in the documents component.
{% include '@link' with {
'link': link,
'text': text,
'modifier': modifier|default('standalone-link'),
'download': file is defined
} %}
{% if file is defined %}
<span class="file-type">
{{ file.type }}
{% if file.size is defined %}
<span class="file-size">
({{ file.size }})
</span>
{% endif %}
</span>
{% endif %}
<!-- Default -->
<a href='#' class="standalone-link" download>
When the weather is hot </a>
<span class="file-type">
pdf
<span class="file-size">
(102 kb)
</span>
</span>
<!-- Button -->
<a href='#' class="button button-primary" download>
When the weather is hot </a>
<span class="file-type">
pdf
<span class="file-size">
(102 kb)
</span>
</span>
/* Default */
{
"link": "#",
"text": "When the weather is hot",
"file": {
"size": "102 kb",
"type": "pdf"
}
}
/* Button */
{
"link": "#",
"text": "When the weather is hot",
"file": {
"size": "102 kb",
"type": "pdf"
},
"modifier": "button button-primary"
}
.file-type {
text-transform: uppercase;
white-space: nowrap;
.file-size {
text-transform: lowercase;
}
a + & {
margin-left: 1rem;
}
}