Paul Smith's College Component Library

Related News: White 

<!-- Related News -->
<div class="news_related component_theme_white component_spacing_margin">
    <div class="news_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_header_inner">
                    <h2 class="news_related_title">Related News</h2>
                    <div class="news_related_header_group">
                        <div class="news_related_action news_related_action_header">

                            <a href="#" class="base_link">
                                <span class="base_link_inner">
                                    <span class="base_link_label">View All News</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_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_body_inner">
                    <ul class="news_related_items" aria-label="Related News">
                        <li 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_related_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x552/1 980w, https://images.fastspot.com/paul-smiths-college/740x416/1 740w, https://images.fastspot.com/paul-smiths-college/500x282/1 500w, https://images.fastspot.com/paul-smiths-college/300x169/1 300w" sizes="(min-width: 1440px) 448px, (min-width: 1220px) 384px, (min-width: 980px) 306px, 0" src="https://images.fastspot.com/paul-smiths-college/300x169/1" alt="" loading="lazy" width="300" height="169">
                                </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 class="icon_nowrap news_related_item_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_chevron_right">
                                                        <use href="/images/icons.svg#chevron_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_description">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li 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_related_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x552/2 980w, https://images.fastspot.com/paul-smiths-college/740x416/2 740w, https://images.fastspot.com/paul-smiths-college/500x282/2 500w, https://images.fastspot.com/paul-smiths-college/300x169/2 300w" sizes="(min-width: 1440px) 448px, (min-width: 1220px) 384px, (min-width: 980px) 306px, 0" src="https://images.fastspot.com/paul-smiths-college/300x169/2" alt="" loading="lazy" width="300" height="169">
                                </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 class="icon_nowrap news_related_item_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_chevron_right">
                                                        <use href="/images/icons.svg#chevron_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_description">
                                        <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li 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 Etiam ultricies nisi vel augue" tabindex="-1">

                                    <img class="news_related_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x552/3 980w, https://images.fastspot.com/paul-smiths-college/740x416/3 740w, https://images.fastspot.com/paul-smiths-college/500x282/3 500w, https://images.fastspot.com/paul-smiths-college/300x169/3 300w" sizes="(min-width: 1440px) 448px, (min-width: 1220px) 384px, (min-width: 980px) 306px, 0" src="https://images.fastspot.com/paul-smiths-college/300x169/3" alt="" loading="lazy" width="300" height="169">
                                </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">Etiam ultricies nisi vel augue</span><span class="icon_nowrap news_related_item_title_link_icon" aria-hidden="true">&#xfeff;
                                                    <svg class="icon icon_chevron_right">
                                                        <use href="/images/icons.svg#chevron_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_description">
                                        <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="news_related_action news_related_action_footer">

                        <a href="#" class="base_link">
                            <span class="base_link_inner">
                                <span class="base_link_label">View All News</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{#
	{% include '@component-related-news' with {
		theme: 'theme',
		title: 'Title',
		description: 'Description',
		link: {
			title: 'Link Title',
			url: '#'
		},
		items: [
			{
				image: '1',
				alt: '',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{% set component_spacing = 'padding' %}
{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}

<!-- Related News -->
<div class="news_related component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="news_related_header{% if description %} has_description{% endif %}">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_header_inner">
					<h2 class="news_related_title">{{ title }}</h2>
					{% if description or link %}
						<div class="news_related_header_group">
							{% if description %}
								<div class="news_related_description">
									<p>{{ description }}</p>
								</div>
							{% endif %}
							{% if link %}
								<div class="news_related_action news_related_action_header">
									{% include '@partial-link' with {
										class: 'base',
										title: link.title,
										url: link.url,
										icon: 'chevron_right',
										nowrap: true
									} %}
								</div>
							{% endif %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="news_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_body_inner">
					<ul class="news_related_items" aria-label="{{ title }}">
						{% for item in items %}
							<li class="news_related_item">
								<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_related_item',
											alt: item.alt,
											image: item.image,
											loading: 'lazy',
											sources: [
												img.wide.med,
												img.wide.sml,
												img.wide.xsml,
												img.wide.xxsml
											],
											sizes: [
												"(min-width: 1440px) 448px",
												"(min-width: 1220px) 384px",
												"(min-width: 980px) 306px",
												"0"
											]
										} %}
									</a>
								</figure>
								<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,
												icon: 'chevron_right',
												nowrap: true
											} %}
										</h2>
									</div>
									<div class="news_related_item_body">
										<div class="news_related_item_description">
											<p>{{ item.description }}</p>
										</div>
									</div>
								</div>
							</li>
						{% endfor %}
					</ul>
					{% if link %}
						<div class="news_related_action news_related_action_footer">
							{% include '@partial-link' with {
								class: 'base',
								title: link.title,
								url: link.url,
								icon: 'chevron_right',
								nowrap: true
							} %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.