File - Components

Without translations

<div class="ecl-file" data-ecl-file="true">
  <div class="ecl-file__container"><svg focusable="false" aria-hidden="true"
      class="ecl-file__icon ecl-icon ecl-icon--2xl">
      <use xlink:href="/dist/media/icons.1dbe9812.svg#general--copy"></use>
    </svg>
    <div class="ecl-file__info">
      <div class="ecl-file__title">State of the Union 2018 brochure</div>
      <div class="ecl-file__language">English</div>
      <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    </div><a download="" href="/example"
      class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
        class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
        class="ecl-link__icon ecl-icon ecl-icon--fluid">
        <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
      </svg></a>
  </div>
</div>

Try it yourself on the playground

Playground

With translations

Fullscreen

<div class="ecl-file" data-ecl-file="true">
  <div class="ecl-file__container"><svg focusable="false" aria-hidden="true"
      class="ecl-file__icon ecl-icon ecl-icon--2xl">
      <use xlink:href="/dist/media/icons.1dbe9812.svg#general--copy"></use>
    </svg>
    <div class="ecl-file__info">
      <div class="ecl-file__title">State of the Union 2018 brochure</div>
      <div class="ecl-file__language">English</div>
      <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    </div><a download="" href="/example"
      class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
        class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
        class="ecl-link__icon ecl-icon ecl-icon--fluid">
        <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
      </svg></a>
  </div>
  <div class="ecl-file__translation-container" data-ecl-file-translation-container="true"><button
      data-ecl-file-translation-toggle="true" type="button"
      class="ecl-file__translation-toggle ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
          class="ecl-button__label" data-ecl-label="true">Other languages (3)</span><svg focusable="false"
          aria-hidden="true" data-ecl-icon="true"
          class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--fluid ecl-icon--rotate-180">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
        </svg></span></button>
    <ul class="ecl-file__translation-list">
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" lang="bg">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div><a download="" hrefLang="bg" href="/example#bg"
          class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
            class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
            class="ecl-link__icon ecl-icon ecl-icon--fluid">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" lang="es">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div><a download="" hrefLang="es" href="/example#es"
          class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
            class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
            class="ecl-link__icon ecl-icon ecl-icon--fluid">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" lang="fr">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div><a download="" hrefLang="fr" href="/example#fr"
          class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
            class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
            class="ecl-link__icon ecl-icon ecl-icon--fluid">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item ecl-file__translation-description">Looking for another language which is not
        on the list? Find out why.</li>
    </ul>
  </div>
</div>

Try it yourself on the playground

Playground

JS behaviour

Auto initialisation

In order to automatically initalise the JS behaviour, add data-ecl-auto-init="FileDownload" to your component's markup:

<div class="ecl-file" data-ecl-file data-ecl-auto-init="FileDownload">
  ...
</div>

Don't forget to call ECL.autoInit() when your page is ready!

Manual initialisation

When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-file]') if you only have 1 file download in the page.

Then, instantiate the FileDownload component and call init():

var elt = document.querySelector('[data-ecl-file]');
var file = new ECL.FileDownload(elt);
file.init();