<div class="callout-inset">
<div class="callout-inset_inset">
<h2 class="callout-inset_inset-headline">Inset Call Out with H2</h2>
<div class="text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="feature-with-large-image">
<div class="feature-with-large-image__media">
<img src="../../img/feature_with_large_image.jpg" alt="" loading="lazy" width="1176" height="662">
</div>
<div class="feature-with-large-image__content">
<h2>Inset Call Out with H2</h2>
<div class="feature-with-large-image__text text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit <a href="#">aspernatur</a> aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<button class="iastate22-button" data-micromodal-trigger=Video-Modal-FLI-2>
Link Lorem Ipsum Dolor
<span class="icon-video">
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="18.002" viewBox="0 0 31 18.002" class="icon-video--inactive">
<path d="M31,3.984a2.153,2.153,0,0,0-2.891-1.846L23,3.75V2.979A3.03,3.03,0,0,0,19.916,0H3.1A3.052,3.052,0,0,0,0,3v12.02A3.047,3.047,0,0,0,3.026,18H19.9A3.055,3.055,0,0,0,23,15.007v-.746l5.045,1.59a2.2,2.2,0,0,0,.8.153h.014a1.992,1.992,0,0,0,1.063-.264A2.027,2.027,0,0,0,31,13.979Zm-10,11A1.079,1.079,0,0,1,19.916,16H3.063A1.08,1.08,0,0,1,2,15V3.024A1.049,1.049,0,0,1,3.061,2H19.933A1.062,1.062,0,0,1,21,3V14.981Zm7.98-1.005a.215.215,0,0,1-.108.028h0l-.155-.038L23,12.164V5.847l5.78-1.826a.229.229,0,0,1,.081-.016h.047A.119.119,0,0,1,29,4.037Z" transform="translate(0 0)" fill="#7c2529"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="30.873" height="18" viewBox="0 0 30.873 18" class="icon-video--active">
<path id="SVG_Video_Gold_Fill" d="M-980.032,12916a2.129,2.129,0,0,1-1.968-2.249v-13.5a2.129,2.129,0,0,1,1.968-2.25h16.93a2.131,2.131,0,0,1,1.974,2.25v13.507A2.13,2.13,0,0,1-963.1,12916Zm27.316-2.1-6.412-2.162v-9.481l6.412-2.159a1.093,1.093,0,0,1,.451-.1,1.167,1.167,0,0,1,1.138,1.2v11.6a1.218,1.218,0,0,1-.541,1.021,1.1,1.1,0,0,1-.593.175A1.115,1.115,0,0,1-952.716,12913.9Z" transform="translate(982 -12898)" fill="#f1be48"/>
</svg>
</span>
</button>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-FLI-2" aria-hidden="false">
<div class="iastate22-modal__overlay" tabindex="-1" data-micromodal-close>
<div class="iastate22-modal__container iastate22-modal__container-with-media" id="Video-Modal-FLI-2-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FLI-2-title">
<button class="iastate22-modal__close" aria-label="Close modal" data-micromodal-close><i class="fa-light fa-xmark" aria-hidden="true"></i></button>
<div class="iastate22-modal__media">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
<div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
</div>
<div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="iastate22-modal__content">
<h2 class="iastate22-modal__title" id="Video-Modal-FLI-2-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="callout-inset">
<div class="callout-inset_inset">
<h2 class="callout-inset_inset-headline">{{title}}</h2>
<div class="text-content">{{intro_text|raw}}</div>
</div>
{% include "@feature-with-large-image--video-embed" %}
</div>
{
"title": "Inset Call Out with H2",
"intro_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
"feature_with_large_image": {
"image": "../../img/Feature-Image-Inset-Large_FPO.jpg",
"title": "Inset Feature with H2 and Large Image and intro",
"text": "<p>Nemo enim ipsam voluptatem quia voluptas sit <a href=\"#\">aspernatur</a> aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"video": {
"text": "Video Dolor Ipsum",
"modal": {
"id": "Video-Modal-FLIntro-1",
"title": "Video Modal",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>",
"video": {
"wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
"source": "youtube",
"title": "Your future starts now.",
"youtube_video_id": "LjOmcZkXVcU",
"vimeo_video_id": ""
}
}
}
}
]
}
}
}
.paragraph-widget--callout-inset {
@extend %full-width-component;
@include media-breakpoint-up(lg) {
margin-top: rem(120);
}
}
.callout-inset {
position: relative;
.feature-with-large-image {
z-index: 1;
border-top-color: $off-white;
background-color: $iastate-red;
@include media-breakpoint-up(sm) {
border-top: none;
}
@include media-breakpoint-up(lg) {
background-color: transparent;
}
&:before {
display: none;
}
&:after {
@include media-breakpoint-up(lg) {
content: "";
position: absolute;
background-color: $white;
top: 50%;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
}
}
.feature-with-large-image__content {
@include media-breakpoint-up(lg) {
background-color: $iastate-red;
}
h2,
.feature-with-large-image__text {
color: $white;
}
.feature-with-large-image__text {
p {
font-family: $typeface-sans-serif;
font-weight: 700;
}
&.text-content p > a:not(.iastate22-link-secondary):not(.iastate22-link-external):not(.link-tertiary) {
color: $white;
transition: text-decoration-color 0.3s ease-in-out, color 0.3s ease-in-out;
&:hover,
&:focus {
color: $iastate-gold;
// text-decoration-color: transparent;
}
}
}
}
.iastate22-button {
@extend %iastate22-button--reverse;
}
// off-white color in background
&:after {
@include media-breakpoint-up(sm) {
content: "";
position: absolute;
background-color: $off-white;
top: 0;
left: 0;
bottom: 50%;
right: 0;
}
@include media-breakpoint-up(lg) {
left: rem(100);
right: 50%;
z-index: 0;
bottom: 0;
}
@include media-breakpoint-up(xl) {
left: rem(190);
}
}
}
.callout-inset_inset {
background-color: $off-white;
padding: rem(60) rem(36);
position: relative;
z-index: 1;
@include media-breakpoint-up(sm) {
text-align: center;
padding-left: rem(108);
padding-right: rem(108);
}
@include media-breakpoint-up(lg) {
margin-right: rem(100);
margin-left: rem(100);
padding: rem(60) rem(70) rem(80);
}
@include media-breakpoint-up(xl) {
margin-right: rem(190);
margin-left: rem(190);
padding: rem(60) rem(114) rem(107);
}
p {
line-height: (29 / 18);
@include media-breakpoint-up(md) {
line-height: (26 / 16);
}
}
.text-content {
ul,
ol {
text-align: left;
}
&:last-child {
margin-bottom: 0;
@include media-breakpoint-up(xl) {
margin-bottom: 0;
}
}
}
}
.callout-inset_inset-headline {
position: relative;
&:before {
content: "";
position: absolute;
border-bottom: rem(2) solid $iastate-gold;
left: 50%;
margin-left: rem(-25);
width: rem(50);
bottom: 0;
}
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
feature-with-large-image (with some style variations)index.scss file as @import "../components/feature-with-large-image-and-intro/feature-with-large-image-and-intro";<div class="paragraph-widget paragraph-widget--callout-inset">.