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.3278a5c4.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" download=""><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.3278a5c4.svg#download"></use>
</svg></a>
</div>
</div>
Try it yourself on the playground
PlaygroundWith translations
<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.3278a5c4.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" download=""><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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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
PlaygroundWith thumbnail
<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><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 href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download" download=""><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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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
PlaygroundWith taxonomy
<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><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 ecl-description-list--taxonomy">
<dt class="ecl-description-list__term">Science areas</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy and transport</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Standards</span></dd>
<dt class="ecl-description-list__term">Keywords</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Electricity</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Electromobility</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy storage</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Security</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">Transport</span><span
class="ecl-tag ecl-tag--display ecl-description-list__tag">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 href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download" download=""><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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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.3278a5c4.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