Files

<div class="ecl-file" data-ecl-file id="ecl-file-998672465">
  <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-998672465-title">State of the Union 2018 brochure</div>
    </div>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id=ecl-file-998672465-lang>English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-998672465-link"
      aria-labelledby="ecl-file-998672465-link-label ecl-file-998672465-title ecl-file-998672465-lang"><span
        class="ecl-link__label" id="ecl-file-998672465-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" data-ecl-file id="ecl-file-620524745" 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-620524745-title">State of the Union 2018 brochure</div>
    </div>
  </div>
  <div class="ecl-file__footer">
    <div class="ecl-file__language" id=ecl-file-620524745-lang>English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-620524745-link"
      aria-labelledby="ecl-file-620524745-link-label ecl-file-620524745-title ecl-file-620524745-lang"><span
        class="ecl-link__label" id="ecl-file-620524745-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 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-620524745-translation-0-lang" 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-file__translation-download"
          id="ecl-file-620524745-translation-0-link" download
          aria-labelledby="ecl-file-620524745-translation-0-link-label ecl-file-620524745-title ecl-file-620524745-translation-0-lang"
          hreflang="bg"><span class="ecl-link__label"
            id="ecl-file-620524745-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-620524745-translation-1-lang" 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-file__translation-download"
          id="ecl-file-620524745-translation-1-link" download
          aria-labelledby="ecl-file-620524745-translation-1-link-label ecl-file-620524745-title ecl-file-620524745-translation-1-lang"
          hreflang="es"><span class="ecl-link__label"
            id="ecl-file-620524745-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-620524745-translation-2-lang" 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-file__translation-download"
          id="ecl-file-620524745-translation-2-link" download
          aria-labelledby="ecl-file-620524745-translation-2-link-label ecl-file-620524745-title ecl-file-620524745-translation-2-lang"
          hreflang="fr"><span class="ecl-link__label"
            id="ecl-file-620524745-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>
      </li>
    </ul>
  </div>
</div>

<div class="ecl-file ecl-file--thumbnail" data-ecl-file id="ecl-file-1225803180" 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-1225803180-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-1225803180-lang>English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-1225803180-link"
      aria-labelledby="ecl-file-1225803180-link-label ecl-file-1225803180-title ecl-file-1225803180-lang"><span
        class="ecl-link__label" id="ecl-file-1225803180-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 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-1225803180-translation-0-lang" lang="bg">Title 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-file__translation-download"
          id="ecl-file-1225803180-translation-0-link" download
          aria-labelledby="ecl-file-1225803180-translation-0-link-label ecl-file-1225803180-title ecl-file-1225803180-translation-0-lang"
          hreflang="bg"><span class="ecl-link__label"
            id="ecl-file-1225803180-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1225803180-translation-1-lang" lang="es">Title es</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-file__translation-download"
          id="ecl-file-1225803180-translation-1-link" download
          aria-labelledby="ecl-file-1225803180-translation-1-link-label ecl-file-1225803180-title ecl-file-1225803180-translation-1-lang"
          hreflang="es"><span class="ecl-link__label"
            id="ecl-file-1225803180-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1225803180-translation-2-lang" lang="fr">Title fr</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-file__translation-download"
          id="ecl-file-1225803180-translation-2-link" download
          aria-labelledby="ecl-file-1225803180-translation-2-link-label ecl-file-1225803180-title ecl-file-1225803180-translation-2-lang"
          hreflang="fr"><span class="ecl-link__label"
            id="ecl-file-1225803180-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>
      </li>
    </ul>
  </div>
</div>

<div class="ecl-file ecl-file--thumbnail" data-ecl-file id="ecl-file-1303236734" 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-1303236734-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-1303236734-lang>English</div>
    <div class="ecl-file__meta">(16.2 MB - PDF)</div><a href="/example"
      class="ecl-link ecl-link--standalone ecl-link--icon ecl-file__download" id="ecl-file-1303236734-link"
      aria-labelledby="ecl-file-1303236734-link-label ecl-file-1303236734-title ecl-file-1303236734-lang"><span
        class="ecl-link__label" id="ecl-file-1303236734-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 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-1303236734-translation-0-lang" lang="bg">Title 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-file__translation-download"
          id="ecl-file-1303236734-translation-0-link" download
          aria-labelledby="ecl-file-1303236734-translation-0-link-label ecl-file-1303236734-title ecl-file-1303236734-translation-0-lang"
          hreflang="bg"><span class="ecl-link__label"
            id="ecl-file-1303236734-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1303236734-translation-1-lang" lang="es">Title es</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-file__translation-download"
          id="ecl-file-1303236734-translation-1-link" download
          aria-labelledby="ecl-file-1303236734-translation-1-link-label ecl-file-1303236734-title ecl-file-1303236734-translation-1-lang"
          hreflang="es"><span class="ecl-link__label"
            id="ecl-file-1303236734-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>
      </li>
      <li class="ecl-file__translation-item">
        <div class="ecl-file__translation-info">
          <div class="ecl-file__translation-title" id="ecl-file-1303236734-translation-2-lang" lang="fr">Title fr</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-file__translation-download"
          id="ecl-file-1303236734-translation-2-link" download
          aria-labelledby="ecl-file-1303236734-translation-2-link-label ecl-file-1303236734-title ecl-file-1303236734-translation-2-lang"
          hreflang="fr"><span class="ecl-link__label"
            id="ecl-file-1303236734-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>
      </li>
    </ul>
  </div>
</div>