Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

File download

About

What does it do?

  • Allows users to download an offline version of the on-page content.
  • Allows users who rely on assistive technology to access an offline version of the on-page content.
  • Shows users how big the file is so they can decide if they want to download it.

Accessible file

When to use it?

  • When you have an accessible, offline version of the on-page content.
  • When you have additional information within an accessible document.

When not to use it?

  • If the download document is not accessible to users with assistive technology. In that instance, use the non-accessible file component.


HTML markup
<div class="wmnds-file-download">
  <svg class="wmnds-file-download__icon">
    <use xlink:href="#wmnds-general-file" href="#wmnds-general-file"></use>
  </svg>
  <div class="wmnds-file-download__desc">
    <a href="#" title="link title" target="_self" class="wmnds-link" download="example_file.pdf">
      Download &#39;example file&#39; (pdf, 3MB)
    </a>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/file-download/_file-download.njk" import wmndsFileDownload %}

{{
    wmndsFileDownload({
        fileName: "example file",
        fileType: "pdf",
        fileSize: "1MB",
        downloadLinkText: "Download file",
        accessible: true
    })
}}

Nunjucks properties
NameTypeDescription
fileNamestringRequired. The file name of the download.
fileTypestringRequired. The file type of the download e.g. doc, pdf.
fileSizestringThe size of the file
downloadLinkTextstringCustom text to be displayed in the download link.
accessiblebooleanDetermines whether to display the file as an accessible or non-accessible file component. Defaults to true.

Non-accessible file

What does it do?

  • Shows the user that the file is not accessible
  • Offers the user a way to get the file in a different format

When to use it?

  • When you have an offline version of the on-page content which is not accessible
  • When the file cannot be made accessible. For example, complex maps.

When not to use it?

  • If the document is accessible to users with assistive technology. In that instance, use the accessible file component.
  • You still need to make the document accessible as soon as possible. Ideally before publishing it.

Download 'file name' (filetype)

This file may not be suitable for users of assistive technology.
Request an accessible format.


HTML markup
<div class="wmnds-file-download wmnds-file-download--non-accessible">
  <svg class="wmnds-file-download__icon">
    <use xlink:href="#wmnds-general-file" href="#wmnds-general-file"></use>
  </svg>
  <div class="wmnds-file-download__desc">
    <a href="#" title="link title" target="_self" class="wmnds-link" download="file_name.filetype">
      Download &#39;file name&#39; (filetype)
    </a>
    <p class="wmnds-file-download__warning">
      This file may not be suitable for users of assistive technology. <br>
      <a href="#" class="wmnds-link">Request an accessible format.</a>
    </p>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/file-download/_file-download.njk" import wmndsFileDownload %}

{{
    wmndsFileDownload({
        fileName: "example file",
        fileType: "pdf",
        fileSize: "1MB",
        downloadLinkText: "Download file",
        accessible: true
    })
}}

Nunjucks properties
NameTypeDescription
fileNamestringRequired. The file name of the download.
fileTypestringRequired. The file type of the download e.g. doc, pdf.
fileSizestringThe size of the file
downloadLinkTextstringCustom text to be displayed in the download link.
accessiblebooleanDetermines whether to display the file as an accessible or non-accessible file component. Defaults to true.