NEWS ARTICLE | 24 March 2020
Lorem ipsum dolor sit amet, consectetur adipiscing elitNews, Events and Publications
NEWS ARTICLE | 17 February 2020
Morbi nisl sem, imperdiet a sapien condimentum, ultricies mollis libero. Curabitur pharetra condimentum tellusEvents
Upcoming events organized by the European Commission
Publications
Search documents and statistics. Access EU Publication Office and law database.
<div class="ecl-container">
<section>
<h2 class="ecl-u-type-heading-2">News, Events and Publications</h2>
<div class="ecl-row">
<div class="ecl-col-12 ecl-col-md-8 ecl-u-border-md-right ecl-u-border-color-md-grey-15">
<article class="ecl-u-pt-none ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 24 March 2020</div>
<a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Lorem
ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
</article>
<article class="ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 02 March 2020</div>
<a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Vivamus
aliquet tellus sodales lectus vulputate, vitae ullamcorper magna vehicula. Aenean interdum ornare risus
non ornare. Mauris a sagittis mi</a>
</div>
</article>
<article class="ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 17 February 2020
</div><a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Morbi
nisl sem, imperdiet a sapien condimentum, ultricies mollis libero. Curabitur pharetra condimentum
tellus</a>
</div>
</article><a href="/example"
class="ecl-u-type-bold ecl-u-mt-l ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">All news</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid ecl-icon--rotate-90">
<use xlink:href="/component-library/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
</div>
<div class="ecl-col-12 ecl-col-md-4">
<article variant="tile" class="ecl-u-mt-xl ecl-u-height-auto ecl-u-mt-md-none ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Events</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Upcoming events organized by the European Commission</div>
</div>
<footer class="ecl-card__footer"></footer>
</article>
<article variant="tile" class="ecl-u-mt-xl ecl-u-height-auto ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Publications</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Search documents and statistics. Access EU Publication Office and law
database.</div>
</div>
<footer class="ecl-card__footer"></footer>
</article>
</div>
</div>
</section>
</div>Try it yourself on the playground
PlaygroundWith images
News, Events and Publications
NEWS ARTICLE | 24 March 2020
Lorem ipsum dolor sit amet, consectetur adipiscing elitNEWS ARTICLE | 17 February 2020
Morbi nisl sem, imperdiet a sapien condimentum, ultricies mollis libero. Curabitur pharetra condimentum tellusEvents
Upcoming events organized by the European Commission
Publications
Search documents and statistics. Access EU Publication Office and law database.
<div class="ecl-container">
<section>
<h2 class="ecl-u-type-heading-2">News, Events and Publications</h2>
<div class="ecl-row">
<div class="ecl-col-12 ecl-col-md-8 ecl-u-border-md-right ecl-u-border-color-md-grey-15">
<article class="ecl-u-pt-none ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 24 March 2020</div>
<a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Lorem
ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-lg-none"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg");width:7.5rem">
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-none ecl-u-d-lg-block"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg");width:13.125rem">
</div>
</article>
<article class="ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 02 March 2020</div>
<a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Vivamus
aliquet tellus sodales lectus vulputate, vitae ullamcorper magna vehicula. Aenean interdum ornare risus
non ornare. Mauris a sagittis mi</a>
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-lg-none"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg");width:7.5rem">
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-none ecl-u-d-lg-block"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg");width:13.125rem">
</div>
</article>
<article class="ecl-u-d-flex ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15">
<div class="ecl-u-flex-grow-1">
<div class="ecl-u-type-s ecl-u-type-color-grey-75 ecl-u-type-family-alt">NEWS ARTICLE | 17 February 2020
</div><a href="/example"
class="ecl-u-d-inline-block ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-type-family-alt ecl-u-mt-xs ecl-link ecl-link--standalone">Morbi
nisl sem, imperdiet a sapien condimentum, ultricies mollis libero. Curabitur pharetra condimentum
tellus</a>
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-lg-none"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg");width:7.5rem">
</div>
<div role="img" aria-label="Example image"
class="ecl-u-media-ratio-3-2 ecl-u-media-bg-size-contain ecl-u-media-bg-repeat-none ecl-u-flex-shrink-0 ecl-u-ml-xl ecl-u-d-none ecl-u-d-lg-block"
style="background-image:url("https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg");width:13.125rem">
</div>
</article><a href="/example"
class="ecl-u-type-bold ecl-u-mt-l ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">All news</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid ecl-icon--rotate-90">
<use xlink:href="/component-library/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
</svg></a>
</div>
<div class="ecl-col-12 ecl-col-md-4">
<article variant="tile" class="ecl-u-mt-xl ecl-u-height-auto ecl-u-mt-md-none ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Events</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Upcoming events organized by the European Commission</div>
</div>
<footer class="ecl-card__footer"></footer>
</article>
<article variant="tile" class="ecl-u-mt-xl ecl-u-height-auto ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Publications</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Search documents and statistics. Access EU Publication Office and law
database.</div>
</div>
<footer class="ecl-card__footer"></footer>
</article>
</div>
</div>
</section>
</div>Try it yourself on the playground
Playground