File download

About

What does it do?

Allows users to download an offline version of the on-page content
Allows users who rely on assistive technology to access an offline version of the on-page content.
Shows users how big the file is so they can decide if they want to download it.

Accessible file

When to use it?

When you have an accessible, offline version of the on-page content.
When you have additional information within an accessible document.

When not to use it?

If the download document is not accessible to users with assistive technology. In that instance, use the non-accessible file component.

Component example

Download fileName (fileType), (fileSize)

HTML Markup

<div class="wmre-file-download ">
    <svg class="wmre-file-download__icon">
      <use xlink:href="#wmre-general-file" href="#wmre-general-file"></use>
    </svg>

    
    
    <div class="wmre-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmre-link">
            Download fileName (fileType), (fileSize)  
        </a>
        
        
    </div>
    
</div>

Non-accessible file

What does it do?

Shows the user that the file is not accessible
Offers the user a way to get the file in a different format

When to use it?

When you have an offline version of the on-page content which is not accessible
When the file cannot be made accessible. For example, complex maps.

When not to use it?

If the document is accessible to users with assistive technology. In that instance, use the accessible file component.
You still need to make the document accessible as soon as possible. Ideally before publishing it.

Component example

Download fileName (fileType), (fileSize)

This file may not be suitable for users of assistive technology.
Request an accessible format.

HTML Markup

<div class="wmre-file-download ">
    <svg class="wmre-file-download__icon">
      <use xlink:href="#wmre-general-file" href="#wmre-general-file"></use>
    </svg>

    
    
    <div class="wmre-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmre-link">
            Download fileName (fileType), (fileSize)  
        </a>
        <p class="wmre-file-download__warning">
            This file may not be suitable for users of assistive technology. <br>
            <a href="#" class="wmre-link">Request an accessible format.</a>
        </p>
        
    </div>
    
</div>

Document link

What does it do?

Links to a html document

When to use it?

When you have an html version of a document available.

When not to use it?

When linking to a non html document e.g. pdf, doc, docx

Component example

HTML document link

HTML Markup

<div class="wmre-file-download ">
    <svg class="wmre-file-download__icon">
      <use xlink:href="#wmre-general-file" href="#wmre-general-file"></use>
    </svg>

    
    
    <div class="wmre-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmre-link">
              HTML document link 
        </a>
        
        
    </div>
    <svg class="wmre-file-download__chevron-icon">
      <use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
    </svg>

</div>

HTML & PDF links

Component example

Document name

Published 10 July 2021
Updated 12 July 2021 - see all updates

HTML Markup

<div class="wmre-file-download wmre-file-download--document">
    
    <svg class="wmre-file-download__icon">
      <use xlink:href="#wmre-general-html" href="#wmre-general-html"></use>
    </svg>

    
    <div class="wmre-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmre-link">
            Document name  
        </a>
        
        <p class="wmre-file-download__warning">
            Published 10 July 2021 <br>
            Updated 12 July 2021 - <a href="#" class="wmre-link">see all updates</a>
        </p>
    </div>
    
</div>

Component example

Download Document name (pdf, 7.88MB)

Published 10 July 2021

HTML Markup

<div class="wmre-file-download wmre-file-download--document">
    
    
    <svg class="wmre-file-download__icon">
      <use xlink:href="#wmre-general-pdf" href="#wmre-general-pdf"></use>
    </svg>

    <div class="wmre-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmre-link">
            Download Document name (pdf, 7.88MB)  
        </a>
        
        <p class="wmre-file-download__warning">
            Published 10 July 2021 
        </p>
    </div>
    
</div>