BU Blocks Style Guide

Global Pullquote BlockLink

In-Progress New Issue

This is a Pullquote Block. It has 3 Block Styles, Default, Modern, and Pop. The latter two styles can accomodate an image. The focus of the image can be set relative to 9 general regions (i.e. Top Left, Center Right, etc.)

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

Default styling

.alignwide

Wide version of pullquote

.alignfull

full version of pullquote

.alignfull.has-image

full version of pullquote

.is-style-modern

Alternate Style (modern) of pullquote

.is-style-modern.alignwide

Modern pullquote in wide alignment

.is-style-modern.alignfull

Modern pullquote in full alignment

.is-style-modern.alignfull.has-image

Modern pullquote in full alignment

.is-style-pop

Alternate Style (pop) of pullquote

.is-style-pop.alignwide

Pop pullquote in wide alignment

.is-style-pop.alignfull

Pop pullquote in full alignment

.is-style-pop.alignfull.has-image

Pop pullquote in full alignment

.is-style-pop.alignfull.has-image.has-image-focus-top-left

image focus on top left

.is-style-pop.alignfull.has-image.has-image-focus-bottom-right

image focus on bottom right

Markup blocks/pullquote/bu-blocks-block-pullquote.hbs

<div class="wrapper">
			<main id="main" role="main" class="content">
				<article class="content-area">
					<div class="wp-block-editorial-pullquote {{modifier_class}}">
						<img style="opacity: 0.75" src="https://www.groundprobe.com/wp-content/uploads/2017/01/background-placeholder-3.jpg">
						<blockquote>
							<div class="container-lockup">
								<div class="container-icon-outer">
									<div class="container-icon-inner">
										<img style="opacity: 0.75" src="https://www.groundprobe.com/wp-content/uploads/2017/01/background-placeholder-3.jpg">
									</div>
								</div>
								<div class="container-text">
									<hr>
										<span class="quote-sizing">“That's one small step for man, one giant leap for mankind.”</span>
										<footer>— <a href="">Neil ArmStrong</a></footer>
									<hr>
								</div>
							</div>
						</blockquote>
					</div>
		
					<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>