The Files component exists to surface downloadable content such as reports, forms, policy documents, various data sets, in a structured and predictable way.
It gives users the information they need to decide whether to download before committing - what the file is, what language it is in, what format it takes, and how large the file is.
File default
Do's
- write headings that describe the content and purpose of the document, not simply the filename or generic label
- always include the file language, file type, and file size. These details allow users to make an informed decision about whether to download
- use the multilingual expandable sub-container when the same document exists in several languages/translations. This keeps the file listing 'clean' and ensures language variants remain discoverable without requiring separate entries for each
- keep headings short and distinct, especially when multiple files appear on the same page. Users should be able to identify each item at a glance
Don'ts
- do not use the file's technical filename - they are rarely meaningful to users and can undermine trust
- do not include files without context, explanation of what the page is about, or why the file is relevant, as this can increase user uncertainty
When to use
- when you want to include additional or supplementary supporting documents for download that are relevant to the content of the page
When not to use
- do not use the Files component as the sole carrier of critical information. If content is essential for understanding the page, it must appear inline, not only as a download
- do not use for navigation. Use the Link component, Content Item or Cards
File download with thumbnail
The thumbnail variant adds a visual reference for visually rich content such as publications, brochures, or illustrated guides, helping users determine their relevance
Do's
- if using the thumbnail variant, keep in mind the small size available - select images that represent the document's content, e.g. cover page
Don'ts
- for the thumbnail variant, avoid images that are too detailed or complex to read at thumbnail scale. Unclear thumbnails add visual noise without aiding comprehension
When to use
- use the thumbnail variant when the files are visually distinctive for items such as publications, illustrated reports, brochures, or visual resources - where a thumbnail meaningfully helps users identify the right document before downloading
When not to use
- do not use the thumbnail variant when no meaningful visual representation exists for the document