Files

<div class="ecl-file" data-ecl-file id="ecl-file-445309744">
  <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.e3d8f25c.svg#file"></use>
    </svg>
    <div class="ecl-file__info">
      <ul class="ecl-file__detail-meta">
        <li class="ecl-file__detail-meta-item">META INFO</li>
        <li class="ecl-file__detail-meta-item">DD Month YYYY</li>
      </ul>
      <div class="ecl-file__title" id="ecl-file-445309744-title">State of the Union 2018 brochure</div>
    </div>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id="ecl-file-445309744-lang">English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    <div class="ecl-file__action"><a href="/example"
        class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-445309744-link"
        aria-labelledby="ecl-file-445309744-link-label ecl-file-445309744-title ecl-file-445309744-lang"><span
          class="ecl-link__label" id="ecl-file-445309744-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.e3d8f25c.svg#download"></use>
        </svg></a></div>
  </div>
</div>

<div class="ecl-file" data-ecl-file id="ecl-file-1560164917" 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.e3d8f25c.svg#file"></use>
    </svg>
    <div class="ecl-file__info">
      <div class="ecl-file__title" id="ecl-file-1560164917-title">State of the Union 2018 brochure</div>
    </div>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id="ecl-file-1560164917-lang">English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    <div class="ecl-file__action"><a href="/example"
        class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-1560164917-link"
        aria-labelledby="ecl-file-1560164917-link-label ecl-file-1560164917-title ecl-file-1560164917-lang"><span
          class="ecl-link__label" id="ecl-file-1560164917-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.e3d8f25c.svg#download"></use>
        </svg></a></div>
  </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
      aria-expanded="false"><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Translations (3)</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true"
          data-ecl-icon>
          <use xlink:href="/dist/media/icons.e3d8f25c.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" id="ecl-file-1560164917-translation-0-lang" lang="bg">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#bg"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1560164917-translation-0-link"
            aria-labelledby="ecl-file-1560164917-translation-0-link-label ecl-file-1560164917-title ecl-file-1560164917-translation-0-lang"
            hreflang="bg"><span class="ecl-link__label"
              id="ecl-file-1560164917-translation-0-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1560164917-translation-1-lang" lang="es">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#es"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1560164917-translation-1-link"
            aria-labelledby="ecl-file-1560164917-translation-1-link-label ecl-file-1560164917-title ecl-file-1560164917-translation-1-lang"
            hreflang="es" download><span class="ecl-link__label"
              id="ecl-file-1560164917-translation-1-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1560164917-translation-2-lang" lang="fr">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#fr"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1560164917-translation-2-link"
            aria-labelledby="ecl-file-1560164917-translation-2-link-label ecl-file-1560164917-title ecl-file-1560164917-translation-2-lang"
            hreflang="fr"><span class="ecl-link__label"
              id="ecl-file-1560164917-translation-2-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
    </ul>
  </div>
</div>

<div class="ecl-file ecl-file--thumbnail" data-ecl-file id="ecl-file-843811816" data-ecl-auto-init="FileDownload">
  <div class="ecl-file__container">
    <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=""></picture>
    <div class="ecl-file__info">
      <div class="ecl-file__label"><span class="ecl-label ecl-label--highlight">highlighted</span></div>
      <ul class="ecl-file__detail-meta">
        <li class="ecl-file__detail-meta-item">META INFO</li>
        <li class="ecl-file__detail-meta-item">DD Month YYYY</li>
      </ul>
      <div class="ecl-file__title" id="ecl-file-843811816-title"><a href="/example"
          class="ecl-link ecl-link--standalone">State of the Union 2018 brochure</a></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>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id="ecl-file-843811816-lang">English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    <div class="ecl-file__action"><a href="/example"
        class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-843811816-link"
        aria-labelledby="ecl-file-843811816-link-label ecl-file-843811816-title ecl-file-843811816-lang"><span
          class="ecl-link__label" id="ecl-file-843811816-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.e3d8f25c.svg#download"></use>
        </svg></a></div>
  </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
      aria-expanded="false"><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" focusable="false" aria-hidden="true"
          data-ecl-icon>
          <use xlink:href="/dist/media/icons.e3d8f25c.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" id="ecl-file-843811816-translation-0-lang" lang="bg">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#bg"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-843811816-translation-0-link"
            aria-labelledby="ecl-file-843811816-translation-0-link-label ecl-file-843811816-title ecl-file-843811816-translation-0-lang"
            hreflang="bg"><span class="ecl-link__label"
              id="ecl-file-843811816-translation-0-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-843811816-translation-1-lang" lang="es">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#es"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-843811816-translation-1-link"
            aria-labelledby="ecl-file-843811816-translation-1-link-label ecl-file-843811816-title ecl-file-843811816-translation-1-lang"
            hreflang="es"><span class="ecl-link__label"
              id="ecl-file-843811816-translation-1-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-843811816-translation-2-lang" lang="fr">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#fr"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-843811816-translation-2-link"
            aria-labelledby="ecl-file-843811816-translation-2-link-label ecl-file-843811816-title ecl-file-843811816-translation-2-lang"
            hreflang="fr"><span class="ecl-link__label"
              id="ecl-file-843811816-translation-2-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
    </ul>
  </div>
</div>

<div class="ecl-file ecl-file--thumbnail" data-ecl-file id="ecl-file-1162322139" data-ecl-auto-init="FileDownload">
  <div class="ecl-file__container">
    <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=""></picture>
    <div class="ecl-file__info">
      <div class="ecl-file__label"><span class="ecl-label ecl-label--highlight">highlighted</span></div>
      <ul class="ecl-file__detail-meta">
        <li class="ecl-file__detail-meta-item">META INFO</li>
        <li class="ecl-file__detail-meta-item">DD Month YYYY</li>
      </ul>
      <div class="ecl-file__title" id="ecl-file-1162322139-title"><a href="/example"
          class="ecl-link ecl-link--standalone">State of the Union 2018 brochure</a></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 class="ecl-file__taxonomy">
        <dl class="ecl-description-list">
          <dt class="ecl-description-list__term">Taxonomy list</dt>
          <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy">
            <ul class="ecl-description-list__definition-list">
              <li class="ecl-description-list__definition-item">Taxonomy item 1</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 2</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 3</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 4</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 5</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 6</li>
            </ul>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id="ecl-file-1162322139-lang">English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div>
    <div class="ecl-file__action"><a href="/example"
        class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-1162322139-link"
        aria-labelledby="ecl-file-1162322139-link-label ecl-file-1162322139-title ecl-file-1162322139-lang"><span
          class="ecl-link__label" id="ecl-file-1162322139-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.e3d8f25c.svg#download"></use>
        </svg></a></div>
  </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
      aria-expanded="false"><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Translations (3)</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true"
          data-ecl-icon>
          <use xlink:href="/dist/media/icons.e3d8f25c.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" id="ecl-file-1162322139-translation-0-lang" lang="bg">български</div>
          <div class="ecl-file__translation-meta">(15.7 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#bg"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1162322139-translation-0-link"
            aria-labelledby="ecl-file-1162322139-translation-0-link-label ecl-file-1162322139-title ecl-file-1162322139-translation-0-lang"
            hreflang="bg"><span class="ecl-link__label"
              id="ecl-file-1162322139-translation-0-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1162322139-translation-1-lang" lang="es">español</div>
          <div class="ecl-file__translation-meta">(15.8 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#es"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1162322139-translation-1-link"
            aria-labelledby="ecl-file-1162322139-translation-1-link-label ecl-file-1162322139-title ecl-file-1162322139-translation-1-lang"
            hreflang="es"><span class="ecl-link__label"
              id="ecl-file-1162322139-translation-1-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1162322139-translation-2-lang" lang="fr">français</div>
          <div class="ecl-file__translation-meta">(15.4 MB - PDF)</div>
        </div>
        <div class="ecl-file__translation-action"><a href="/example#fr"
            class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__translation-download"
            id="ecl-file-1162322139-translation-2-link"
            aria-labelledby="ecl-file-1162322139-translation-2-link-label ecl-file-1162322139-title ecl-file-1162322139-translation-2-lang"
            hreflang="fr"><span class="ecl-link__label"
              id="ecl-file-1162322139-translation-2-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.e3d8f25c.svg#download"></use>
            </svg></a></div>
      </li>
    </ul>
  </div>
</div>