File download

<div class="ds_file-download">
    <div class="ds_file-download__thumbnail">
        <a class="ds_file-download__thumbnail-link" aria-hidden="true" tabindex="-1" href="#">
            <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 for the user to download.

The component features:

• the title of the file – this is also the download link
• page metadata – information about the file such as its file format and size
• a thumbnail image – specific to the file or one of the Design System's provided icons

Users can click on either the thumbnail image or the download link to download the file.

There's also a highlighted block version of the component. 

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.

Thumbnail images

The thumbnail image helps users recognise the file and decide if they’ll download it.  

The image you use should either be:  

• specific to the file – for example, the cover page of a pdf 
• one of the Design System’s file icons – if you do not have a specific cover image for a file 

Using an image specific to the file makes it easier for users to recognise what the file is. 

Design System file icons 

The Design System provides icons for common file types. Choose the icon that corresponds to the file type you have. 

Icons for common file types are coloured with their brand colour associations to help users recognise them. We recommend using these colours rather than your brand colours.  

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 block version

You can highlight a file download block to make it more prominent. For example, when you need to draw users' attention to one download in a group of download options.

The download is highlighted with a blue line on the left-hand side.

Place any highlighted blocks at the beginning of a group of file download blocks. Highlighted blocks are most effective when there's only one in a group. 

<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="#">
            <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>

Website analytics

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

To avoid repetition for screen reader users, only the link in the file's title is read out by screen readers. Screen readers skip the link on the thumbnail image.

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

The voiceover announces the download link 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.'