<div class="callout-with-image">
<div class="callout-with-image__media">
<img src="../../img/Component-Feature-Image-Small.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="callout-with-image__content text-content">
<h2>Heading 2 - This is a title of major section of a page</h2>
<div>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
</div>
<div class="callout-with-image__links">
<button class="iastate22-button" data-micromodal-trigger=Video-Modal-FSMI-1>
Video Dolor Ipsum
<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-FSMI-1" 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-FSMI-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FSMI-1-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-FSMI-1-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div> <button class="iastate22-button" data-micromodal-trigger=Video-Modal-FSMI-2>
Video Ipsum
<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-FSMI-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-FSMI-2-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-FSMI-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-FSMI-2-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="callout-with-image">
<div class="callout-with-image__media">
<img src="{{ image|path }}" alt="" width="622" height="414" loading="lazy" >
</div>
<div class="callout-with-image__content text-content">
<h2>{{title}}</h2>
<div>{{body_copy}}</div>
{% if buttons %}
<div class="callout-with-image__links">
{% for button in buttons %}
<button class="iastate22-button" data-micromodal-trigger={{ button.modal.id }}>
{{button.text}}
<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>
{% include "@modal--with-video" with button.modal %}
{% endfor %}
</div>
{% endif %}
{# {% if link_set %}
{% include "@link-set" with link_set %}
{% endif %} #}
</div>
</div>
{
"image": "../../img/Component-Feature-Image-Small.jpg",
"title": "Heading 2 - This is a title of major section of a page",
"body_copy": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
"button": {
"text": "Primary CTA Style",
"url": "#"
},
"buttons": [
{
"text": "Video Dolor Ipsum",
"modal": {
"id": "Video-Modal-FSMI-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": ""
}
}
},
{
"text": "Video Ipsum",
"modal": {
"id": "Video-Modal-FSMI-2",
"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-with-image {
margin-top: rem(53);
margin-bottom: rem(53);
.callout-with-image__media {
margin-left: rem(-36);
@include media-breakpoint-up(md) {
margin-left: rem(-70);
}
@include media-breakpoint-up(xl) {
margin-left: rem(-190);
}
}
}
.callout-with-image {
@include media-breakpoint-up(md) {
display: flex;
align-items: flex-start;
}
@include media-breakpoint-up(lg) {
align-items: center;
}
}
.callout-with-image__media {
@extend %responsive-img;
margin-bottom: rem(30);
&:before {
padding-top: 66.67%;
}
@include media-breakpoint-up(md) {
flex: 1 1 0px;
}
@include media-breakpoint-up(lg) {
flex: 0 1 auto;
width: 70%;
}
.callout-with-image--small & {
margin-bottom: rem(17);
@include media-breakpoint-up(lg) {
width: 60%;
}
&:before {
padding-top: 57.31%;
}
}
}
.callout-with-image__content {
@include media-breakpoint-up(md) {
flex: 1 1 0px;
padding-left: rem(45);
}
@include media-breakpoint-up(lg) {
padding-left: rem(90);
flex: 0 1 auto;
width: 60%;
}
.iastate22-button {
margin-top: rem(22);
}
p {
.callout-with-image--small & {
margin-top: rem(20);
}
}
}
.callout-with-image__links {
display: flex;
flex-wrap: wrap;
gap: 0 rem(20);
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
index.scss file as @import "../components/feature-with-small-image/feature-with-small-image";<div class="paragraph-widget paragraph-widget--callout-with-image">.