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.

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

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

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

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

<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

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

Back to top