Package Exports

@gemeente-denhaag/file
@gemeente-denhaag/file/index.css

Readme

File

A file displays a link to download an attachment and shows metadata about the file.

When to use

A file is used to present and download a file that is uploaded by the user or an employee.

None.

Anatomy

The file consists of:

File name: the name of the file
Preview: shows an icon of the type of the file (e.g. document, image)
Navigational link: shows the download option
Container

(Interactive) states

The file contains the states normal, hover and focus.

Design properties

Typography

File name: TheSans/md/400

Color

File name: text color Grey/4
Preview: icon svg color Grey/4, border color Grey/2
Container: border color Grey/2

Interactive states

Hover: title text color Blue/3, icon svg color Blue/3, container background-color warm/grey
Focus: title text color Grey/4, icon svg color Grey/4, container border color Ocher/5

Structure

File name: padding-left and padding-right 16px
Preview: icon size 24px, icon padding 16px
Navigational link: padding-left and padding-right 16px
Container: min-height 56px, padding-top and padding-bottom 16px, margin-bottom 16px, border 1px

Mobile

File name: padding-bottom 8px, padding-left and padding-right 16px
Navigational link: padding-left 16px
Preview: icon size 24px, icon padding-left and padding-right 16px
Container: padding-top and padding-bottom 12px

Accessibility

In order to comply with accessibility standards you should not force a file to open in a new tab. It must be left up to the user to decide whether to download a file, or open in a new tab.

The one exception to this rule is in forms as there are often challenges around caching user data. When ns-download is used within ns-form; if the browser can display the file type it will open in a new tab.

Content guidelines