<div data-js-behavior="overlayAlert" class="overlay-bg transition-opacity opacity-0 fixed flex justify-center items-center fixed w-full h-full">
<aside class="relative bg-white transition-opacity opacity-0 px-4 mx-4 md:mx-0 md:px-20 pt-16 pb-10 max-w-4xl border border-gray
rounded" role="dialog" aria-model="true" aria-labelledby="alert-label" aria-describedby="alert-description">
<button aria-label="Close" class='icon-close text-primary hover:text-primary-dark transition fill-current'>
<?xml version="1.0" encoding="UTF-8"?>
<svg class="fill-current" version="1.1" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
<title>close</title>
<g fill-rule="evenodd">
<g transform="translate(-462 -130)" >
<g transform="translate(462 130)">
<rect transform="translate(7 7) rotate(44) translate(-7 -7)" x="6" y="-1" width="2" height="16"/>
<rect transform="translate(7 7) scale(-1 1) rotate(44) translate(-7 -7)" x="6" y="-1" width="2" height="16"/>
</g>
</g>
</g>
</svg>
</button>
<div class="overlay__content">
<h1 id="alert-label" class="text-gray-darker pb-4 font-bold text-2xl md:text-4xl font-sansExt leading-tight text-center">Important Information for Plan Members Regarding COVID-19</h1>
<p id="alert-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="m-auto text-center mt-4">
<a href="#" class="button button--default button--icon button--icon--right">
<span class="flex items-center">
Learn more
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-right</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(1 -1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</aside>
</div>
<div data-js-behavior="overlayAlert" class="overlay-bg transition-opacity opacity-0 fixed flex justify-center items-center fixed w-full h-full">
<aside class="relative bg-white transition-opacity opacity-0 px-4 mx-4 md:mx-0 md:px-20 pt-16 pb-10 max-w-4xl border border-gray
rounded" role="dialog" aria-model="true" aria-labelledby="alert-label" aria-describedby="alert-description">
<button aria-label="Close" class='icon-close text-primary hover:text-primary-dark transition fill-current'>
{{> @icon-close}}
</button>
<div class="overlay__content">
<h1 id="alert-label" class="text-gray-darker pb-4 font-bold text-2xl md:text-4xl font-sansExt leading-tight text-center">{{heading}}</h1>
<p id="alert-description">{{text}}</p>
<div class="m-auto text-center mt-4">
{{#with button}}
{{> @button--icon-right}}
{{/with}}
</div>
</div>
</aside>
</div>
{
"heading": "Important Information for Plan Members Regarding COVID-19",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"button": {
"url": "#",
"text": "Learn more"
}
}
.overlay-bg {
z-index: 9998;
background-color: rgba(230, 236, 242, .75);
}
.overlay-alert {
z-index: 9999;
}
.icon-close {
@apply .w-5 .absolute;
right: 20px;
top: 20px;
}
.overlay__cancel-link {
@apply ml-4;
}
.button-loader {
background: linear-gradient(to right, #0c5fa8 50%, #199ecf 50%);
background-size: 200% 50%;
background-position:left bottom;
animation-name: loader;
animation-duration: 6s;
animation-delay: 1s;
animation-timing-function: linear;
}
@keyframes loader {
from {background-position:right bottom;}
to {background-position:left bottom;;}
}
There are no notes for this item.