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 wmnds-file-download__link" download="example_file.pdf">
Download 'example file' (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
| Name | Type | Description |
|---|---|---|
| fileName | string | Required. The file name of the download. |
| fileType | string | Required. The file type of the download e.g. doc, pdf. |
| fileSize | string | The size of the file |
| downloadLinkText | string | Custom text to be displayed in the download link. |
| accessible | boolean | Determines 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 wmnds-file-download__link" download="file_name.filetype">
Download 'file name' (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
| Name | Type | Description |
|---|---|---|
| fileName | string | Required. The file name of the download. |
| fileType | string | Required. The file type of the download e.g. doc, pdf. |
| fileSize | string | The size of the file |
| downloadLinkText | string | Custom text to be displayed in the download link. |
| accessible | boolean | Determines whether to display the file as an accessible or non-accessible file component. Defaults to true. |