Skip to content

Asset Download

Asset Download renders a list of downloadable files — brochures, catalogues, PDFs. Each row carries a label with the file extension, the file size, and a download glyph. Dividers between rows are drawn by Divider, which has first-class support for .tng-asset-download — no extra classes needed.

Quarantine

Design Develop Accessibility

Asset Download is a list of one or more downloadable assets — brochures, catalogues, PDFs, images that the user is expected to save to their device. Each row carries a label with the file extension, the file size, and a download glyph; the browser handles the actual download via a native <a download>.

Anatomy

Section titled “Anatomy”
  1. Label
  2. File extension
  3. File size
  4. Download icon
  5. Divider

When to use it

Section titled “When to use it”

Use Asset Download when:

  • A small set of supporting documents sits alongside primary content (vehicle brochures, technical specs, terms).
  • The meaningful action is “save this file” and the file URL is consumer-supplied.
  • The list lives inside the Alternate Content pattern where one pane lists downloads.

Avoid Asset Download when:

  • The link should open a page or document in-browser instead of downloading — use a Link or Button with the file URL instead.
  • The list is long enough to need filtering, sorting, or pagination — that’s a Table or a custom list.
  • The action triggers something other than a static asset download (for example dynamic generation). Asset Download leans on browser-native download; bespoke flows belong elsewhere.

Properties

Section titled “Properties”

Label

The visible name of the asset. The link’s accessible name defaults to this visible text (for example “Brochure .JPG 100 MB”), so no extra aria-label is needed in typical use.

File metadata

Each row pairs the label with the file extension and size, shown in a muted foreground. The metadata sits next to the label so users can scan format and weight before downloading.

Download icon

A trailing download glyph signals the action. It is decorative — the visible label already names the action, so the icon stays hidden from assistive tech.

Divider

A thin line separates consecutive items. The Divider component recognises .tng-asset-download directly, so the wrapping markup stays simple.

Platform considerations

Section titled “Platform considerations”

Desktop

The full list is visible at once. Keep file names short enough to sit on a single line so the metadata and icon remain aligned along the right edge.

Tablet

The same stack works at narrower widths. Touch targets remain comfortable because each row spans the full container width.

Mobile

Long labels truncate with an ellipsis to keep each row to one line. Make sure the most identifying word leads so the truncation point stays useful.

Best practices

Section titled “Best practices”

Use Asset Download for short, focused lists where the action is a file save — never as a generic link list.

Do

Use native <a download> so browsers handle the file save, keep labels short and meaningful, and rely on the visible text for the accessible name unless a specific surface needs a different announcement.

Don't

Don’t reach for Asset Download when the link should open content in-browser, don’t pack the list with so many rows that it needs filtering, and don’t wire it to dynamic actions that aren’t a plain file download.

Content guidelines

Section titled “Content guidelines”

Lead each label with the most identifying word — “Brochure”, “Owner’s manual”, “Spec sheet” — so the row scans at a glance. Keep wording short enough to fit on a single line, and let the file extension and size carry the format detail. Use sentence case for readability and avoid repeating the file type in prose (“Brochure PDF” — the extension already tells that story).