Overview

Highlights an item that can be downloaded.

Summarise it!

✨ This is an auto-generated AI summary of the ns-download's documentation. It may not be accurate. ✨

The ns-download component creates the visual and semantics of the action of downloading an asset, as opposed to navigation. It can be used singularly or as a list of downloads for multiple files.

Examples

Standard

Configure

URL without file-type

For use when the href does not contain the file extension (.pdf, .xls).

Configure

List

When there are multiple files to download, an unordered list with a class of download-list can be used.

Guidance

Do

• Use it for all downloads.
• Include file size.
• Describe what the file is.
• Place in a list element with the class download-list when you have more than one download link in a row.
• Consider limiting the amount of downloads in a list to a manageable amount to ease choice.

Don't

• Add any instructions, e.g. ‘Download here’.
• Mix downloads amongst text types of <ns-cta>.

Standard

Key

Key	Field type	Guidelines
A	File description	Provide a description of what the file is and or contains.
B	File type	The component will pick the file type from the file (if it isn’t a format supported by the component, you need to provide a file type attribute).
C	File size	Accurate file size in whichever unit that makes the most sense: B, kB, MB, GB.

Implementation

Placement

The ns-download component can be used in the following components:

• <ns-card>
• <ns-form>
• <ns-content>
• <ns-table>
• <ns-product-card>
• <ns-lockup>

Specification

Attributes

href

Property

href

Description

The link to the file to be downloaded.

Type

string

Default

file-size

Property

fileSize

Description

The size of the file to download.

Type

string

Options

B kB MB GB

Default

file-type

Property

fileType

Description

The type of the file to download. This is required when file extension is not present in `href` link value.

Type

string

Options

pdf xls

Default

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot		The anonymous slot for text content and needs to be related the file to download.

Figma

Please note: The ns-download Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).