Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

File download

A block containing information about a file with a link to download it

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.

Twelve icons for common file types
The Design System's icons for common file types

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

Back to top