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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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"
aria-label="Download file State of the Union 2018 brochure"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--download"></use>
</svg></a>
</div>
</div>Try it yourself on the playground
PlaygroundWith 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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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"
aria-label="Download file State of the Union 2018 brochure"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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"
aria-label="Download file български"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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"
aria-label="Download file español"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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"
aria-label="Download file français"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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
PlaygroundWith thumbnail
<div class="ecl-file ecl-file--thumbnail" data-ecl-file="true">
<div class="ecl-file__container">
<div class="ecl-file__detail">
<div class="ecl-file__detail-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__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><img class="ecl-file__image" src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
alt="thumbnail alt" />
</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 download="" href="/example"
class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file State of the Union 2018 brochure"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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-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 download="" hrefLang="bg" href="/example#bg"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file български"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--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 download="" hrefLang="es" href="/example#es"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file español"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--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 download="" hrefLang="fr" href="/example#fr"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file français"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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
PlaygroundWith taxonomy
<div class="ecl-file ecl-file--thumbnail" data-ecl-file="true">
<div class="ecl-file__container">
<div class="ecl-file__label"><span class="ecl-label ecl-label--highlight">highlighted</span></div>
<div class="ecl-file__detail">
<div class="ecl-file__detail-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__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><img class="ecl-file__image" src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
alt="thumbnail alt" />
</div>
<div class="ecl-file__taxonomy">
<dl class="ecl-description-list--taxonomy ecl-description-list">
<dt class="ecl-description-list__term">Science areas</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy and transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Standards</span></dd>
<dt class="ecl-description-list__term">Keywords</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electricity</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electromobility</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy storage</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Security</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Low carbon</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 download="" href="/example"
class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file State of the Union 2018 brochure"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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-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 download="" hrefLang="bg" href="/example#bg"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file български"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--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 download="" hrefLang="es" href="/example#es"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file español"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#ui--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 download="" hrefLang="fr" href="/example#fr"
class="ecl-file__translation-download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="Download file français"><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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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