Overlay
Overlay content
.overlay
Overlay component. Contains close button.
Markup
<button class="button"
data-controller="generic/ui/ContentOpener"
data-config="{"type": "Overlay", "contentId": "overlay-content"}"
title="Overlay example">
Click for overlay
</button>
<article class="richText richText--overlay is-hidden" data-controller="generic/ui/RichText" id="overlay-content">
<p>Overlay content</p>
</article>
<!-- Actual Overlay HTML -->
<!--
<div class="overlay is-in-dom is-visible" aria-live="polite" role="dialog">
<div class="overlay__scrollContainer" tabindex="">
<div class="overlay__contentPositioner">
<div class="overlay__content">
<div class="container">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 m-push-left-1-12 xl-8-12 xl-push-left-1-12">
<div class="overlay__body" data-contentcontainer="">
<article class="richText richText--overlay" data-controller="generic/ui/RichText" id="overlay-content">
Overlay content
</article>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="closeButton overlay__close">
<span class="icon">
<span class="alt">Sluiten</span>
</span>
</a>
</div>
</div>
<div class="darkener"></div>
</div>
-->