JHU SOE Component Library

Topic Row 

<!-- Topic Row -->
<div class="js-anim topics_row component_theme_gray_light component_alignment_left">
    <div class="js-card-row topics_row_block">
        <div class="topics_row_frame">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="topics_row_inner">
                        <div class="topics_row_header">
                            <h2 class="topics_row_title">
                                <span class="topics_row_title_label">Master of Science in Special Education</span>
                            </h2>
                            <div class="topics_row_description">
                                <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                        </div>
                        <div class="topics_row_cards">
                            <div class="topics_row_card">

                                <!-- Links Long Card -->
                                <div class="card card_links_long card_type_default">
                                    <div class="card_inner card_links_long_inner">
                                        <div class="card_links_long_grid">
                                            <div class="card_links_long_header">
                                                <h2 class="card_links_long_title">Programs</h2>
                                            </div>
                                            <div class="card_links_long_body">
                                                <ul class="card_links_long_list" aria-label="Programs">
                                                    <li class="card_links_long_item">
                                                        <a href="#" class="card_links_long_item_link">
                                                            <span class="card_links_long_item_link_label">Master of Science in Special Education: Mild-to-Moderate Disabilities</span>
                                                        </a>
                                                    </li>
                                                    <li class="card_links_long_item">
                                                        <a href="#" class="card_links_long_item_link">
                                                            <span class="card_links_long_item_link_label">Master of Science in Special Education: Severe Disabilities with an Emphasis in Autism Spectrum Disorders</span>
                                                        </a>
                                                    </li>
                                                    <li class="card_links_long_item">
                                                        <a href="#" class="card_links_long_item_link">
                                                            <span class="card_links_long_item_link_label">Master of Science in Special Education: Severe Disabilities with an Emphasis in Applied Behavior Analysis</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END: Links Long Card -->
                            </div>
                            <div class="topics_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>
                    </div>
                </div>
            </div>
            <div class="topics_row_carousel">
                <div class="js-slick-row carousel_row" data-slick='{"regionLabel": "Master of Science in Special Education", "arrows": false, "dots": true, "infinite": false, "variableWidth": true}'>
                    <div class="carousel_row_card">

                        <!-- Links Long Card -->
                        <div class="card card_links_long card_type_default">
                            <div class="card_inner card_links_long_inner">
                                <div class="card_links_long_grid">
                                    <div class="card_links_long_header">
                                        <h2 class="card_links_long_title">Programs</h2>
                                    </div>
                                    <div class="card_links_long_body">
                                        <ul class="card_links_long_list" aria-label="Programs">
                                            <li class="card_links_long_item">
                                                <a href="#" class="card_links_long_item_link">
                                                    <span class="card_links_long_item_link_label">Master of Science in Special Education: Mild-to-Moderate Disabilities</span>
                                                </a>
                                            </li>
                                            <li class="card_links_long_item">
                                                <a href="#" class="card_links_long_item_link">
                                                    <span class="card_links_long_item_link_label">Master of Science in Special Education: Severe Disabilities with an Emphasis in Autism Spectrum Disorders</span>
                                                </a>
                                            </li>
                                            <li class="card_links_long_item">
                                                <a href="#" class="card_links_long_item_link">
                                                    <span class="card_links_long_item_link_label">Master of Science in Special Education: Severe Disabilities with an Emphasis in Applied Behavior Analysis</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END: Links Long Card -->
                    </div>
                    <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>
                <div class="js-carousel-row-pagination carousel_row_pagination carousel_pagination topics_row_carousel_pagination"></div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-topic-row' with {
		theme: 'white',
		group_title: 'Title',
		group_description: 'Description',
		cards: [
			{
				card_type: 'Card type',
				items: ''
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="js-anim topics_row component_theme_{{ theme ?: 'white' }} component_alignment_{{ card_alignment ?: 'right' }}">
	<div class="js-card-row topics_row_block">
		<div class="topics_row_frame">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="topics_row_inner">
						<div class="topics_row_header">
							<h2 class="topics_row_title">
								<span class="topics_row_title_label">{{ group_title }}</span>
							</h2>
							<div class="topics_row_description">
								<p>{{ group_description }}</p>
							</div>
							{% if group_link %}
								<div class="topics_row_action">
									<a class="topics_row_action_link" href="{{ group_link.url }}">{{ group_link.label }}</a>
								</div>
							{% endif %}
						</div>
						<div class="topics_row_cards">
							{% for card in cards %}
								<div class="topics_row_card">
									{% include '@partial-' ~ card.card_type ~ '-card' with {
										item: card.item
									} %}
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
			<div class="topics_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 topics_row_carousel_pagination"></div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.