<!-- Media Row -->
<div class="js-anim media_row component_theme_blue_gem component_alignment_left">
<div class="js-card-row media_row_block">
<div class="media_row_frame">
<div class="fs-row">
<div class="fs-cell">
<div class="media_row_inner">
<div class="media_row_header">
<figure class="media_row_header_figure">
<picture class="media_row_header_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/jhusoe/1220x814/10" width="1220" height="814">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/jhusoe/980x654/10" width="980" height="654">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhusoe/735x980/10" width="735" height="980">
<source media="(min-width: 750px)" srcset="https://images.fastspot.com/jhusoe/1220x686/10" width="1220" height="686">
<img class="media_row_header_image" src="//images.fastspot.com/jhusoe/740x416/10" alt="" loading="lazy" width="740" height="416">
</picture>
</figure>
</div>
<div class="media_row_cards">
<div class="media_row_card">
<!-- Image Card -->
<div class="card card_image card_type_contained">
<div class="card_inner card_image_inner">
<figure class="card_image_figure">
<img class="card_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/7 735w, https://images.fastspot.com/jhusoe/555x740/7 555w, https://images.fastspot.com/jhusoe/375x500/7 375w, https://images.fastspot.com/jhusoe/225x300/7 225w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 290px" src="https://images.fastspot.com/jhusoe/225x300/7" alt="" loading="lazy" width="225" height="300">
</figure>
</div>
</div>
<!-- END: Image Card -->
</div>
<div class="media_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/1 980w, https://images.fastspot.com/jhusoe/740x494/1 740w, https://images.fastspot.com/jhusoe/500x334/1 500w, https://images.fastspot.com/jhusoe/300x200/1 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
</div>
</div>
</div>
</div>
<div class="media_row_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Master of Science in Counseling", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
<div class="carousel_row_card">
<!-- Image Card -->
<div class="card card_image card_type_contained">
<div class="card_inner card_image_inner">
<figure class="card_image_figure">
<img class="card_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/7 735w, https://images.fastspot.com/jhusoe/555x740/7 555w, https://images.fastspot.com/jhusoe/375x500/7 375w, https://images.fastspot.com/jhusoe/225x300/7 225w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 290px" src="https://images.fastspot.com/jhusoe/225x300/7" alt="" loading="lazy" width="225" height="300">
</figure>
</div>
</div>
<!-- END: Image Card -->
</div>
<div class="carousel_row_card">
<!-- Topic Card -->
<div class="card card_topic card_type_contained">
<div class="card_inner card_topic_inner">
<div class="card_topic_grid">
<div class="card_topic_group">
<div class="card_topic_header">
<h3 class="card_topic_title">COVID-19: Education Resource Center</h3>
</div>
<div class="card_topic_body">
<p class="card_topic_description">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="card_topic_action">
<a class="card_topic_link" href="#">Nibh Dapibus Tristique</a>
</div>
</div>
<div class="card_topic_media">
<figure class="card_topic_figure">
<img class="card_topic_image" srcset="https://images.fastspot.com/jhusoe/980x654/1 980w, https://images.fastspot.com/jhusoe/740x494/1 740w, https://images.fastspot.com/jhusoe/500x334/1 500w, https://images.fastspot.com/jhusoe/300x200/1 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
<!-- END: Topic Card -->
</div>
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination media_row_carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Media Row -->
{#
{% include '@component-media-row' with {
theme: 'white',
card_alignment: 'right',
group_title: 'Title',
group_image: '1',
group_alt: '',
cards: [
{
card_type: 'Card type',
items: ''
}
]
} %}
#}
<!-- Media Row -->
<div class="js-anim media_row component_theme_{{ theme ?: 'white' }} component_alignment_{{ card_alignment ?: 'right' }}">
<div class="js-card-row media_row_block">
<div class="media_row_frame">
<div class="fs-row">
<div class="fs-cell">
<div class="media_row_inner">
<div class="media_row_header">
<figure class="media_row_header_figure">
{% include '@partial-picture' with {
class: 'media_row_header',
image: group_image,
alt: group_alt,
loading: 'lazy',
default: img.wide.sml,
sources: {
'1394px': img.classic.lrg,
'1220px': img.classic.med,
'980px': img.portraitFull.med,
'750px': img.wide.lrg
}
} %}
</figure>
</div>
<div class="media_row_cards">
{% for card in cards %}
<div class="media_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="media_row_carousel">
<div class="js-slick-row carousel_row" data-slick='{"regionLabel": "{{ group_title }}", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
{% for card in cards %}
<div class="carousel_row_card">
{% include '@partial-' ~ card.card_type ~ '-card' with {
item: card.item
} %}
</div>
{% endfor %}
</div>
<div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination media_row_carousel_pagination"></div>
</div>
</div>
</div>
</div>
<!-- END: Media Row -->
No notes defined.