<div class="ecl-u-pv-3xl">
<div class="ecl-container">
<div class="ecl-row">
<aside class="ecl-col-12 ecl-col-lg-3">
<h2 class="ecl-u-type-heading-2 ecl-u-type-color-black ecl-u-d-lg-none ecl-u-mv-none">Search results (65)</h2>
<h3 class="ecl-u-type-heading-3 ecl-u-type-color-black ecl-u-mt-l ecl-u-mt-lg-none">Search options</h3>
<form>
<div class="ecl-form-group ecl-form-group--select"><label class="ecl-form-label"
for="facet-source">Source</label>
<div class="ecl-select__container ecl-select__container--m"><select id="facet-source" class="ecl-select">
<option value="1">All sources</option>
<option value="2">DG Trade</option>
<option value="3">DG Digit</option>
</select>
<div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></div>
</div>
</div>
<div class="ecl-u-mt-m ecl-form-group ecl-form-group--select"><label class="ecl-form-label"
for="facet-date">Date</label>
<div class="ecl-select__container ecl-select__container--m"><select id="facet-date" class="ecl-select">
<option value="1">All dates</option>
<option value="2">2019</option>
<option value="3">2018</option>
</select>
<div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></div>
</div>
</div>
<div class="ecl-u-mt-m ecl-form-group ecl-form-group--select"><label class="ecl-form-label"
for="facet-language">Language</label>
<div class="ecl-select__container ecl-select__container--m"><select id="facet-language" class="ecl-select">
<option value="1">English</option>
<option value="2">French</option>
<option value="3">German</option>
<option value="3">Bulgarian</option>
</select>
<div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></div>
</div>
</div>
<div class="ecl-u-mt-m ecl-form-group ecl-form-group--select"><label class="ecl-form-label"
for="facet-format">File format</label>
<div class="ecl-select__container ecl-select__container--m"><select id="facet-format" class="ecl-select">
<option value="1">All formats</option>
<option value="2">PDF</option>
<option value="3">DOC</option>
</select>
<div class="ecl-select__icon"><svg focusable="false" aria-hidden="true"
class="ecl-select__icon-shape ecl-icon ecl-icon--s ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></div>
</div>
</div><button type="submit" class="ecl-u-mt-l ecl-button ecl-button--primary">Refine
results</button><br /><button type="submit"
class="ecl-u-mt-m ecl-u-mt-lg-l ecl-button ecl-button--secondary">Clear all</button>
</form>
</aside>
<main class="ecl-col-12 ecl-col-lg-9">
<h2 class="ecl-u-type-heading-2 ecl-u-type-color-black ecl-u-d-none ecl-u-d-lg-block ecl-u-mv-none">Search
results (65)</h2>
<h3 class="ecl-u-type-heading-3 ecl-u-type-color-black ecl-u-mb-none ecl-u-mt-3xl ecl-u-mt-lg-l">Showing results
11 to 20</h3>
<div
class="ecl-u-type-m ecl-u-type-color-grey ecl-u-mt-l ecl-u-d-flex ecl-u-flex-column ecl-u-flex-lg-row ecl-u-align-items-lg-center">
<span><span>SOURCE</span><span class="ecl-u-ml-s ecl-tag ecl-tag--removable">DG Trad<button type="button"
aria-label="Dismiss" class="ecl-tag__icon"><svg focusable="false" aria-hidden="true"
class="ecl-tag__icon-close ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-tag__icon-close-filled ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close-filled"></use>
</svg></button></span></span><span
class="ecl-u-ml-lg-m ecl-u-mt-m ecl-u-mt-lg-none"><span>TOPICS</span><span
class="ecl-u-ml-s ecl-tag ecl-tag--removable">Health, well-being & Consumer protection<button
type="button" aria-label="Dismiss" class="ecl-tag__icon"><svg focusable="false" aria-hidden="true"
class="ecl-tag__icon-close ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-tag__icon-close-filled ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close-filled"></use>
</svg></button></span></span></div>
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Jobs, growth and investment</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">Since the global economic and financial
crisis, the EU has been suffering from low levels of investment. Coordinated efforts at European level are
needed to put Europe on the path of economic recovery.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Digital single market</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">The internet and digital technologies
are transforming our world. But existing barriers online mean citizens miss out on goods and services,
internet companies and start-ups have their horizons limited, and businesses and governments cannot fully
benefit from digital tools.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Energy union and climate</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">The EU is building an energy union that
ensures Europe’s energy supply is safe, viable and accessible to all. In doing so, it can boost the economy
and attract investments that can create new jobs opportunities.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Internal market</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">The single market is one of Europe’s
major achievements and its best asset in times of increasing globalisation. It is an engine for building a
stronger and fairer EU economy.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">A deeper and fairer economic and monetary union</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">Within the Economic and Monetary Union
(EMU), EU countries’ economic policies are coordinated to: ensure EU countries can withstand future crises
through economic and social reforms and responsible fiscal policies, encourage investment and enhance
competitiveness, deliver more job opportunities and better living standards</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">A balanced and progressive trade policy to harness
globalisation</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">In the modern global economy trade is
essential for growth, jobs and competiveness, and the EU is committed to maintaining an open and rules-based
trading system.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Justice and fundamental rights</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">Every EU citizen enjoys the same
fundamental rights based on the values of equality, non-discrimination, inclusion, human dignity, freedom
and democracy.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Migration</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">The plight of thousands of migrants
putting their lives in peril to cross the Mediterranean has shocked. It is clear that no EU country can or
should be left alone to address huge migratory pressures.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">A stronger global actor</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">The EU needs a strong common foreign
policy to respond efficiently to global challenges, including the crises in its neighbourhood, project its
values, reject protectionism and keep EU trade standards and contribute to peace and prosperity in the
world.</p>
</article>
<hr class="ecl-u-mv-none" />
<article class="ecl-u-type-m ecl-u-mt-l ecl-u-mt-lg-m ecl-u-pb-l ecl-u-pb-lg-m"><a href="/example"
class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-link">Democratic change</a>
<p class="ecl-u-type-paragraph-m ecl-u-type-color-grey ecl-u-mv-none">For the first time, in 2014, EU
countries had to take the results of the elections into account when proposing a candidate for European
Commission President.</p>
</article>
<nav class="ecl-u-mt-l ecl-pagination" aria-label="">
<ul class="ecl-pagination__list">
<li class="ecl-pagination__item ecl-pagination__item--previous"><a aria-label="Go to previous page"
href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-270">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg> <span class="ecl-link__label">Previous</span></a></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 1" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">1</a></li>
<li class="ecl-pagination__item ecl-pagination__item--current"><span
class="ecl-pagination__text ecl-pagination__text--summary" aria-label="Page 2"
aria-current="true">2</span><span class="ecl-pagination__text ecl-pagination__text--full"
aria-current="true">Page 2</span></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 3" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">3</a></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 4" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">4</a></li>
<li class="ecl-pagination__item ecl-pagination__item--next"><a aria-label="Go to next page" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Next</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a></li>
</ul>
</nav>
</main>
</div>
</div>
</div>Try it yourself on the playground
Playground