Blockquote block

The blockquote block is used to highlight quotation of a section of text. Multiple options are available.

Full-width narrow Full-width tall In-line box

Full-width narrow

News and Page content type version

“Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt augue interdum velit. At ultrices mi tempus imperdiet nulla sit amet interdum consectetur.”
— Lorem Ipsum

Code

<div class="background-deferred" data-src="https://www.engr.washington.edu/sites/engr/files/news/imgs/diagonal-lines-bg.png">
	<div class="row py-3 container m-auto">
		<div class="col-lg-4 col-md-5 pr-sm-4 my-auto"><img alt="" height="485" loading="lazy" src="img.png" width="485"></div>
		<div class="col-lg-8 col-md-7 my-auto px-3">
			<blockquote class="font-weight-bold text-primary my-2" style="border-left: 5px solid #85754d;">“Blockquoted text goes here.”
			<footer class="mt-2 text-dark font-weight-bold">— Source</footer>
			</blockquote>
		</div>
	</div>
</div>

Story and Layout content type version

Code

Place this code in a Custom Block.

<div class="mb-5 background-deferred" data-src="https://www.engr.washington.edu/sites/engr/files/news/imgs/diagonal-lines-bg.png">
	<div class="row py-3 container m-auto">
		<div class="col-lg-3 col-md-5 pr-sm-5 my-auto"><img alt="" loading="lazy" width="467" height="467" src="img.png"></div>
		<div class="col-lg-9 col-md-7 my-auto">
			<blockquote class="font-weight-bold text-primary my-2" style="border-left: 5px solid #85754d;">“Blockquoted text goes here”
  			<footer class="mt-2 text-dark font-weight-bold">— Source</footer>
			</blockquote>
		</div>
	</div>
</div>

Full-width tall

No News and Page content type version available at this time.

Story and Layout content type version

Code

Place this code in a Custom Block.

<style type="text/css">
@media only screen and ( max-width: 990px ) {
	.quote-text {
	font-size: 1.3em;
	}
	.fa-3x {
		font-size: 2em;
	}
}
</style>
<div class="mb-4 background-deferred" data-src="https://www.engr.washington.edu/sites/engr/files/news/imgs/diagonal-lines-bg.png">
	<div class="row py-3 container mx-auto pr-lg-0">
		<div class="col-lg-4 my-auto mr-lg-n5 text-white p-4" style="z-index:2; background-color: #4b2e83">
			<blockquote class="font-weight-bold text-white quote-text my-2"><i class="fas fa-quote-left fa-3x mb-2">&nbsp;</i><br />Blockquoted text goes here”
			<footer class="mt-2 text-white font-weight-bold">— Source</footer>
			</blockquote>
		</div>
	<div class="col-lg-8 ml-lg-n5 pr-lg-0 px-0"><img alt="" height="513" loading="lazy" src="img.jpg" width="770" /></div>
	</div>
</div>

In-line box

This block floats to the left or right of other page elements, allowing text to wrap around it.

News and Page content type version

Live example

Code

This code floats the block to the left of page content. To float right, change float-left to float-right and adjust the left margin accordingly.

<div class="my-3 float-left col-lg-5 border mr-lg-3 p-0">
	<div class="p-4" style="border-bottom: 20px solid #85754d;">
		<blockquote class="h4 my-0" style="border: none;"><i class="fas fa-quote-left fa-3x mb-2">&nbsp;</i><br>
		Blockquoted text goes here”
		<footer class="mt-2 font-weight-bold" style="color: #85754d; font-size: 1em;">— Source</footer>
		</blockquote>
	</div>
</div>

Story and Layout content type version

Code

Place this code in the Copy Block that contains the text that you want it to float next to. This code floats the block to the left of page content. To float right, change float-left to float-right and adjust the left margin accordingly.

<div class="float-left col-lg-5 border mr-lg-4 p-0">
	<div class="p-4" style="border-bottom: 20px solid #85754d;">
		<blockquote class="h4 quote-text my-0" style="border: none;"><i class="fas fa-quote-left fa-3x mb-2">&nbsp;</i><br>
		Blockquoted text goes here”
		<footer class="mt-2 font-weight-bold" style="color: #85754d; font-size: 1em;">— Source</footer>
		</blockquote>
	</div>
</div>