Skip to content
Toyota Motor Europe DX Playbook

Develop

Styles

Section titled “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>