Original source: https://utsa-asc.github.io/college-dls/college-dls/reference/typography.html#mission-callout
Additional color variations may need to be developed (white background, orange, blue, etc).
<div class="mission-callout" id="mission-callout">
<div class="container">
<div class="d-flex flex-row align-items-center">
<div class="w-25">
<h6 class="mission-callout-heading white text-center">Mission Callout</h6>
</div>
<div class="w-75">
<div class="mission-callout-text">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta
lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur
aliquet mattis elit. Mauris eget velit bibendum, auctor risus eu, elementum sem. Fusce magna
neque, bibendum in efficitur ut, elementum non risus. Aenean vitae elementum risus. Donec ut
sollicitudin nisl. Pellentesque vehicula eu neque ut iaculis. Phasellus dignissim augue in lorem
pharetra dictum. Fusce pellentesque ut ipsum quis malesuada. Duis eu ipsum eget neque vehicula
hendrerit id eu libero.</p>
</div>
</div>
</div>
</div>
</div>
/* components/01-visual-styling/03-typography/02-callout/callout.scss */
/* BEGIN callout.scss */
.mission-callout-text h5 {
font-size: 28px;
color: $white;
font-family: 'ProximaNova';
font-weight: 400;
}
.mission-callout-text p {
color: $white;
font-size: 17px;
font-weight: 300;
}
// .headings-typography-ul>li {
// padding-bottom: 15px;
// margin-bottom: 15px;
// border-bottom: 2px solid #86acd5;
// min-height: 120px;
// padding: 0px 15px;
// }
img {
max-width: 100%;
}
.no-mrg {
margin: 0px;
}
.paragraph-text {
color: $blue;
font-size: 17px;
line-height: 1.6;
}
.mission-callout {
background-color: $blue-b;
}
#mission-callout {
padding-top: 112px;
padding-bottom: 100px;
margin-bottom: 50px;
}
.mission-callout-heading {
font-size: 18px;
font-weight: 400;
}
// .border-t-blue {
// border-top: 2px solid #86acd5;
// }
/* END callout.scss */
<div class="mission-callout" id="mission-callout">
<div class="container">
<div class="d-flex flex-row align-items-center">
<div class="w-25">
<h6 class="mission-callout-heading white text-center">Mission Callout</h6>
</div>
<div class="w-75">
<div class="mission-callout-text">
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta
lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur
aliquet mattis elit. Mauris eget velit bibendum, auctor risus eu, elementum sem. Fusce magna
neque, bibendum in efficitur ut, elementum non risus. Aenean vitae elementum risus. Donec ut
sollicitudin nisl. Pellentesque vehicula eu neque ut iaculis. Phasellus dignissim augue in lorem
pharetra dictum. Fusce pellentesque ut ipsum quis malesuada. Duis eu ipsum eget neque vehicula
hendrerit id eu libero.</p>
</div>
</div>
</div>
</div>
</div>