File Download

File download

When to use this component

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).

When not to use this component

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.

How it works

The file download component consists of two elements:

  • A link to a document using the standalone link style (default) or using the button link style.
  • A span text showing the file format and the file size of the document.

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).

Usage within the style guide

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"
}

  • Content:
    .file-type {
      text-transform: uppercase;
      white-space: nowrap;
    
      .file-size {
        text-transform: lowercase;
      }
    
      a + & {
        margin-left: 1rem;
      }
    }
    
  • URL: /components/raw/file-download/_file-download.scss
  • Filesystem Path: components/31-molecules/file-download/_file-download.scss
  • Size: 156 Bytes