Paul Smith's 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">
                    <h2 class="news_related_title">Related News</h2>
                    <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>
        </div>
    </div>
    <div class="news_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <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_item_image" srcset="https://images.fastspot.com/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" src="https://images.fastspot.com/generic/300x200/1" 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_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 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_item_image" srcset="https://images.fastspot.com/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" src="https://images.fastspot.com/generic/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_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 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>
                </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">
				<div class="fs-cell">
					<div class="news_related_header_inner">
						{% if title %}
							<h2 class="news_related_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="news_related_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</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 %}
								<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.med,
												img.classic.sml,
												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.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 class="news_related_item_body">
									{% if item.date or item.author %}
										{% render '@partial-news-details' with {
											item: item
										} %}
									{% endif %}
									{% if item.description %}
										<div class="news_related_item_description">
											<p>{{ item.description }}</p>
										</div>
									{% endif %}
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.