<a href="#" class="b-button b-button--primary js-modal-link" data-target="#fadeModal">Fade modal</a>
<div class="c-modal c-modal--fade" id="fadeModal" role="dialog" aria-label="Fade in modal example" aria-hidden="true" tabindex="-1">
<div class="c-modal__close">
<span class="b-hide">Close this modal</span>
</div>
<div class="c-modal__content" role="document">
<div class="c-modal__inner-content b-ugc">
<p>Fade in modal example</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero nisi, pulvinar quis quam ac, tincidunt pellentesque nunc. Phasellus eget auctor nisi, non commodo mauris. Maecenas sed lacus ultricies massa lobortis ullamcorper. Quisque
feugiat risus eu libero gravida varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin at mattis dui. Praesent elementum tortor pretium enim pretium, ut faucibus dolor
ullamcorper. Donec eu nisi eget arcu semper sodales. Vivamus euismod mollis venenatis. Phasellus ac vulputate metus. Duis consequat blandit pellentesque. Phasellus eget condimentum purus, nec ullamcorper enim. Nulla lobortis, leo sit amet
maximus ullamcorper, urna lectus tempus ante, ut mollis urna sapien eu magna. </p>
<p> Donec eu quam non libero maximus sagittis vitae vel dolor. Aenean imperdiet convallis sagittis. In hac habitasse platea dictumst. Nunc mollis, lorem id mattis pretium, nisl diam semper urna, in fermentum neque risus id quam. Suspendisse a
malesuada leo. Quisque et ante erat. Phasellus eget nisl pulvinar, fringilla odio vitae, faucibus libero. Nulla sit amet accumsan sapien. Sed vitae neque sit amet magna semper malesuada. In porttitor vitae nunc id venenatis. Proin nec
aliquet odio. Phasellus eleifend neque eu nulla maximus, a elementum enim viverra. Mauris eget quam porta, fringilla risus eu, posuere felis. Ut quis malesuada elit. Quisque tincidunt elit felis, vitae sagittis diam mollis sit amet. Nulla
eget nulla pulvinar, vehicula est eu, viverra velit. </p>
<p> In accumsan vulputate lectus nec scelerisque. Suspendisse at nisl tristique, mollis erat et, dapibus elit. Proin vulputate elit at justo faucibus sagittis. Curabitur eget lorem urna. Praesent non turpis sem. Vivamus consequat eu est quis volutpat.
Curabitur pretium purus eu felis finibus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p> Vivamus sollicitudin nisl et molestie iaculis. Nulla eu lacinia massa. Pellentesque eu malesuada tortor. Morbi eleifend vel nisi hendrerit hendrerit. Praesent vel accumsan risus, vel rutrum leo. Nullam congue eu enim sed tincidunt. Etiam a
tellus at leo pulvinar sagittis eget at sapien. Praesent eu orci consequat, dictum urna ut, gravida eros. </p>
<p> Mauris hendrerit sem in tincidunt feugiat. Integer convallis varius augue, quis suscipit ipsum convallis ac. Integer vulputate quam nec sem facilisis semper. Integer et blandit purus. Donec hendrerit, lacus et dictum ultrices, velit diam tincidunt
leo, a viverra erat lorem non ipsum. Nam lobortis ante vitae dictum placerat. Integer vel vulputate elit, sed consequat turpis. Phasellus consectetur euismod velit eget luctus. </p>
</div>
</div>
</div>
<a href="#" class="b-button b-button--primary js-modal-link" data-target="#{{ id }}">{{ buttonText }} modal</a>
<div class="c-modal{{ modifier }}" id="{{ id }}" role="dialog" aria-label="{{ title }}" aria-hidden="true" tabindex="-1">
<div class="c-modal__close">
<span class="b-hide">Close this modal</span>
</div>
<div class="c-modal__content" role="document">
<div class="c-modal__inner-content b-ugc">
<p>{{ title }}</p>
{{{ content }}}
</div>
</div>
</div>
{
"name": "Default",
"buttonText": "Fade",
"modifier": " c-modal--fade",
"id": "fadeModal",
"title": "Fade in modal example",
"content": " <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero nisi, pulvinar quis quam ac, tincidunt pellentesque nunc. Phasellus eget auctor nisi, non commodo mauris. Maecenas sed lacus ultricies massa lobortis ullamcorper. Quisque feugiat risus eu libero gravida varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin at mattis dui. Praesent elementum tortor pretium enim pretium, ut faucibus dolor ullamcorper. Donec eu nisi eget arcu semper sodales. Vivamus euismod mollis venenatis. Phasellus ac vulputate metus. Duis consequat blandit pellentesque. Phasellus eget condimentum purus, nec ullamcorper enim. Nulla lobortis, leo sit amet maximus ullamcorper, urna lectus tempus ante, ut mollis urna sapien eu magna. </p><p> Donec eu quam non libero maximus sagittis vitae vel dolor. Aenean imperdiet convallis sagittis. In hac habitasse platea dictumst. Nunc mollis, lorem id mattis pretium, nisl diam semper urna, in fermentum neque risus id quam. Suspendisse a malesuada leo. Quisque et ante erat. Phasellus eget nisl pulvinar, fringilla odio vitae, faucibus libero. Nulla sit amet accumsan sapien. Sed vitae neque sit amet magna semper malesuada. In porttitor vitae nunc id venenatis. Proin nec aliquet odio. Phasellus eleifend neque eu nulla maximus, a elementum enim viverra. Mauris eget quam porta, fringilla risus eu, posuere felis. Ut quis malesuada elit. Quisque tincidunt elit felis, vitae sagittis diam mollis sit amet. Nulla eget nulla pulvinar, vehicula est eu, viverra velit. </p><p> In accumsan vulputate lectus nec scelerisque. Suspendisse at nisl tristique, mollis erat et, dapibus elit. Proin vulputate elit at justo faucibus sagittis. Curabitur eget lorem urna. Praesent non turpis sem. Vivamus consequat eu est quis volutpat. Curabitur pretium purus eu felis finibus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p> Vivamus sollicitudin nisl et molestie iaculis. Nulla eu lacinia massa. Pellentesque eu malesuada tortor. Morbi eleifend vel nisi hendrerit hendrerit. Praesent vel accumsan risus, vel rutrum leo. Nullam congue eu enim sed tincidunt. Etiam a tellus at leo pulvinar sagittis eget at sapien. Praesent eu orci consequat, dictum urna ut, gravida eros. </p><p> Mauris hendrerit sem in tincidunt feugiat. Integer convallis varius augue, quis suscipit ipsum convallis ac. Integer vulputate quam nec sem facilisis semper. Integer et blandit purus. Donec hendrerit, lacus et dictum ultrices, velit diam tincidunt leo, a viverra erat lorem non ipsum. Nam lobortis ante vitae dictum placerat. Integer vel vulputate elit, sed consequat turpis. Phasellus consectetur euismod velit eget luctus. </p>"
}
There are no notes for this item.