JHU SOE Component Library

Media Row: Blue Cloud 

<!-- Media Row -->
<div class="js-anim media_row component_theme_blue_cloud component_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">

                                <picture class="media_row_header_picture">
                                    <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/jhusoe/1220x814/4" width="1220" height="814">
                                    <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/jhusoe/980x654/4" width="980" height="654">
                                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhusoe/735x980/4" width="735" height="980">
                                    <source media="(min-width: 750px)" srcset="https://images.fastspot.com/jhusoe/1220x686/4" width="1220" height="686">
                                    <img class="media_row_header_image" src="//images.fastspot.com/jhusoe/740x416/4" 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/9 735w, https://images.fastspot.com/jhusoe/555x740/9 555w, https://images.fastspot.com/jhusoe/375x500/9 375w, https://images.fastspot.com/jhusoe/225x300/9 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/9" alt="" loading="lazy" width="225" height="300">
                                        </figure>
                                    </div>
                                </div>
                                <!-- END: Image Card -->
                            </div>
                            <div class="media_row_card">

                                <!-- Quote Card -->
                                <div class="card card_quote card_type_contained">
                                    <div class="card_inner card_quote_inner">
                                        <figure class="card_quote_figure">
                                            <blockquote class="card_quote_blockquote">
                                                <span class="card_quote_blockquote_icon">&ldquo;</span>
                                                <p class="card_quote_blockquote_text">The real difference is the faculty. You have access to internationally known leaders who can talk you through situations based on a depth of real-life experience.</p>
                                            </blockquote>
                                            <figcaption class="card_quote_caption">
                                                <span class="card_quote_caption_name">Evan Velleman, MS '18</span>
                                                <span class="card_quote_caption_title">Counselor, Henderson-Hopkins School, Baltimore, Md.</span>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <figure class="card_quote_media">

                                        <img class="card_quote_image" srcset="https://images.fastspot.com/jhusoe/300x300/1 300w, https://images.fastspot.com/jhusoe/100x100/1 100w" sizes="110px" src="https://images.fastspot.com/jhusoe/100x100/1" alt="" loading="lazy" width="100" height="100">
                                    </figure>
                                </div>
                                <!-- END: Quote 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/9 735w, https://images.fastspot.com/jhusoe/555x740/9 555w, https://images.fastspot.com/jhusoe/375x500/9 375w, https://images.fastspot.com/jhusoe/225x300/9 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/9" alt="" loading="lazy" width="225" height="300">
                                </figure>
                            </div>
                        </div>
                        <!-- END: Image Card -->
                    </div>
                    <div class="carousel_row_card">

                        <!-- Quote Card -->
                        <div class="card card_quote card_type_contained">
                            <div class="card_inner card_quote_inner">
                                <figure class="card_quote_figure">
                                    <blockquote class="card_quote_blockquote">
                                        <span class="card_quote_blockquote_icon">&ldquo;</span>
                                        <p class="card_quote_blockquote_text">The real difference is the faculty. You have access to internationally known leaders who can talk you through situations based on a depth of real-life experience.</p>
                                    </blockquote>
                                    <figcaption class="card_quote_caption">
                                        <span class="card_quote_caption_name">Evan Velleman, MS '18</span>
                                        <span class="card_quote_caption_title">Counselor, Henderson-Hopkins School, Baltimore, Md.</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <figure class="card_quote_media">

                                <img class="card_quote_image" srcset="https://images.fastspot.com/jhusoe/300x300/1 300w, https://images.fastspot.com/jhusoe/100x100/1 100w" sizes="110px" src="https://images.fastspot.com/jhusoe/100x100/1" alt="" loading="lazy" width="100" height="100">
                            </figure>
                        </div>
                        <!-- END: Quote 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.