BU Blocks Style Guide

Sidebar

Editorial Modal BlockLink

Ready New Issue

A block that allows for the creation of an overlay with content in it. Should support laying out the content in the overlay and some way to trigger opening it. The opening trigger may need to be a separate block, and should support multiple on a page so each will need a unique ID for the JS to target automagically. Overlay block should be able to contain child blocks, for instance, slideshow, gallery, video, text, etc.

Examples Source: blocks/modal/style.scss, line 16 View Source
Default styling
.has-media

Default theme with background media

.has-light-theme

Light theme

.has-light-theme.has-media

Light theme with background media

.has-dark-theme

Dark theme

.has-dark-theme.has-media

Dark theme with background media

Markup blocks/modal/bu-blocks-block-modal.hbs
<div class="wrapper">
			<main id="main" role="main" class="content">
				<article class="content-area">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa augue, sodales nec convallis in, viverra in tortor. Cras lacus orci, scelerisque non dictum ac, molestie a urna. Nunc ultricies in tortor interdum dictum. Fusce ut mi aliquam, efficitur libero ac, ultricies est. Etiam pellentesque sapien ex, at porttitor urna pulvinar ac. Donec aliquam, dui eget porta rutrum, libero sapien faucibus nibh, ut blandit massa massa eget eros. Curabitur erat nunc, dapibus eget convallis non, tristique ac enim.</p>
		
					<aside class="wp-block-editorial-modal js-bu-block-modal {{modifier_class}}">
						<div class="wp-block-editorial-modal-callout">
							<div class="wp-block-editorial-modal-media">
								<figure class="wp-block-editorial-modal-image">
								{{#ifContains modifier_class 'has-media' }}
									<img src="https://placekitten.com/1000/500" class="has-background-opacity-70">
								{{/ifContains}}
								</figure>
							</div>
							<div class="wp-block-editorial-modal-callout-content">
								<div class="modal-valign">
									<h1>Modal Title</h1>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa augue, sodales nec convallis in, viverra in tortor.</p>
									<p><a href="#one" class="js-bu-block-modal-trigger-overlay button">Explore</a></p>
								</div>
							</div>
						</div>
		
						<div class="wp-block-editorial-modal-content js-bu-block-modal-overlay">
							<div class="overlay overlay-scale one">
								<a href="#one" class="wp-block-editorial-modal-overlay-close js-bu-block-modal-overlay-close">Close</a>
								<article>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius, nibh vel rutrum convallis, libero erat dictum diam, sit amet consectetur urna odio a mi. Nulla facilisi. Aenean finibus aliquam mauris eu faucibus. Cras id dictum nibh. Sed cursus magna quis ipsum efficitur dictum. Curabitur a risus posuere tortor laoreet porttitor. Maecenas fermentum tellus lacus, sed sagittis nunc laoreet pellentesque. Sed porta vel eros in convallis. In hac habitasse platea dictumst. Sed cursus est vitae odio pulvinar, et euismod tellus maximus. Donec efficitur justo a nisl sodales, quis tempus nibh sagittis. Donec at mi at turpis tempor aliquet eu vel leo. Nulla ac mattis purus, quis vehicula neque. In luctus orci in nibh suscipit, at imperdiet mi pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
		
		
									<p>In sit amet justo maximus, efficitur tortor non, lobortis nisi. Mauris est mauris, commodo et faucibus at, molestie vel tortor. Etiam at tortor orci. Curabitur mattis elementum odio, at sagittis nulla ullamcorper eu. Morbi orci sapien, consequat a lobortis ut, bibendum et risus. Donec a laoreet orci. Donec iaculis egestas porta. Fusce libero ante, finibus in luctus in, mattis et massa. Vestibulum rhoncus commodo felis, ac imperdiet nulla consectetur ac. Phasellus a felis hendrerit, pretium nulla vel, vehicula urna. Curabitur ut consectetur felis, id vehicula elit. Morbi tellus orci, tincidunt vitae sapien vitae, tempor consectetur eros. Fusce quis blandit justo. In at turpis eros.</p>
		
									<p>Etiam imperdiet laoreet pulvinar. Donec augue magna, euismod at tortor vel, gravida facilisis est. Proin tempor felis leo, eu sodales arcu tempor ac. Vestibulum mollis, lorem sed porta volutpat, mauris neque ultrices urna, vitae dictum nisi tortor non nisi. Nam convallis ligula a purus imperdiet, nec porttitor lorem accumsan. Maecenas quis dictum magna. Etiam eget euismod dolor.</p>
		
									<p>Mauris id tincidunt arcu. Vestibulum sagittis justo consequat, condimentum nulla et, rutrum odio. Mauris varius ac libero quis dignissim. Ut maximus vel justo sed vulputate. Vestibulum ex elit, convallis eu efficitur vel, pulvinar ut leo. Praesent ac justo eget erat tincidunt ornare ut blandit elit. Sed rutrum molestie nibh. Ut et finibus elit, sit amet porttitor justo. Donec dignissim, dolor non mattis dapibus, nibh ante hendrerit ex, ut vestibulum velit mauris in ipsum. Nullam pharetra tellus sit amet sapien tempor, sit amet ornare tellus ultrices. Nullam vehicula, nulla eu egestas ornare, erat nisi tempor nisl, et rhoncus massa ligula sed nibh. Maecenas auctor semper enim. Maecenas vestibulum neque sapien, quis hendrerit magna auctor vitae. Nulla consectetur magna id mauris blandit, vitae posuere est tempus. Aenean vehicula quam id mauris pellentesque aliquam. Pellentesque metus ante, egestas et commodo sed, iaculis et lectus.</p>
		
									<p>Mauris gravida lacus ac dolor finibus, at aliquam mauris hendrerit. Ut ac mi mauris. Aenean tristique, magna sed accumsan feugiat, orci neque ultricies purus, a venenatis augue lacus quis lorem. Duis porttitor finibus lorem eu tincidunt. Praesent lobortis, justo quis dignissim malesuada, turpis lacus fringilla velit, placerat ultrices justo nisl congue elit. Ut consequat mattis elit, id molestie nibh mollis tristique. Proin hendrerit maximus eros vitae ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec at odio quam.</p>
								</article>
							</div>
						</div>
					</aside>
					<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel.</p>
				</article>
			</main>
		</div>