<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">13 September 2017</div>
<div class="ecl-timeline__title">Item title</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">President Juncker's State of the Union
speech</a></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">28-29 September 2017</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Informal Digital Summit, Tallinn</a></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">14 November 2017</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Strengthening European identity through
education and culture: European Commission's contribution to the Leaders' meeting, Gothenburg,
Sweden</a></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">17 November 2017</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">6 December 2017</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Economic and Monetary Union package of
proposals</a></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">14-15 December 2017</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">EU Leaders' meeting on migration,
Brussels</a></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">15 December 2017</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">6 February 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">EU-Western Balkans Strategy</a></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">14 February 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Multiannual Financial Framework</a> and <a
href="/example" class="ecl-link">institutional issues</a> - 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">23 February 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Informal European Council</a></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">22-23 March 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">European Council</a></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">2 May 2018</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">15 May 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">European Commission’s contribution to the
Informal Leaders' meeting</a>, 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">17 May 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">EU-Western Balkans Summit</a> (Sofia,
Bulgaria)</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="14">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">23 May 2018</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 ecl-timeline__item--collapsed" id="15">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">23 May 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">European Semester</a>: European Commission
publishes economic policy guidance for Member States</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="16">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">29 May - 14 June 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">EU budget for the future</a>: European
Commission's legislative proposals for spending programmes</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="17">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">28-29 June 2018</div>
<div class="ecl-timeline__content">Commission contribution to the European Council: <a href="/example"
class="ecl-link">Economic and Monetary Union, migration, EU budget for the future</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="18">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">10 July 2018</div>
<div class="ecl-timeline__content">Ways to enhance subsidiarity, proportionality and better regulation in the
daily operations of the EU: <a href="/example" class="ecl-link">Report</a> by the Task Force chaired by
Commission First Vice-President Timmermans</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="19">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">12 September 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">President Juncker's State of the Union
speech</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="20">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">20 September 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">Informal European Council/Meeting of EU27
(Salzburg, Austria)</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="21">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">18 October 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">European Council meeting</a>, Brussels
</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="22">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">21 November 2018</div>
<div class="ecl-timeline__content"><a href="/example" class="ecl-link">European Semester</a>: setting the economic
and social priorities</div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="23">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">28 November 2018</div>
<div class="ecl-timeline__content">Commission contribution to the European Council on <a href="/example"
class="ecl-link">Capital Markets Union and Banking Union</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="24">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">04 December 2018</div>
<div class="ecl-timeline__content">Commission contribution to the European Council on <a href="/example"
class="ecl-link">long-term EU budget</a> and <a href="/example" class="ecl-link">migration</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="25">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">05 December 2018</div>
<div class="ecl-timeline__content">Commission contribution to the European Council on the <a href="/example"
class="ecl-link">international role of the euro</a> and the <a href="/example" class="ecl-link">Action Plan on
disinformation</a></div>
</div>
</li>
<li class="ecl-timeline__item ecl-timeline__item--collapsed" id="26">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">11 December 2018</div>
<div class="ecl-timeline__content">Commission contribution to the European Council on the <a href="/example"
class="ecl-link">Citizens' Dialogues</a></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.16df4a0c.svg#corner-arrow"></use>
</svg></span></button></li>
<li class="ecl-timeline__item" id="27">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">11 December 2018</div>
<div class="ecl-timeline__content">Commission contribution to the <a href="/example" class="ecl-link">Euro
Summit</a></div>
</div>
</li>
<li class="ecl-timeline__item" id="28">
<div class="ecl-timeline__tooltip">
<div class="ecl-timeline__tooltip-arrow"></div>
<div class="ecl-timeline__label">13-14 December 2018</div>
<div class="ecl-timeline__title">Item title</div>
<div class="ecl-timeline__content">European Council and Euro Summit</div>
</div>
</li>
</ol>Try it yourself on the playground
Playground