File download
Sample HTML for File download example
<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.
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
You can click on either the thumbnail image or the download link to download the file.
Why we use this component
The file download component provides a consistent way of presenting files for download. It provides useful information about the file such as the size and type of the file. This information can help users to decide whether to download it.
Other versions of this component
Generic thumbnail image
Sample HTML for File download example with generic icon
<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>The Design System includes a collection of icons for common file types. Use these if you do not have a specific cover image for your file.
These icons are in the Design System’s npm module as well as the GitHub repository. You should copy these into your own project.
Highlighted file
Sample HTML for File download example with highlight
<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>You can highlight a file download block can 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.
You should place any highlighted blocks at the beginning of a group of file download blocks. Highlighted blocks are most effective when they are the only one in a group.
Related components
- page metadata component
Website analytics
To understand user behaviour, you can track clicks on links in file download blocks through the click URL, the click text and a data attribute showing the interaction.
To help identify clicks on the thumbnail or file icon, there is a span with hidden text in that link.
The Design System’s ‘tracking’ script adds the data attributes.
Accessibility
Only the link in the file's title is available to screen readers. Screen readers skip the link on the thumbnail image. This avoids the repetition of having more than one link to the same item read out.
The download link uses ARIA attributes to give more context to the link. The link has an aria-describedby attribute using the file's supporting metadata.
This ARIA attribute requires a unique ID attribute to be set on the metadata element.
Example screen reader output
Voiceover announces the download link in a file download block 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.'