Skip to content

Asset Download

Asset Download renders a list of asset links — brochures, catalogues, PDFs. Each row is a single link naming the file as underlined text with the extension read inline, closing with one glyph; the file size sits on a second line beneath it. That trailing glyph is the whole cue: a download glyph for an <a download> that saves the file, an external-link glyph for a row that opens it in a new tab. Dividers between rows are drawn by Divider, which has first-class support for .tng-asset-download — no extra classes needed.

  • CSS
  • React

Maintained by Platform and Foundation

Usable — may still change

DesignCSSReactAccessibility

Asset Download is a list of one or more downloadable assets — brochures, catalogues, PDFs, images that the user is expected to save or read. Each row is a single link naming the file with the extension read inline (“Download brochure.pdf”), closing with one glyph, and drops the file size onto a second line under that link.

That trailing glyph says what the row does. A row that saves the asset to the device — a native <a download> — closes with a download glyph. A row that opens the asset in a new tab for the browser to render closes with an external-link glyph. Every row carries exactly one, so the glyph is read as a promise about the click rather than as decoration that some rows happen to have.

Anatomy

Section titled “Anatomy”
  1. Asset download
  2. Row link
  3. Label
  4. Trailing glyph
  5. File size

Everything the user can click is one link — the filename and its trailing glyph. The row is a single target, so it costs a single tab stop, whether it saves the file or opens it.

The glyph sits inside that link, which is what keeps the two moving together: it takes the link’s colour and follows it through hover, active and visited rather than holding a colour of its own. It is decorative and never focusable, so being part of the target costs it nothing either. Only the file size sits outside the link — it colours independently and stays out of the link’s name.

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 rather than an asset — use a Link or Button with the URL instead. Opening a PDF in the browser is Asset Download’s own behaviour and needs no substitute.
  • 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, styled as a link — underlined, in link-button md type. The file extension reads inline as part of the name (“Download brochure.pdf”) rather than sitting in a separate muted span, so the link’s accessible name is the filename a user would recognise. Hover, active and visited states follow the Link treatment.

File size

The weight of the file, on a second line aligned under the label rather than beside it, in a subtler foreground. It sits outside the link — so it colours independently of the row’s link states, and it stays out of the link’s accessible name.

Trailing glyph

One glyph closes every row, and its shape is how a user tells the two behaviours apart before clicking: a download glyph for a row that saves the asset, an external-link glyph for a row that opens it in a new tab. Draw exactly one — never both, never neither, and never the shape that contradicts what the row does.

It sits inside the link as the Link’s trailing icon, so it takes the link’s colour and moves with it on hover, active and visited. It is not a second control: the row is one target. It is also not the whole cue for the new-tab case — that announcement is carried in the link’s accessible name, not by the glyph.

Divider

A thin line separates consecutive items and closes the list at both ends. 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. Each row hugs its content, so the trailing glyph sits just after the filename rather than at the far edge — keep file names short enough to stay on one line and that grouping reads as a unit. Because the rows hug, the glyphs form no column: a reader compares two rows’ behaviour by reading each glyph next to its own name, which is why the shapes have to be distinct at a glance.

Tablet

The same stack works at narrower widths. The filename is the only part that shrinks, so the glyph stays tucked against the end of the name rather than drifting away from it.

Mobile

Long labels truncate with an ellipsis to keep the label on one line. Make sure the most identifying word leads so the truncation point stays useful — the extension now lives at the end of the name, and is the first thing an ellipsis eats.

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

Let the file type pick the behaviour, then let the behaviour pick the glyph: <a download> with a download glyph for formats the user saves, target="_blank" with an external-link glyph for formats the browser can render. Keep labels short and meaningful, rely on the visible text for the accessible name, and announce the new tab whenever the row opens one. Keep everything clickable inside one link.

Don't

Don’t split the row across several links — a glyph that leads where the label leads is decoration, and giving it its own target only adds a tab stop. Don’t swap the two glyphs, ship a row with neither, or reinstate a leading glyph alongside the trailing one; the glyph is a promise about what the click does, and a second one only muddies it. 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 asset link.

Content guidelines

Section titled “Content guidelines”

Write the label as the filename the user is about to open or save, extension included — “Download brochure.pdf”, “Owner’s manual.pdf”. The extension is not decoration here: it says in text what the trailing glyph says in shape, which is what keeps the preview-versus-save distinction off colour and shape alone. Never drop it or spell it out in prose instead. Lead with the most identifying word so the row scans at a glance and survives truncation, keep it short enough to fit on one line, and let the second line carry the size. Use sentence case, and don’t spell the format out twice (“Brochure PDF.pdf”) — the extension already tells that story.