Files - Components

Without translations

<div class="ecl-file" data-ecl-file="">
  <div class="ecl-file__container"><svg class="ecl-icon ecl-icon--2xl ecl-file__icon" focusable="false"
      aria-hidden="true">
      <use xlink:href="/dist/media/icons.df9fbcbe.svg#file"></use>
    </svg>
    <div class="ecl-file__info">
      <div class="ecl-file__detail-meta"><span class="ecl-file__detail-meta-item">Resource type</span><span
          class="ecl-file__detail-meta-item">Publication date</span></div>
      <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 href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
      aria-label="Download file State of the Union 2018 brochure"><span class="ecl-link__label">Download</span><svg
        class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
      </svg></a>
  </div>
</div>

Try it yourself on the playground

Playground

With translations

Fullscreen

<div class="ecl-file" data-ecl-file="" data-ecl-auto-init="FileDownload">
  <div class="ecl-file__container"><svg class="ecl-icon ecl-icon--2xl ecl-file__icon" focusable="false"
      aria-hidden="true">
      <use xlink:href="/dist/media/icons.df9fbcbe.svg#file"></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 href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
      aria-label="Download file State of the Union 2018 brochure"><span class="ecl-link__label">Download</span><svg
        class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
      </svg></a>
  </div>
  <div class="ecl-file__translation-container" data-ecl-file-translation-container=""><button
      class="ecl-button ecl-button--ghost ecl-file__translation-toggle" type="button"
      data-ecl-file-translation-toggle=""><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Other languages (3)</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
          focusable="false" aria-hidden="true" data-ecl-icon="">
          <use xlink:href="/dist/media/icons.df9fbcbe.svg#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 href="/example#bg"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="bg" aria-label="Download file български"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#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 href="/example#es"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="es" aria-label="Download file español"><span class="ecl-link__label">Download</span><svg
            class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#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 href="/example#fr"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="fr" aria-label="Download file français"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#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? <a href="/example" class="ecl-link">Find out why</a>.</li>
    </ul>
  </div>
</div>

Try it yourself on the playground

Playground

With thumbnail

Fullscreen

<div class="ecl-file ecl-file--thumbnail" data-ecl-file="" data-ecl-auto-init="FileDownload">
  <div class="ecl-file__container">
    <div class="ecl-file__detail">
      <div class="ecl-file__detail-info">
        <div class="ecl-file__label"><span class="ecl-label ecl-label--highlight">highlighted</span></div>
        <div class="ecl-file__detail-meta"><span class="ecl-file__detail-meta-item">Resource type</span><span
            class="ecl-file__detail-meta-item">Publication date</span></div>
        <div class="ecl-file__title">State of the Union 2018 brochure</div>
        <div class="ecl-file__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem
          tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis.
          Donec maximus pharetra ex a ultricies.</div>
      </div>
      <picture class="ecl-picture ecl-file__picture"><img class="ecl-file__image"
          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="thumbnail alt" /></picture>
    </div>
    <div class="ecl-file__info">
      <div class="ecl-file__language">English</div>
      <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    </div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
      aria-label="Download file State of the Union 2018 brochure"><span class="ecl-link__label">Download</span><svg
        class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
      </svg></a>
  </div>
  <div class="ecl-file__translation-container" data-ecl-file-translation-container=""><button
      class="ecl-button ecl-button--ghost ecl-file__translation-toggle" type="button"
      data-ecl-file-translation-toggle=""><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Other languages (3)</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
          focusable="false" aria-hidden="true" data-ecl-icon="">
          <use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
        </svg></span></button>
    <ul class="ecl-file__translation-list">
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="bg">Title bg</div>
          <div class="ecl-file__translation-description" lang="bg">Morbi fringilla turpis augue, et interdum ipsum
            egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante
            nec massa.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div><a href="/example#bg"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="bg" aria-label="Download file български"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="es">Title es</div>
          <div class="ecl-file__translation-description" lang="es">Proin sagittis nisi hendrerit purus porta.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div><a href="/example#es"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="es" aria-label="Download file español"><span class="ecl-link__label">Download</span><svg
            class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="fr">Title fr</div>
          <div class="ecl-file__translation-description" lang="fr">Duis eget lacinia arcu. Nullam mattis ornare nibh.
            Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur
            varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div><a href="/example#fr"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="fr" aria-label="Download file français"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#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? <a href="#" class="ecl-link">Find out why</a>.</li>
    </ul>
  </div>
</div>

Try it yourself on the playground

Playground

With taxonomy

Fullscreen

<div class="ecl-file ecl-file--thumbnail" data-ecl-file="" data-ecl-auto-init="FileDownload">
  <div class="ecl-file__container">
    <div class="ecl-file__detail">
      <div class="ecl-file__detail-info">
        <div class="ecl-file__label"><span class="ecl-label ecl-label--highlight">highlighted</span></div>
        <div class="ecl-file__detail-meta"><span class="ecl-file__detail-meta-item">Resource type</span><span
            class="ecl-file__detail-meta-item">Publication date</span></div>
        <div class="ecl-file__title">State of the Union 2018 brochure</div>
        <div class="ecl-file__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem
          tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis.
          Donec maximus pharetra ex a ultricies.</div>
      </div>
      <picture class="ecl-picture ecl-file__picture"><img class="ecl-file__image"
          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="thumbnail alt" /></picture>
    </div>
    <div class="ecl-file__taxonomy">
      <dl class="ecl-description-list ecl-description-list--horizontal">
        <dt class="ecl-description-list__term">Taxonomy list</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
            class="ecl-description-list__definition-item">Taxonomy item 1</span><span
            class="ecl-description-list__definition-item">Taxonomy item 2</span><span
            class="ecl-description-list__definition-item">Taxonomy item 3</span></dd>
      </dl>
    </div>
    <div class="ecl-file__info">
      <div class="ecl-file__language">English</div>
      <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    </div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
      aria-label="Download file State of the Union 2018 brochure"><span class="ecl-link__label">Download</span><svg
        class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
        <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
      </svg></a>
  </div>
  <div class="ecl-file__translation-container" data-ecl-file-translation-container=""><button
      class="ecl-button ecl-button--ghost ecl-file__translation-toggle" type="button"
      data-ecl-file-translation-toggle=""><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Other languages (3)</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
          focusable="false" aria-hidden="true" data-ecl-icon="">
          <use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
        </svg></span></button>
    <ul class="ecl-file__translation-list">
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="bg">Title bg</div>
          <div class="ecl-file__translation-description" lang="bg">Morbi fringilla turpis augue, et interdum ipsum
            egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante
            nec massa.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div><a href="/example#bg"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="bg" aria-label="Download file български"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="es">Title es</div>
          <div class="ecl-file__translation-description" lang="es">Proin sagittis nisi hendrerit purus porta.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div><a href="/example#es"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="es" aria-label="Download file español"><span class="ecl-link__label">Download</span><svg
            class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#download"></use>
          </svg></a>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-detail">
          <div class="ecl-file__translation-title" lang="fr">Title fr</div>
          <div class="ecl-file__translation-description" lang="fr">Duis eget lacinia arcu. Nullam mattis ornare nibh.
            Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur
            varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie.</div>
        </div>
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-language">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div><a href="/example#fr"
          class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
          download="" hrefLang="fr" aria-label="Download file français"><span
            class="ecl-link__label">Download</span><svg class="ecl-icon ecl-icon--fluid ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.df9fbcbe.svg#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? <a href="#" class="ecl-link">Find out why</a>.</li>
    </ul>
  </div>
</div>

Try it yourself on the playground

Playground