@gemeente-denhaag/ctadownload v0.1.1-alpha.300
Call To Action Download
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.
When to use
Use a download when there are attachments that can be downloaded such as a document.
Alternatives and related components
None.
Anatomy
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;
(Interactive) states
The download contains the states normal, hover and focus.
Design properties
Typography
- Header link: TheSans/lg/700;
- Metadata: TheSans/lg/400;
Colors
- 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;
Interactive states
Hover
- header link text color Blue/4;
- supportive icon background-color Blue/4;
Focus
- header link text color Blue/4;
- supportive icon background-color Blue/4;
- container border color Ocher/5
Structure
- 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;
Accessibility
Content guidelines
Heading link
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.;
Metadata
- The metadata should:
- Show the abbreviation of the file type (e.g. PDF, JPG, DOC)
Best practices
Do's
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%);
Don'ts
Download should:
- Not be described as a file;
- Not open the file in another tab;
References
9 days ago
16 days ago
16 days ago
22 days ago
29 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago