File download
Sample HTML
<div class="ds_file-download">
<div class="ds_file-download__thumbnail">
<a class="ds_file-download__thumbnail-link" aria-hidden="true" tabindex="-1" href="#">
<span class="visually-hidden">Document cover image</span>
<img class="ds_file-download__thumbnail-image" src="/binaries/content/gallery/designsystem/examples/ai-publication-cover-png" alt="" />
</a>
</div>
<div class="ds_file-download__content">
<a href="#" class="ds_file-download__title" aria-describedby="file-download-1">Scotland's Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive</a>
<div id="file-download-1" class="ds_file-download__details">
<dl class="ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File type</dt>
<dd class="ds_metadata__value">44 page PDF<span class="visually-hidden">,</span></dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File size</dt>
<dd class="ds_metadata__value">7.2 MB</dd>
</div>
</dl>
</div>
</div>
</div>About this component
The file download component presents a file that the user can download, with some supporting information.
The component features:
- the title of the file
- information about the file such as its file format and size
- a download link
- a thumbnail image
Both the thumbnail image and the download link can be clicked on to download the file.
Why we use this component
When you do not want to have a simple text link to a file, the file download component provides a consistent and eye-catching way of presenting files for download. It provides useful information about the file that can help users to decide whether or not to download it.
Other versions of this component
Generic thumbnail image
Sample HTML
<div class="ds_file-download">
<div class="ds_file-download__thumbnail">
<a class="ds_file-download__thumbnail-link" aria-hidden="true" tabindex="-1" href="#">
<span class="visually-hidden">Document cover image</span>
<img class="ds_file-download__thumbnail-image" src="/binaries/content/gallery/designsystem/examples/pdf-svg" alt="" />
</a>
</div>
<div class="ds_file-download__content">
<a href="#" class="ds_file-download__title" aria-describedby="file-download-1">Scotland's Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive</a>
<div id="file-download-1" class="ds_file-download__details">
<dl class="ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File type</dt>
<dd class="ds_metadata__value">44 page PDF<span class="visually-hidden">,</span></dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File size</dt>
<dd class="ds_metadata__value">7.2 MB</dd>
</div>
</dl>
</div>
</div>
</div>If there is no specific thumbnail image for your file, the Design System has a collection of icons for common file types that can be used instead.
These icons are included in the Design System’s npm module as well as the GitHub repository and should be copied into your own project.
Highlighted file
Sample HTML
<div class="ds_file-download ds_file-download--highlighted">
<div class="ds_file-download__thumbnail">
<a class="ds_file-download__thumbnail-link" aria-hidden="true" tabindex="-1" href="#">
<span class="visually-hidden">Document cover image</span>
<img class="ds_file-download__thumbnail-image" src="/binaries/content/gallery/designsystem/examples/ai-publication-cover-png" alt="" />
</a>
</div>
<div class="ds_file-download__content">
<a href="#" class="ds_file-download__title" aria-describedby="file-download-1">Scotland's Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive</a>
<div id="file-download-1" class="ds_file-download__details">
<dl class="ds_metadata ds_metadata--inline">
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File type</dt>
<dd class="ds_metadata__value">44 page PDF<span class="visually-hidden">,</span></dd>
</div>
<div class="ds_metadata__item">
<dt class="ds_metadata__key visually-hidden">File size</dt>
<dd class="ds_metadata__value">7.2 MB</dd>
</div>
</dl>
</div>
</div>
</div>A file download block can be highlighted to give it a more prominent appearance. This is useful in cases where there are many file download blocks and you want to give priority to one of them.
Highlighted blocks should be placed at the beginning of a group of file download blocks, and are most effective when used for a single file in a group.
Website analytics
To understand user behaviour, clicks on links in file download blocks can be tracked through the click URL, the click text and a data attribute showing the interaction.
To help identify clicks on the thumbnail or file icon, a span with hidden text has been added to the link.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Accessibility
While the file download component contains two links to the file, only the link in the file’s title is made available to screen readers. This avoids the repetition of having multiple links to the same item read out.
The download link uses ARIA attributes to give additional context to the link. The file’s supporting metadata is used in aria-describedby.
This ARIA attribute requires a unique ID attribute to be set on the metadata element.
Example screen reader output
In Voiceover, the download link on the file download block shown in the examples on this page would be announced like this when it has focus: ’Link. Scotland’s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive. File type: 44 page PDF, file size: 7.2 megabytes.’
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback