<section class="ecl-gallery" data-ecl-auto-init="Gallery" data-ecl-gallery="">
<ul class="ecl-gallery__list">
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
class="ecl-gallery__item-link" aria-label="Image 1" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image 1"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">The EU in brief, institutions and
bodies, countries, symbols, history, facts and figures <span class="ecl-gallery__meta"
data-ecl-gallery-meta="">Copyright, Author, Licence for image 1</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://www.youtube.com/embed/fgi-GSCB6ho" class="ecl-gallery__item-link"
aria-label="New digital strategy" data-ecl-gallery-item=""
data-ecl-gallery-item-embed-src="https://www.youtube.com/embed/fgi-GSCB6ho">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-external-video.jpg" alt="New digital strategy"
class="ecl-gallery__image" /><svg class="ecl-icon ecl-icon--l ecl-gallery__image-icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg>
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">New digital strategy<svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg><span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for embedded
media</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
class="ecl-gallery__item-link" aria-label="Image 2" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image2.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Image 2"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Information on agriculture,
business, culture, health, etc. <span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author,
Licence for image 2</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg"
class="ecl-gallery__item-link" aria-label="Image 3" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image3.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg" alt="Image 3"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Living, working, travelling in
the EU <span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for image
3</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
class="ecl-gallery__item-link" aria-label="Image 4" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image4.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="Image 4"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Information on taxes, customs,
importing and exporting goods, financial support for businesses <span class="ecl-gallery__meta"
data-ecl-gallery-meta="">Copyright, Author, Licence for image 4</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
class="ecl-gallery__item-link" data-ecl-gallery-item="" data-ecl-gallery-item-share="/share#example-image5.jpg">
<figure class="ecl-gallery__image-container"><video class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg">
<source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm" type="video/webm" />
<track src="/captions/bunny-en.vtt" kind="captions" srcLang="en" label="English" />
<track src="/captions/bunny-fr.vtt" kind="captions" srcLang="fr" label="français" />
</video><svg class="ecl-icon ecl-icon--l ecl-gallery__image-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg>
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">EU law<svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg><span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for image 5</span>
</figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg"
class="ecl-gallery__item-link" aria-label="Image 6" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image6.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg" alt="Image 6"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Find official documents,
publications, statistics, open data and more resources <span class="ecl-gallery__meta"
data-ecl-gallery-meta="">Copyright, Author, Licence for image 6</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg"
class="ecl-gallery__item-link" aria-label="Image 7" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image7.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg" alt="Image 7"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Teaching material about the EU,
including books and maps <span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence
for image 7</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
class="ecl-gallery__item-link" data-ecl-gallery-item="" data-ecl-gallery-item-share="/share#example-image8.jpg">
<figure class="ecl-gallery__image-container"><video class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg">
<source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm" type="video/webm" />
<track src="/captions/bunny-en.vtt" kind="captions" srcLang="en" label="English" />
<track src="/captions/bunny-fr.vtt" kind="captions" srcLang="fr" label="français" />
</video><svg class="ecl-icon ecl-icon--l ecl-gallery__image-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg>
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">Kids' Corner<svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#video"></use>
</svg><span class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for image 8</span>
</figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg"
class="ecl-gallery__item-link" aria-label="Image 9" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-imag9e.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg" alt="Image 9"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">About the EU <span
class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for image 9</span>
</figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg"
class="ecl-gallery__item-link" aria-label="Image 10" data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image10.jpg">
<figure class="ecl-gallery__image-container"><img
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg" alt="Image 10"
class="ecl-gallery__image" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="">EU by topic <span
class="ecl-gallery__meta" data-ecl-gallery-meta="">Copyright, Author, Licence for image 10</span>
</figcaption>
</figure>
</a></li>
</ul>
<div class="ecl-gallery__info"><strong data-ecl-gallery-count="">0</strong> Media files in this gallery</div><button
class="ecl-button ecl-button--ghost ecl-gallery__view-all" type="submit" data-ecl-gallery-all="">View all</button>
<div class="ecl-gallery__footer"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
aria-label="View all link aria-label value"><span class="ecl-link__label">Link to further media items</span><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#external"></use>
</svg></a></div>
<dialog class="ecl-gallery__overlay" data-ecl-gallery-overlay="">
<header class="ecl-gallery__close" data-ecl-gallery-overlay-header=""><button
class="ecl-button ecl-button--ghost ecl-gallery__close-button" type="submit" data-ecl-gallery-close=""><span
class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
class="ecl-icon ecl-icon--s ecl-button__icon ecl-button__icon--after" focusable="false" aria-hidden="true"
data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#close-filled"></use>
</svg></span></button></header>
<section class="ecl-gallery__slider">
<div class="ecl-gallery__slider-media-container" data-ecl-gallery-overlay-media=""></div><button
class="ecl-button ecl-button--ghost ecl-gallery__slider-previous" type="button"
data-ecl-gallery-overlay-previous=""><span class="ecl-button__container"><svg
class="ecl-icon ecl-icon--s ecl-icon--rotate-270 ecl-button__icon ecl-button__icon--before"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg><span class="ecl-button__label" data-ecl-label="true">Previous</span></span></button><button
class="ecl-button ecl-button--ghost ecl-gallery__slider-next" type="button"
data-ecl-gallery-overlay-next=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Next</span><svg
class="ecl-icon ecl-icon--s ecl-icon--rotate-90 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>
</section>
<footer class="ecl-gallery__detail" data-ecl-gallery-overlay-footer="">
<div class="ecl-gallery__detail-counter"><span data-ecl-gallery-overlay-counter-current="">0</span> of <span
data-ecl-gallery-overlay-counter-max="">0</span></div>
<div class="ecl-gallery__detail-actions"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-gallery__download"
data-ecl-gallery-overlay-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><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-gallery__share"
data-ecl-gallery-overlay-share=""><span class="ecl-link__label">Share</span><svg
class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#share"></use>
</svg></a></div>
<div class="ecl-gallery__detail-description" data-ecl-gallery-overlay-description="">The EU in brief, institutions
and bodies, countries, symbols, history, facts and figures</div>
<div class="ecl-gallery__detail-meta" data-ecl-gallery-overlay-meta="">Copyright, Author, Licence for image 1
</div>
</footer>
</dialog>
</section>Try it yourself on the playground
Playground