<ol class="ecl-timeline" data-ecl-auto-init="Timeline" data-ecl-timeline="">
<li class="ecl-timeline__item" id="0">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">1995 - 1996</div>
<div class="ecl-timeline__title">Item title</div>
<div class="ecl-timeline__content">President Juncker's State of the Union speech</div>
</div>
</li>
<li class="ecl-timeline__item" id="1">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">1996 - 1997</div>
<div class="ecl-timeline__content">Informal Digital Summit, Tallinn</div>
</div>
</li>
<li class="ecl-timeline__item" id="2">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">1997 - 1998</div>
<div class="ecl-timeline__content">Strengthening European identity through education and culture: European
Commission's contribution to the Leaders' meeting, Gothenburg, Sweden</div>
</div>
</li>
<li class="ecl-timeline__item" id="3">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">1998 - 1999</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Social Summit in Gothenburg, Sweden</a>
</div>
</div>
</li>
<li class="ecl-timeline__item" id="4">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">1999 - 2000</div>
<div class="ecl-timeline__content">Economic and Monetary Union package of proposals</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="5">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2000 - 2001</div>
<div class="ecl-timeline__content">EU Leaders' meeting on migration, Brussels</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="6">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2001 - 2002</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Euro Summit</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="7">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2002 - 2003</div>
<div class="ecl-timeline__content">EU-Western Balkans Strategy</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="8">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2003 - 2004</div>
<div class="ecl-timeline__content">Multiannual Financial Framework and institutional issues enhancing efficiency
at the helm of the European Union</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="9">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2004 - 2005</div>
<div class="ecl-timeline__content">Informal European Council</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="10">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2005 - 2006</div>
<div class="ecl-timeline__content">European Council</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="11">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2006 - 2007</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Commission proposal: Long-term budget
post-2020</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="12">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2007 - 2008</div>
<div class="ecl-timeline__content">European Commission’s contribution to the Informal Leaders' meeting,
Sofia, Bulgaria (16 May 2018)</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="13">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2008 - 2009</div>
<div class="ecl-timeline__content">EU-Western Balkans Summit (Sofia, Bulgaria)</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--toggle"><button
class="ecl-button ecl-button--secondary ecl-timeline__toggle" type="button" data-ecl-timeline-button=""
data-ecl-label-collapsed="Show %d more items" data-ecl-label-expanded="Hide %d items"><span
class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Show %d more
items</span><svg class="ecl-icon ecl-icon--xs 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></li>
<li class="ecl-timeline__item" id="14">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2009 - 2010</div>
<div class="ecl-timeline__content">Progress by Member States in meeting the conditions for adopting the euro - <a
href="/example" class="ecl-link">reports</a> by the European Commission and ECB</div>
</div>
</li>
<li class="ecl-timeline__item" id="15">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">2010 -2011</div>
<div class="ecl-timeline__content">European Semester: European Commission publishes economic policy guidance for
Member States</div>
</div>
</li>
</ol>Try it yourself on the playground
Playground