Framework Component Library

News Related: Two Up 

<section class="news_related" id="news_related_3" aria-labelledby="news_related_3_title" aria-describedby="news_related_3_description">
    <div class="news_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_header_inner">
                    <h2 class="news_related_title" id="news_related_3_title">
                        Related News
                    </h2>
                    <div class="news_related_description" id="news_related_3_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-labelledby="news_related_3_title">

                    <li class="news_related_item">
                        <figure class="news_related_item_figure">
                            <a class="news_related_item_figure_link" href="#" aria-labelledby="news_related_3_item_1_title" tabindex="-1">

                                <img class="news_related_item_image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/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" id="news_related_3_item_1_title">

                                    <a class="
		news_related_item_title_link
				
	" href="#">
                                        <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" id="news_related_3_item_1_category_hint">
                                        Categories
                                    </div>
                                    <ul class="news_related_item_category_list" aria-labelledby="news_related_3_item_1_title news_related_3_item_1_category_hint">
                                        <li class="news_related_item_category">

                                            <a class="
		button_text
				
	" href="#">
                                                <span class="button_text_inner">
                                                    <span class="button_text_label">
                                                        Aenean leo ligula
                                                    </span>
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="news_related_item_body">
                                <div class="news_related_item_details">
                                    <div class="news_related_item_detail news_related_item_date">
                                        <span class="news_related_item_detail_hint">
                                            Published:&nbsp;
                                        </span>
                                        <time class="news_related_item_detail_label" datetime="2019-01-01 17:00:00">
                                            January 1, 2019
                                        </time>
                                    </div>
                                    <div class="news_related_item_detail news_related_item_author">
                                        <span class="news_related_item_detail_hint">
                                            - by&nbsp;
                                        </span>
                                        <span class="news_related_item_detail_label">
                                            Sed Consequat
                                        </span>
                                    </div>
                                </div>
                                <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="#" aria-labelledby="news_related_3_item_2_title" tabindex="-1">

                                <img class="news_related_item_image" srcset="https://images.fastspot.com/framework/980x654/2 980w, https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/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" id="news_related_3_item_2_title">

                                    <a class="
		news_related_item_title_link
				
	" href="#">
                                        <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" id="news_related_3_item_2_category_hint">
                                        Categories
                                    </div>
                                    <ul class="news_related_item_category_list" aria-labelledby="news_related_3_item_2_title news_related_3_item_2_category_hint">
                                        <li class="news_related_item_category">

                                            <a class="
		button_text
				
	" href="#">
                                                <span class="button_text_inner">
                                                    <span class="button_text_label">
                                                        Consectetuer
                                                    </span>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="news_related_item_category">

                                            <a class="
		button_text
				
	" href="#">
                                                <span class="button_text_inner">
                                                    <span class="button_text_label">
                                                        Nonummy id
                                                    </span>
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="news_related_item_body">
                                <div class="news_related_item_details">
                                    <div class="news_related_item_detail news_related_item_date">
                                        <span class="news_related_item_detail_hint">
                                            Published:&nbsp;
                                        </span>
                                        <time class="news_related_item_detail_label" datetime="2019-01-01 17:00:00">
                                            January 1, 2019
                                        </time>
                                    </div>
                                </div>
                                <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>
</section>
<!-- END: Related News -->
 
{#
	{% include '@component-news-related' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				alt: '',
				title: 'Item Title',
				date: '2019-01-01 17:00:00',
				author: 'Author',
				description: 'Item Description'
			}
		]
	} %}
#}

{% set id = uniqid('news_related') %}

<section
	class="news_related"
	id="{{ id }}"
	aria-labelledby="{{ id }}_title"
	{% if description %}aria-describedby="{{ id }}_description"{% endif %}
>
	<div class="news_related_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_header_inner">
					<h2 class="news_related_title" id="{{ id }}_title">
						{{ title }}
					</h2>
					{% if description %}
						<div class="news_related_description" id="{{ id }}_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="news_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="news_related_items" aria-labelledby="{{ id }}_title">
					{% for item in items %}
						{% set item_id = id ~ '_item_' ~ loop.index %}

						<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-labelledby="{{ item_id }}_title"
										tabindex="-1"
									>
										{% include '@partial-image' with {
											class: 'news_related_item_image',
											image: item.image,
											alt: item.alt,
											loading: 'lazy',
											crop: 'classic',
											max: 'med'
										} %}
									</a>
								</figure>
							{% endif %}
							<div class="news_related_item_wrapper">
								<div class="news_related_item_header">
									<h2 class="news_related_item_title" id="{{ item_id }}_title">
										{% include '@partial-link' with {
											classes: {
												base: 'news_related_item_title_link',
											},
											id: null,
											title: item.title,
											url: item.url
										} %}
									</h2>
									{% if item.categories %}
										<div class="news_related_item_categories">
											<div
												class="news_related_item_category_hint"
												id="{{ item_id }}_category_hint"
											>
												Categories
											</div>
											<ul
												class="news_related_item_category_list"
												aria-labelledby="{{ item_id }}_title {{ item_id }}_category_hint"
											>
												{% for category in item.categories %}
													<li class="news_related_item_category">
														{% include '@partial-link' with {
															classes: {
																base: 'button_text',
															},
															id: null,
															title: category.title,
															url: category.url
														} %}
													</li>
												{% endfor %}
											</ul>
										</div>
									{% endif %}
								</div>
								<div class="news_related_item_body">
									<div class="news_related_item_details">
										<div class="news_related_item_detail news_related_item_date">
											<span class="news_related_item_detail_hint">
												Published:&nbsp;
											</span>
											<time class="news_related_item_detail_label" datetime="{{ item.date }}">
												{{ item.date|date('F j, Y') }}
											</time>
										</div>
										{% if item.author %}
											<div class="news_related_item_detail news_related_item_author">
												<span class="news_related_item_detail_hint">
													- by&nbsp;
												</span>
												<span class="news_related_item_detail_label">
													{{ item.author }}
												</span>
											</div>
										{% endif %}
									</div>
									{% if item.description %}
										<div class="news_related_item_description">
											<p>{{ item.description }}</p>
										</div>
									{% endif %}
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- END: Related News -->

No notes defined.