A download displays a link to download an attachment and metadata about the file. The metadata shows users how big the file is so they can decide if they want to download it.
Use a download when there are attachments that can be downloaded such as a document.
None.
The download consists of:
- Support icon: shows a download icon;
- Header link: shows the name of the file;
- Metadata: shows the extension and the size of the file;
- Container;
The download contains the states normal, hover and focus.
- Header link: TheSans/lg/700;
- Metadata: TheSans/lg/400;
- Supportive icon: background-color Blue/3, icon svg color white;
- Header link: text color Blue/3;
- Metadata: text color Grey/4;
- Container: border-top and border-bottom line color Grey/2;
- header link text color Blue/4;
- supportive icon background-color Blue/4;
- header link text color Blue/4;
- supportive icon background-color Blue/4;
- container border color Ocher/5
- Supportive icon: background circle size 64px, icon size 24px, padding-left 16px, padding-right 24px;
- Header link: padding-bottom 4px;
- Header link and metadata: padding-right 16px;
- Container: padding-top and padding-bottom 24px, border-width 1px;
[technical requirements]
The heading link should:
- Describe in a few words what the file is about;
- Not use the hyphen when breaking the text. Let the text continue on the next line.;
- The metadata should:
- Show the abbreviation of the file type (e.g. PDF, JPG, DOC)
Downloads should:
- Be used for all downloads;
- Describe what the file is;
- Include file type and size. Showing the file size is particularly nice for users that are on reduced data allowences (i.e. mobile), and also offers an indication on how long a file might take to download;
- Show the size in kB’s when it’s <1000 kB and in MB’s when it’s >999 kB;
- Show 1 decimal after the decimal point of the size;
- Download the file on the used device;
- Be grouped under each other when there is more than 1 download;
- Be placed under or between a text (usually in a list);
- Be full width (100%);
Download should:
- Not be described as a file;
- Not open the file in another tab;