Skip to main content

MyCoE

Side-by-side block

The Side-by-side block is used to highlight a single item such as a story, an initiative or an announcement. Multiple options are available.

No background Neutral-colored background Overlapping text

No background

On the Home Page, the full-width block is best suited to go above the news items. You can include up to two CTA buttons. If using two buttons, one should be the primary button and the other secondary.

example

Code

This code is designed for the Home Page, to go above the news items. When adding it in other places, adjust the margin and padding to suit your need. If another CTA button is needed, reference the code for neutral-colored option below.

Text on the right

<div class="mb-0">
	<div class="container m-auto">
		<!-----Start here if adding it on a page with sidebar----->
		<div class="row py-3">
			<div class="col-sm-6 pb-4"><img loading="lazy" width="555" height="326" alt="#" src="img.jpg"></div>
			<div class="col-sm-6">
				<p class="small text-dark font-weight-bold text-uppercase mb-2">Tag goes here</p>
				<h2 class="mt-0">Headline goes here</h2>
				<p>Body text goes here.</p>
				<a class="btn btn-default" href="#">Go somewhere</a>
			</div>
		</div>
		<!-----End for page with sidebar----->
	</div>
</div>

Text on the left

<div class="mb-0">
	<div class="container m-auto">
		<!-----Start here if adding it on a page with sidebar----->
		<div class="row py-3">
			<div class="col-sm-6 pb-4 order-md-1"><img loading="lazy" width="555" height="326" alt="#" src="img.jpg"></div>
			<div class="col-sm-6">
				<p class="small text-dark font-weight-bold text-uppercase mb-2">Tag goes here</p>
				<h2 class="mt-0">Headline goes here</h2>
				<p>Body text goes here.</p>
				<a class="btn btn-default" href="#">Go somewhere</a>
			</div>
		</div>
		<!-----End for page with sidebar----->
	</div>
</div>

Neutral-colored background

On the Home Page, the full-width block is best suited to go below the news items.

example

Code

Remove the second button if not needed.

Text on the right

<div class="p-lg-5 mb-0 bg-light">
	<div class="container my-lg-5 py-lg-4 m-auto">
		<!-----Start here if adding it on a page with sidebar and add "bg-light" as a class in the first div----->
		<div class="row py-3">
			<div class="col-sm-6 pb-4"><img loading="lazy" width="555" height="326" alt="#" src="img.jpg" /></div>
			<div class="col-sm-6">
				<p class="small text-dark font-weight-bold text-uppercase mb-2">Tag goes here</p>
				<h2 class="mt-0">Headline goes here</h2>
				<p>Body text goes here.</p>
				<a class="btn btn-default mb-3" href="#">Primary Button</a> <a class="btn btn-secondary mb-3" href="#">Secondary button</a>
			</div>
		</div>
		<!-----End for page with sidebar----->
	</div>
</div>

Text on the left

<div class="p-lg-5 mb-0 bg-light">
	<div class="container my-lg-5 py-lg-4 m-auto">
		<!-----Start here if adding it on a page with sidebar and add "bg-light" as a class in the first div----->
		<div class="row py-3">
			<div class="col-sm-6 pb-4 order-md-1"><img loading="lazy" width="555" height="326" alt="#" src="img.jpg" /></div>
			<div class="col-sm-6">
				<p class="small text-dark font-weight-bold text-uppercase mb-2">Tag goes here</p>
				<h2 class="mt-0">Headline goes here</h2>
				<p>Body text goes here.</p>
				<a class="btn btn-default mb-3" href="#">Primary Button</a> <a class="btn btn-secondary mb-3" href="#">Secondary button</a>
			</div>
		</div>
		<!-----End for page with sidebar----->
	</div>
</div>

Overlapping text

Text can be placed either on the left or right of image.

2021 Distinguished Alumna Anita Gale

“You need to be open. If something is pulling you to do something philanthropic, embrace the opportunity. Part of being human is to enrich the experiences in the lives of others.”

Read more

2021 Distinguished Alumna Anita Gale

“You need to be open. If something is pulling you to do something philanthropic, embrace the opportunity. Part of being human is to enrich the experiences in the lives of others.”

Read more

Code for Page content type

Text on the left

<div class="row mx-auto mb-5">
	<div class="col-lg-7 ml-lg-n4 px-0 order-md-1"><img alt="" loading="lazy" src="img.jpg"></div>

	<div class="col-lg-6 my-auto mr-lg-n5 p-4 bg-info" style="position: relative;">
	<h3 class="mt-0">Heading goes here</h3>
	<p>Body text goes here</p>
	<a class="btn btn-secondary btn-sm" href="#">CTA</a></div>
</div>

Text on the right

<div class="row mx-auto mb-5">
	<div class="col-lg-7 mr-lg-n4 px-0"><img alt="" loading="lazy" src="img.jpg"></div>
	
	<div class="col-lg-6 my-auto ml-lg-n5 p-4 bg-info" style="position: relative;">
	<h3 class="mt-0">Heading goes here</h3>
	<p>Body text goes here</p>
	<a class="btn btn-secondary btn-sm" href="#">CTA</a></div>
</div>

Code for Story and Layout content type

Text on the left

<div class="container row mx-auto mb-5">
	<div class="col-lg-7 ml-lg-n5 px-0 order-md-1"><img alt="" loading="lazy" src="img.jpg"></div>

	<div class="col-lg-6 my-auto mr-lg-n5 p-4 uwcoe-stories-copy-body bg-info" style="position: relative;">
	<h3 class="mt-0">Heading goes here</h3>
	<p>Body text goes here.</p>
	<a class="btn btn-secondary btn-sm" href="#">CTA</a>
</div>
	
</div>

Text on the right

<div class="container row mx-auto mb-5">
	<div class="col-lg-7 mr-lg-n5 px-0"><img alt="" loading="lazy" src="img.jpg"></div>
	
	<div class="col-lg-6 my-auto ml-lg-n5 p-4 uwcoe-stories-copy-body bg-info" style="position: relative;">
	<h3 class="mt-0">Heading goes here</h3>
	<p>Body text goes here.</p>
	<a class="btn btn-secondary btn-sm" href="#">CTA</a></div>
</div>