Office of Diversity and Inclusion Component Library

Related News: Two Up 

<div class="news_related">
    <div class="news_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_header_inner">
                    <div class="news_related_header_inner_item is_content">
                        <div class="news_related_title_wrapper">
                            <h2 class="news_related_title">Related News</h2>
                        </div>
                        <div class="news_related_description">
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                        </div>
                    </div>

                    <div class="news_related_header_inner_item is_cta">
                        <div class="news_related_header_cta_wrap">

                            <a href="#" class="basic_link theme_white">
                                <span class="basic_link_inner">
                                    <span class="basic_link_label">Explore All News</span><span class="icon_nowrap basic_link_icon" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_items js-carousel" data-carousel-options='{ "maxWidth": "979px" }' aria-label="Related News">
                    <div class="news_related_item">
                        <figure class="news_related_item_figure">
                            <a class="news_related_item_figure_link" href="page-news-detail.html" aria-label="Read more about In Enim Justo Rhoncus Ut Lorem" tabindex="-1">

                                <img class="news_item_image" srcset="https://images.fastspot.com/jhu-odi/500x334/6 500w, https://images.fastspot.com/jhu-odi/300x200/6 300w" src="https://images.fastspot.com/jhu-odi/300x200/6" alt="" loading="lazy" width="300" height="200">
                            </a>
                        </figure>
                        <div class="news_related_item_wrapper">
                            <div class="news_related_item_header">
                                <h2 class="news_related_item_title">

                                    <a href="page-news-detail.html" class="news_related_item_title_link">
                                        <span class="news_related_item_title_link_inner">
                                            <span class="news_related_item_title_link_label">In Enim Justo Rhoncus Ut Lorem</span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="news_related_item_meta">
                                    <time class="news_related_item_date" datetime="Feb 17">Feb 17</time>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="news_related_item">
                        <figure class="news_related_item_figure">
                            <a class="news_related_item_figure_link" href="page-news-detail.html" aria-label="Read more about Lorem ipsum dolor sit amet, consectetuer adipiscing elit" tabindex="-1">

                                <img class="news_item_image" srcset="https://images.fastspot.com/jhu-odi/500x334/2 500w, https://images.fastspot.com/jhu-odi/300x200/2 300w" src="https://images.fastspot.com/jhu-odi/300x200/2" alt="" loading="lazy" width="300" height="200">
                            </a>
                        </figure>
                        <div class="news_related_item_wrapper">
                            <div class="news_related_item_header">
                                <h2 class="news_related_item_title">

                                    <a href="page-news-detail.html" class="news_related_item_title_link">
                                        <span class="news_related_item_title_link_inner">
                                            <span class="news_related_item_title_link_label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="news_related_item_meta">
                                    <time class="news_related_item_date" datetime="Jan 13">Jan 13</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{#
	{% include '@component-related-news' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: 6,
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

<div class="news_related">
	{% if title or description %}
		<div class="news_related_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="news_related_header_inner">
						<div class="news_related_header_inner_item is_content">
							{% if title %}
								<div class="news_related_title_wrapper">
									<h2 class="news_related_title">{{ title }}</h2>
								</div>
							{% endif %}
							{% if description %}
								<div class="news_related_description">
									<p>{{ description }}</p>
								</div>
							{% endif %}
						</div>

						<div class="news_related_header_inner_item is_cta">
							<div class="news_related_header_cta_wrap">
								{% include '@partial-link' with {
									title: 'Explore All News',
									url: '#',
									class: 'basic',
									theme: 'white',
									js: false,
									icon: 'arrow_right',
									aria: '',
									nowrap: true
								} %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="news_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_items js-carousel" data-carousel-options='{ "maxWidth": "979px" }' aria-label="{% if title %}{{ title }}{% else %}Related News{% endif %}">
					{% for item in items %}
						<div class="news_related_item">
							{% if item.image %}
								<figure class="news_related_item_figure">
									<a class="news_related_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
										{% include '@partial-image' with {
											class: 'news_item',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.classic.xsml,
												img.classic.xxsml
											]
										} %}
									</a>
								</figure>
							{% endif %}
							<div class="news_related_item_wrapper">
								<div class="news_related_item_header">
									<h2 class="news_related_item_title">
										{% include '@partial-link' with {
											class: 'news_related_item_title',
											title: item.title,
											url: item.url
										} %}
									</h2>
									{% if item.date %}
										<div class="news_related_item_meta">
											<time class="news_related_item_date" datetime="{{ item.date }}">{{ item.date|date('M j') }}</time>
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.