<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-20 py-10 max-w-4xl border border-gray
rounded" role="dialog" aria-model="true" aria-labelledby="alert-label">
<div class="overlay__content">
<h1 id="alert-label" class="text-gray-darker pb-4 font-bold text-xl md:text-2xl font-sansExt leading-tight text-center">You are now leaving our website to go to <a id="url-domain" class="text-primary" href="https://expandtheroom.com/insights/">https://expandtheroom.com/insights/</a></h1>
<div class="overlay-buttons m-auto text-center mt-4">
<a href="https://expandtheroom.com/insights/" target="_blank" class="button button-loader button--default button--icon button--icon--right rounded-full">
<span class="flex items-center relative">
Continue
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 39.75 39.72" xmlns="http://www.w3.org/2000/svg" class="stroke-current w-4 h-auto">
<defs>
<style>.a{fill:none;stroke-width:2px;}</style>
</defs>
<title>icon-link-external</title>
<polyline class="a" points="28.19 1 38.75 1 38.75 11.56"/>
<path class="a" transform="translate(0 -.28)" d="M22,9H1V39H31V17.43"/>
<line class="a" x1="38.16" x2="19.64" y1="1.6" y2="20.12"/>
</svg>
</span>
</a>
<span class="overlay__cancel-link">
<a href="#" class="text-primary hover:text-primary-dark">
Cancel
</a>
</span>
</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-20 py-10 max-w-4xl border border-gray
rounded" role="dialog" aria-model="true" aria-labelledby="alert-label">
<div class="overlay__content">
<h1 id="alert-label" class="text-gray-darker pb-4 font-bold text-xl md:text-2xl font-sansExt leading-tight text-center">{{heading}} <a id="url-domain" class="text-primary" href="{{button.url}}">{{button.url}}</a></h1>
<div class="overlay-buttons m-auto text-center mt-4">
{{#with button}}
<a href="{{url}}" target="_blank" class="button button-loader button--default button--icon button--icon--right rounded-full">
<span class="flex items-center relative">
{{text}}
{{render '@icon-link-external'}}
</span>
</a>
{{/with}}
<span class="overlay__cancel-link">
{{#with link}}
{{> @link}}
{{/with}}
</span>
</div>
</div>
</aside>
</div>
{
"heading": "You are now leaving our website to go to",
"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": "https://expandtheroom.com/insights/",
"text": "Continue"
},
"link": {
"url": "#",
"text": "Cancel"
}
}
.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.