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.

Design

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>.

When to use it (and when not to)

Use Asset Download for:

• A small set of supporting documents alongside primary content (vehicle brochures, technical specs, terms).
• Any place where the meaningful action is “save this file” and the file URL is consumer-supplied.
• Composed 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 (e.g. dynamic generation). Asset Download leans on browser-native download; bespoke flows belong elsewhere.

Quick summary of accessibility & consistency

• The link’s accessible name is the visible text by default (“Brochure .JPG 100 MB”). Override with an explicit aria-label only when a surface needs a different announcement.
• Items are visually separated by dividers — the Divider component recognises .tng-asset-download directly, so the wrapping markup stays simple.

Develop

Styles

.tng-asset-download wraps a <ul> of one or more downloadable assets. Each row is a native <a> with the download attribute — typography, colours, and label truncation come from existing utilities (.fg-default, .fg-muted, .tng-overflow-ellipsis).

<ul class="tng-asset-download" role="list">
  <li>
    <a class="fg-default" href="#" download>
      <div>
        <div class="tng-overflow-ellipsis">
          Brochure
          <span class="fg-muted">.JPG</span>
        </div>
        <div class="fg-muted">100 MB</div>
      </div>
      <i class="tng-icon icon-download" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="fg-default" href="#" download>
      <div>
        <div class="tng-overflow-ellipsis">
          Brochure
          <span class="fg-muted">.JPG</span>
        </div>
        <div class="fg-muted">100 MB</div>
      </div>
      <i class="tng-icon icon-download" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Default

• Brochure .JPG

  100 MB
• Brochure .JPG

  100 MB

Contrast

• Brochure .JPG

  100 MB
• Brochure .JPG

  100 MB

Accessibility

Accessibility

Asset Download rows are interactive links that trigger a file download. The visible text — label, extension, size — is the link’s accessible name; native semantics carry the rest.

For Design

Visible focus

The default browser focus ring stays. Don’t suppress :focus-visible outlines. If the list is placed on a busy or high-contrast surface where the default ring becomes hard to see, a custom outline at ≥3:1 against the surface is the right escape hatch.

Reading order

Source order is the announcement order. List the assets in the order users would expect to encounter them — most-likely-relevant first.

For Developers

Native <a download>

The component intentionally relies on the browser’s native download handling. Don’t intercept clicks with custom JavaScript download logic — keyboard activation, Open in New Tab, and Save Link As all break when bespoke handlers replace the navigation.

List semantics

Put role="list" on the wrapping <ul> even when no list-style is rendered. Some browsers (Safari with VoiceOver in particular) drop the implicit list role when the styling is removed; the explicit role preserves the count announcement.