The file downloads component shows downloadable content to users in a container. When the file is available in more than one language, the file downloads component displays the files in an expandable sub container.
Anatomy
Default
| Elements | Mandatory | Description |
|---|
| heading | yes | heading of the file that is available for download |
| file details | yes | file details display the file language, file type and file size |
| link | yes | the link downloads the file when selected |
Conditional (translated/multiple languages)
| Elements | Mandatory | Description |
|---|
| button | yes | button indicates file is available to download in multiple languages |
| translated content | yes | translated content of the file that is available for download |
| helper text | no | helper text assists the user in selecting the appropriate file and language |
Do's
- keep the heading of each file short, distinct and indicative
- always include the file language, file type and file size
Don'ts
- don't use it without additional relevant content on the same page
- don't use heading that is ambiguous
When to use
- when you want to include additional relevant or supporting documents for download
When not to use
- Do not use link to hide important information that should be present at all time
File downloads with thumbnail/taxonomy
The file downloads with thumbnail component delivers downloadable content accompanied by a thumbnail image and description. When multiple translations are available, they are displayed in the container below the description.
The file downloads with taxonomy component provides a quick overview on the information linked to the taxonomy terms assigned to it. When multiple translations are available, they are placed in an expandable container below description.
Anatomy
Default
| Elements | Mandatory desktop | Description |
|---|
| label | no | label shows the importance of the file |
| metadata | no | metadata related to the file to be downloaded
Note: Note: the first metadata tag is emphasised and it will be capitalised; tags following have normal (sentence) capitalisation and are separated by a divider |
| heading | yes | heading of the downloadable file |
| description | no | a summary of the downloadable file |
| thumbnail image | no | image thumbnail is related to the linked media |
| file details | yes | file details displays the file language, file type and file size |
| link | yes | the link downloads the file when selected |
| horizontal description list | no | a list of items with taxonomy tags |
Conditional (translated/multiple languages)
| Elements | Mandatory desktop | Description |
|---|
| button | yes | button indicates file is available for download in multiple languages |
| translated content | yes | translated content of the file that is available for download |
| helper text | no | helper text assists the user in selecting the appropriate file and language |
Do's
- keep the heading of each file short, distinct and indicative
- always include the file language, file type and file size
- select images that are appropriate and representative of the linked file
Don'ts
- don't use it without additional relevant content on the same page
- don't use heading that is ambiguous
- don't choose images with large file size
When to use
- when you want to include additional relevant or supporting documents for download
When not to use
- Do not use link to hide important information that should be present at all time
