BU Blocks Style Guide

Editorial Aside BlockLink

Ready New Issue

A block for Aside tag type content, like a short bio on a Professor in the story, or a small explainer about subatomic particles in a longer story about physics. This is a parent block that allows specific child blocks, like image block, headline block, paragraph block, button block, etc. which can be added or removed as necessary.

Examples Source: blocks/aside/style.scss, line 16 View Source

Default styling

.alignleft

Example of a left-aligned layout

.alignright

Example of a right-aligned layout

.has-light-background

Example of a light background

.has-dark-background

Example of a dark background

Markup blocks/aside/bu-blocks-block-aside.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-aside {{modifier_class}}">
						<figure><img src="https://placekitten.com/300/200" alt="Image Block" /></figure>
						<h2>Heading Block</h2>
						<p>Paragraph block. consectetur adipiscing elit. Maecenas massa augue.</p>
						<a href="#" class="button">Button block</a>
					</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. 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.</p>
		
					<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.</p>
				</article>
			</main>
		</div>