<div class="card-set">
<ul>
<li>
<div class="iastate22-card iastate22-card--linked-image">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="">
</div>
<button class="iastate22-card__cta" data-micromodal-trigger=Video-Modal-LIV-1>Watch 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>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-LIV-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-LIV-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-LIV-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-LIV-1-title">Video Modal Image Card 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-card iastate22-card--linked-image">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="">
</div>
<button class="iastate22-card__cta" data-micromodal-trigger=Video-Modal-LIV-2>Watch 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>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-LIV-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-LIV-2-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-LIV-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-LIV-2-title">Video Modal Image Card 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-card iastate22-card--linked-image">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="">
</div>
<button class="iastate22-card__cta" data-micromodal-trigger=Video-Modal-LIV-3>Watch 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>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-LIV-3" 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-LIV-3-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-LIV-3-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-LIV-3-title">Video Modal Image Card 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-card" data-micromodal-trigger=Video-Modal-1>
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">Card Title</h2>
<div class="iastate22-card__body text-content">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<button class="iastate22-card__cta">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>
</div>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-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-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-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-1-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-card" data-micromodal-trigger=Video-Modal-1>
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">Card Title</h2>
<div class="iastate22-card__body text-content">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<button class="iastate22-card__cta">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>
</div>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-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-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-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-1-title">Video Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-card" data-micromodal-trigger=Video-Modal-1>
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">Card Title</h2>
<div class="iastate22-card__body text-content">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<button class="iastate22-card__cta">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>
</div>
<div class="iastate22-modal iastate22-modal--with-video" id="Video-Modal-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-1-content" role="dialog" aria-modal="true" aria-labelledby="Video-Modal-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-1-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 class="card-set{% if teaser_news %} card-set--teaser{% elseif teaser_profile %} card-set--teaser {% elseif teaser_profile %} card-set--teaser{% endif %}">
<ul>
{% for card in cards %}
{% if card.type == "linked-image" %}
<li>{% include "@card--linked-image-with-video" with card %}</li>
{% elseif card.type == "standard" %}
<li>{% include "@card--with-video" with card %}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{
"cards": [
{
"type": "linked-image",
"image": "../../img/Component-Card-Image-1.jpg",
"video": {
"text": "Watch Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-LIV-1",
"title": "Video Modal Image Card 1",
"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": ""
}
}
}
},
{
"type": "linked-image",
"image": "../../img/Component-Card-Image-2.jpg",
"video": {
"text": "Watch Ipsum Dolor",
"modal": {
"id": "Video-Modal-LIV-2",
"title": "Video Modal Image Card 2",
"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": ""
}
}
}
},
{
"type": "linked-image",
"image": "../../img/Component-Card-Image-3.jpg",
"video": {
"text": "Watch Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-LIV-3",
"title": "Video Modal Image Card 3",
"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": ""
}
}
}
},
{
"type": "standard",
"title": "Card Title",
"body": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"video": {
"text": "Link Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-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": ""
}
}
}
},
{
"type": "standard",
"title": "Card Title",
"body": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"video": {
"text": "Link Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-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": ""
}
}
}
},
{
"type": "standard",
"title": "Card Title",
"body": "<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"video": {
"text": "Link Lorem Ipsum Dolor",
"modal": {
"id": "Video-Modal-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--card-set {
@extend %extended-component-width;
@include media-breakpoint-up(xl) {
margin-left: rem(-20);
margin-right: rem(-128);
margin-bottom: rem(60);
}
}
.card-set {
position: relative;
padding-bottom: rem(20);
@include media-breakpoint-up(lg) {
padding-bottom: rem(30);
}
&.card-set--teaser {
ul {
@include media-breakpoint-up(md) {
margin-right: 0;
}
li {
max-width: 100%;
margin-bottom: rem(100);
position: relative;
@include media-breakpoint-up(md) {
width: 100%;
padding-right: 0;
}
&:last-child {
&:after {
display: none;
}
}
&:after {
content: "";
border-bottom: rem(1) solid $light-grey;
position: absolute;
bottom: rem(-30);
left: 0;
right: 0;
z-index: 1;
opacity: 0;
@include media-breakpoint-up(sm) {
opacity: 1;
}
@include media-breakpoint-up(md) {
bottom: rem(-46);
}
@include media-breakpoint-up(xl) {
left: rem(-108);
right: rem(-108);
}
}
}
}
&:after {
display: none;
}
}
.recent-articles & {
ul {
display: block;
gap: rem(20);
@include media-breakpoint-up(lg) {
display: flex;
}
li {
width: 100%;
margin-bottom: rem(25);
@include media-breakpoint-up(lg) {
padding: 0;
width: 31%;
margin: 0;
}
}
}
}
&:after {
content: "";
background-color: $off-white;
position: absolute;
bottom: 0;
left: rem(-36);
right: rem(-36);
height: 20%;
max-height: rem(342);
@include media-breakpoint-up(md) {
left: rem(-70);
right: rem(-70);
}
@include media-breakpoint-up(lg) {
content: "";
background-color: $off-white;
max-height: rem(365);
position: absolute;
bottom: 0;
left: rem(-70);
right: rem(-70);
height: 62%;
}
@include media-breakpoint-up(xl) {
left: rem(-170);
right: rem(-170);
max-height: rem(340);
}
@include media-breakpoint-up(xxl) {
left: -50vw;
width: 150vw;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
}
> ul {
display: flex;
flex-wrap: wrap;
@include media-breakpoint-up(md) {
margin-right: rem(-20);
}
@include media-breakpoint-up(lg) {
margin-right: rem(-40);
}
&:after {
display: none;
@include media-breakpoint-up(md) {
content: "";
flex: 0 1 auto;
width: 50%;
display: block;
}
@include media-breakpoint-up(lg) {
display: none;
}
}
> li {
max-width: rem(400);
margin: 0 auto rem(30);
flex: 0 1 auto;
width: 100%;
@include media-breakpoint-up(md) {
width: 50%;
padding-right: rem(20);
}
@include media-breakpoint-up(lg) {
max-width: none;
width: 33.3%;
padding-right: rem(40);
}
}
}
}
.card-set__title {
text-align: center;
}
This is a custom component (the class has been prefaced with .iastate22-[classname]).
card component which outputs multiple instances of the cards, this should typically be used for output globallycard component default, but can output other card variants as well - card--with-modal variant by setting with_modal to true in the config, card--teaser-news by setting teaser_news to true in the config, or card--teaser-profile by setting teaser_profile to true in the configindex.scss file as @import "../components/card-set/card-set";<div class="paragraph-widget paragraph-widget--card-set">