JHU Sustainability Component Library

Related News: Three Up 

<div class="news_related">
    <div class="news_related_header">
        <div class="fs-row fs-lg-justify-between fs-lg-align-center">
            <div class="fs-cell fs-lg-9">
                <div class="news_related_header_inner">
                    <h2 class="news_related_title">Featured News from the Hub</h2>
                </div>
            </div>

            <div class="fs-cell fs-lg-3">
                <div class="news_related_header_link_wrap">

                    <a href="#" class="basic_link ">
                        <span class="basic_link_inner">
                            <span class="basic_link_label">View All Hub News</span><span class="basic_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_external">
                                    <use href="/images/icons.svg#external" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <div class="news_related_description">
            <div class="fs-row">
                <div class="fs-cell fs-lg-9">
                    <div class="news_related_description_inner">
                        <p>The JHU community puts research into action with sustainbility initiatives. Our impressive faculty, staff, students, and community members collaborate to advance reducing the carbon footprint.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="news_related_items" aria-label="Featured News from the Hub">
                    <li class="news_related_item">
                        <div 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">

                                <picture class="news_item_picture">
                                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhu-sustainability/980x654/1">
                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/jhu-sustainability/980x980/1">
                                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/jhu-sustainability/740x740/1">
                                    <img class="news_item_image" src="//images.fastspot.com/jhu-sustainability/500x500/1" alt="" loading="lazy" width="500px" height="500px">
                                </picture>
                            </a>
                        </div>
                        <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_categories">
                                    <div class="news_related_item_category_hint">Categories</div>
                                    <ul class="news_related_item_category_list" aria-label="Categories">
                                        <li class="news_related_item_category">
                                            <a class="news_related_item_category_link" href="page-news-category.html">Category 1</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="news_related_item">
                        <div 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">

                                <picture class="news_item_picture">
                                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhu-sustainability/980x654/2">
                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/jhu-sustainability/980x980/2">
                                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/jhu-sustainability/740x740/2">
                                    <img class="news_item_image" src="//images.fastspot.com/jhu-sustainability/500x500/2" alt="" loading="lazy" width="500px" height="500px">
                                </picture>
                            </a>
                        </div>
                        <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 class="news_related_item_title_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                                <svg class="icon icon_external">
                                                    <use href="/images/icons.svg#external" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="news_related_item_categories">
                                    <div class="news_related_item_category_hint">Categories</div>
                                    <ul class="news_related_item_category_list" aria-label="Categories">
                                        <li class="news_related_item_category">
                                            <a class="news_related_item_category_link" href="page-news-category.html">Category One</a>
                                        </li>
                                        <li class="news_related_item_category">
                                            <a class="news_related_item_category_link" href="page-news-category.html">Another Category</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="news_related_item">
                        <div class="news_related_item_figure">
                            <a class="news_related_item_figure_link" href="page-news-detail.html" aria-label="Read more about Etiam ultricies nisi vel augue" tabindex="-1">

                                <picture class="news_item_picture">
                                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/jhu-sustainability/980x654/3">
                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/jhu-sustainability/980x980/3">
                                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/jhu-sustainability/740x740/3">
                                    <img class="news_item_image" src="//images.fastspot.com/jhu-sustainability/500x500/3" alt="" loading="lazy" width="500px" height="500px">
                                </picture>
                            </a>
                        </div>
                        <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">Etiam ultricies nisi vel augue</span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="news_related_item_categories">
                                    <div class="news_related_item_category_hint">Categories</div>
                                    <ul class="news_related_item_category_list" aria-label="Categories">
                                        <li class="news_related_item_category">
                                            <a class="news_related_item_category_link" href="page-news-category.html">Category</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{#
	{% include '@component-related-news' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

<div class="news_related">
	{% if title or description %}
		<div class="news_related_header">
			<div class="fs-row fs-lg-justify-between fs-lg-align-center">
				<div class="fs-cell fs-lg-9">
					<div class="news_related_header_inner">
						{% if title %}
							<h2 class="news_related_title">{{ title }}</h2>
						{% endif %}
					</div>
				</div>

				<div class="fs-cell fs-lg-3">
					<div class="news_related_header_link_wrap">
						{% include "@partial-link" with {
							class: "basic",
							icon: "external",
							title: "View All Hub News",
							url: "#",
							nowrap: true
						} %}
					</div>
				</div>
			</div>

			{% if description %}
				<div class="news_related_description">
					<div class="fs-row">
						<div class="fs-cell fs-lg-9">
							<div class="news_related_description_inner">
								<p>{{ description }}</p>
							</div>
						</div>
					</div>
				</div>
			{% endif %}
		</div>
	{% endif %}
	<div class="news_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="news_related_items" aria-label="{% if title %}{{ title }}{% else %}Related News{% endif %}">
					{% for item in items %}
						<li class="news_related_item">
							{% if item.image %}
								<div class="news_related_item_figure">
									{% if item.url %}
										<a class="news_related_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
									{% endif %}
									{% include "@partial-picture" with {
										class: 'news_item',
										image: item.image,
										alt: '',
										loading: 'lazy',
										default: img.square.xsml,
										sources: {
											'980px': img.classic.med,
											'740px': img.square.med,
											'500px': img.square.sml
										}
									} %}
									{% if item.url %}
										</a>
									{% endif %}
								</div>
							{% endif %}
							<div class="news_related_item_wrapper">
								<div class="news_related_item_header">
									<h2 class="news_related_item_title">
										{% if item.url %}
											{% include '@partial-link' with {
												class: 'news_related_item_title',
												title: item.title,
												url: item.url,
												icon: item.icon|default(false),
												nowrap: true
											} %}
										{% else %}
											{{ item.title }}
										{% endif %}
									</h2>
									{% if item.categories %}
										<div class="news_related_item_categories">
											<div class="news_related_item_category_hint">Categories</div>
											<ul class="news_related_item_category_list" aria-label="Categories">
												{% for category in item.categories %}
													<li class="news_related_item_category">
														<a class="news_related_item_category_link" href="{{ category.url }}">{{ category.label }}</a>
													</li>
												{% endfor %}
											</ul>
										</div>
									{% endif %}
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.