Call-out block

The call-out block is used to call attention to a piece of information.

Learn more

This option can be used at the end of a story to encourage users to learn more about a topic, and it can also be used to display "sidebar" content or highlight important information on a page. A CTA button is optional.

Diversity, Equity & Inclusion

The College of Engineering is committed to building an inclusive and equitable environment for learning, research, service and outreach.

Learn more

What are ultrafine particles?

Communities near airports are exposed to ultrafine particle air pollution, which is not routinely monitored or regulated by the federal government. At less than 0.1 micron in diameter, ultrafine particles are 700 times thinner than the width of a human hair. But some ultrafine particles are even smaller — to differentiate these smaller ultrafine particles, which are between 0.01 to 0.02 microns in diameter, the UW researchers coined a new term, “ultra ultrafine particles.”

Code for Page content type

<div class="my-5 p-0" style="border-left: 10px solid #85754d;">
	<div class="p-5 bg-info" style="border-right: 40px solid transparent; border-image: url(https://www.engr.washington.edu/sites/engr/files/imgs/diagonal-lines-vertical.png) 40">
		<h3 class="text-primary mt-1">Heading goes here</h3>
		<p>Body text goes here.</p>
		<!---CTA optional--->
		<p class="mb-0"><a class="btn btn-secondary m-0" href="#">Learn more</a></p>
	</div>
</div>

Code for Story and Layout content type

Place this code in a Copy Block.

<div class="my-lg-5" style="border-left: 10px solid #85754d;">
	<div class="p-5 bg-info" style="border-right: 50px solid transparent; border-image: url(https://www.engr.washington.edu/sites/engr/files/imgs/diagonal-lines-vertical.png) 50">
		<h3 class="text-primary mt-1">Headline goes here</h3>
		<p>Body text goes here.</p>
		<!---CTA optional--->
		<p class="mb-0"><a class="btn btn-secondary m-0" href="#">learn more</a></p>
	</div>
</div>

Learn more with icon

Comprehensive listing of student resources

Resources and support organized by category: academics, community and inclusion, mental health, English language proficiency, and study spaces and labs.

Explore all resources

Code

Same code for both Page content type and Story and Layout content type. On Story and Layout content type, place this code in a Copy Block.

<!---Adjust top and bottom margin as needed by updating my-3--->
<div class="my-3 p-0">
	<div class="p-4 bg-info" style="border-right: 40px solid transparent; border-image: url(https://www.engr.washington.edu/sites/engr/files/imgs/diagonal-lines-vertical.png) 40">
		<div class="row px-3">
			<div class="col-sm-1 mr-4 my-auto pb-3">
				<!----update the icon to suite your need--->
				<div class="fa-stack fa fa-2x"><i class="fa fa-circle fa-stack-2x text-primary">&nbsp;</i> <i class="fa fa-info fa-stack-1x text-white pr-2">&nbsp;</i></div>
			</div>

			<div class="col-sm-10">
				<h3 class="mt-0">Headline goes here</h3>
				<p>Body text goes here.</p>
				<!---CTA optional--->
				<p class="mb-0"><a class="btn btn-secondary m-0" href="#">Call to action</a></p>
			</div>
		</div>
	</div>
</div>

Notes

This option can be used to add an announcement or a note on a page. A CTA button is optional.

Headline if needed

Body text goes here.

Learn more

Live example

Code

<div class="shadow-sm p-3 bg-light mb-4">
	<h3 class="mt-0">Headline if needed</h3>
	<p>Body text goes here.</p>
	<!---CTA optional--->
	<p class="mb-0"><a class="btn btn-default border m-0" href="#">learn more</a></p>
</div>