<button class="js-modal-trigger" data-modal-trigger="tn-modal-1" data-modal-type="open">modal trigger</button>
<div class="c-modal js-modal " id="tn-modal-1">
<div class="c-modal__overlay"></div>
<div class="c-modal__wrapper">
<a class="c-modal__close js-modal-trigger" data-modal-trigger="tn-modal-1" data-modal-type="close" href="">
<div class="c-icon c-modal__close-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.7,12L23,3.7c0.8-0.8,0.8-2,0-2.7c-0.8-0.8-2-0.8-2.7,0L12,9.3L3.7,1C3,0.2,1.8,0.2,1,1S0.2,3,1,3.7L9.3,12L1,20.3c-0.4,0.4-0.6,0.9-0.6,1.4c0,0.5,0.2,1,0.6,1.4c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6l8.3-8.3l8.3,8.3c0.4,0.4,0.9,0.6,1.4,0.6c0.5,0,1-0.2,1.4-0.6c0.4-0.4,0.6-0.9,0.6-1.4c0-0.5-0.2-1-0.6-1.4L14.7,12z" />
</svg>
</div>
</a>
<div class="c-modal__container l-container@below-viewport-4">
<div class="c-modal__content">
<div class="c-tn ">
<div class="c-tn__category">
<div class="c-icon c-tn__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4.5,15.2c4.5,0,8.1,3.6,8.1,8.1c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5c0-3.8-3-6.9-6.8-7l-0.3,0H0.9
c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.4-0.5l0.1,0H4.5z M4.5,18.8c2.5,0,4.5,2,4.5,4.5c0,0.3-0.2,0.5-0.5,0.5
c-0.3,0-0.5-0.2-0.5-0.5c0-1.8-1.4-3.3-3.2-3.4l-0.2,0H0.9c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.4-0.5l0.1,0H4.5z M13.8,6.1
c0.1,0,0.1,0,0.2,0c2.4,0.8,4.1,3,4.3,5.5c0.3,0,0.6-0.1,0.9-0.1l0.4,0h3.5c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.2,0.5-0.4,0.5l-0.1,0
h-3.5c-2.5,0-4.9,0.9-6.8,2.4c0.6,0.6,1.1,1.3,1.6,2c1.4-1.1,3-1.8,4.8-1.9l0.4,0h3.5c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.2,0.5-0.4,0.5
l-0.1,0h-3.5c-1.7,0-3.4,0.6-4.7,1.8c0.4,0.9,0.8,1.8,1,2.7c0.8-1.1,2-1.8,3.4-1.9l0.3,0h3.5c0.3,0,0.5,0.2,0.5,0.5
c0,0.3-0.2,0.5-0.4,0.5l-0.1,0h-3.5c-1.9,0-3.4,1.5-3.4,3.4c0,0.3-0.2,0.5-0.5,0.5c-0.2,0-0.5-0.2-0.5-0.4c0,0,0-0.1,0-0.1
c0-5.8-4.6-10.5-10.3-10.7l-0.3,0H0.9c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.4-0.5l0.1,0h3.6c0.4,0,0.8,0,1.2,0.1
C5.9,9,7.6,6.9,10,6.1c0.1,0,0.1,0,0.2,0c0.2,0,0.4,0.1,0.5,0.4c0.1,0.3-0.1,0.6-0.3,0.7c-2.1,0.7-3.5,2.5-3.6,4.7
c1.9,0.4,3.8,1.3,5.3,2.5c1.5-1.3,3.3-2.1,5.2-2.5c-0.1-2.2-1.5-4-3.6-4.7c-0.3-0.1-0.4-0.4-0.3-0.7C13.4,6.2,13.6,6.1,13.8,6.1z
M2.4,5.9c0.1,0,0.1,0,0.2,0l0.1,0l2.6,1.5c0.1,0.1,0.2,0.2,0.2,0.3c0,0.1,0,0.3-0.1,0.4C5.3,8.4,5.1,8.5,4.9,8.5
c-0.1,0-0.1,0-0.2,0l-0.1,0L2.1,6.9C1.9,6.8,1.8,6.5,1.9,6.2C2,6,2.2,5.9,2.4,5.9z M21.6,5.9c0.2,0,0.4,0.1,0.5,0.3
c0.1,0.2,0.1,0.5-0.1,0.7l-0.1,0.1l-2.6,1.5c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0-0.4-0.1-0.5-0.3c-0.1-0.2-0.1-0.5,0.1-0.7l0.1-0.1
L21.4,6C21.5,6,21.5,5.9,21.6,5.9z M12,5.8c0.1,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4s-0.1,0.3-0.2,0.4
c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4s0.1-0.3,0.2-0.4C11.7,5.8,11.9,5.8,12,5.8z M6.4,1.9
c0.2,0,0.3,0.1,0.4,0.2l0.1,0.1l1.5,2.6C8.5,5,8.4,5.3,8.2,5.4C8.1,5.5,8,5.5,7.9,5.5c-0.2,0-0.3-0.1-0.4-0.2L7.5,5.2L6,2.7
C5.9,2.6,5.9,2.4,5.9,2.3C6,2.1,6.1,2,6.2,2C6.3,1.9,6.4,1.9,6.4,1.9z M17.6,1.9c0.1,0,0.2,0,0.3,0.1c0.3,0.1,0.3,0.5,0.2,0.7
l-1.5,2.6c-0.1,0.2-0.3,0.3-0.5,0.3c-0.1,0-0.2,0-0.3-0.1c-0.3-0.1-0.3-0.5-0.2-0.7l1.5-2.6C17.2,2,17.4,1.9,17.6,1.9z M12,0.4
c0.3,0,0.5,0.2,0.5,0.4l0,0.1v3c0,0.3-0.2,0.5-0.5,0.5c-0.3,0-0.5-0.2-0.5-0.4l0-0.1V1C11.5,0.7,11.7,0.4,12,0.4z" />
</svg>
</div>
<span class="c-tn__type">horizontal</span>
</div>
<header class="c-tn__header">
<h2 class="c-tn__title">An event with a longer title.</h2>
<p class="c-tn__year">2014</p>
</header>
<div class="c-tn__content s-wysiwyg-model s-wysiwyg-default">
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
<p>Practice-led innovation supported by science and market-driven
actors in the laying hen and the other livestock. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet!</p>
</div>
<div class="c-event-card__action">
<a class="c-link c-link--with-icon" href="#">
<span class="c-link__text">Learn more</span>
<div class="c-icon c-link__icon c-link__icon--after">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M8.3,0.4c0.8,0,1.4,0.6,1.4,1.4S9.1,3.2,8.3,3.2l0,0H3.6c-0.3,0-0.5,0.2-0.5,0.5l0,0v16.7c0,0.2,0.2,0.5,0.5,0.5l0,0h16.7c0.3,0,0.5-0.2,0.5-0.5l0,0v-4.6c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4l0,0v4.6c0,1.8-1.5,3.3-3.2,3.3l0,0H3.7c-1.8,0-3.3-1.5-3.3-3.2l0,0V3.6c0-1.8,1.5-3.2,3.2-3.2l0,0H8.3z M22.2,0.4c0.8,0,1.4,0.6,1.4,1.4l0,0v9.3c0,0.8-0.6,1.4-1.4,1.4s-1.4-0.6-1.4-1.4l0,0V5.2l-9.7,9.7c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.7-0.1-1-0.4c-0.5-0.5-0.5-1.4,0-1.9l0,0l9.7-9.7h-5.9c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4l0,0H22.2z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
