Framework Component Library

News Related: 3 Up 

<section class="news-related" id="news-related-2" aria-labelledby="news-related-2__title" aria-describedby="news-related-2__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-2__title">Related News</h2>
                    <div class="news-related__description" id="news-related-2__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-2__title">
                    <li class="news_related__row">
                        <article class="news-related__item" aria-labelledby="news-related-2__item-1-title">
                            <figure class="news-related__item-figure">
                                <a class="news-related__item-figure-link" href="#" aria-labelledby="news-related-2__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">
                                    <h3 class="news-related__item-title" id="news-related-2__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>
                                    </h3>
                                    <div class="news-related__item-categories">
                                        <div class="news-related__item-category-hint" id="news-related-2__item-1-category-hint">
                                            Categories
                                        </div>
                                        <ul class="news-related__item-category-list" aria-labelledby="news-related-2__item-1-title news-related-2__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-detail--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-detail--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>
                        </article>
                    </li>

                    <li class="news_related__row">
                        <article class="news-related__item" aria-labelledby="news-related-2__item-2-title">
                            <figure class="news-related__item-figure">
                                <a class="news-related__item-figure-link" href="#" aria-labelledby="news-related-2__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">
                                    <h3 class="news-related__item-title" id="news-related-2__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>
                                    </h3>
                                    <div class="news-related__item-categories">
                                        <div class="news-related__item-category-hint" id="news-related-2__item-2-category-hint">
                                            Categories
                                        </div>
                                        <ul class="news-related__item-category-list" aria-labelledby="news-related-2__item-2-title news-related-2__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-detail--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>
                        </article>
                    </li>

                    <li class="news_related__row">
                        <article class="news-related__item" aria-labelledby="news-related-2__item-3-title">
                            <div class="news-related__item-wrapper">
                                <div class="news-related__item-header">
                                    <h3 class="news-related__item-title" id="news-related-2__item-3-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">Etiam ultricies nisi vel augue</span>
                                            </span>
                                        </a>
                                    </h3>
                                </div>
                                <div class="news-related__item-body">
                                    <div class="news-related__item-details">
                                        <div class="news-related__item-detail news-related__item-detail--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>
                            </div>
                        </article>
                    </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__row">
							<article class="news-related__item" aria-labelledby="{{ item_id ~ '-title' }}">
								{% 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'
											} only %}
										</a>
									</figure>
								{% endif %}
								<div class="news-related__item-wrapper">
									<div class="news-related__item-header">
										<h3 class="news-related__item-title" id="{{ item_id ~ '-title' }}">
											{% include '@partial-link' with {
												classes: {
													base: 'news-related__item-title-link',
												},
												title: item.title,
												url: item.url
											} only %}
										</h3>
										{% 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',
																},
																title: category.title,
																url: category.url
															} only %}
														</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-detail--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-detail--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>
							</article>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- END: Related News -->

No notes defined.