Hilbert Component Library

News Feature 

<div class="news_feature">
    <div class="news_feature_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="news_feature_items" aria-label="">
                    <li class="news_feature_item is_primary">
                        <a class="news_feature_item_figure_link" href="page-news-detail.html" aria-label="Read more about In Enim Justo Rhoncus Ut Lorem" tabindex="-1">
                            <figure class="news_feature_item_figure">

                                <img class="news_feature_item_image" srcset="https://images.fastspot.com/hilbert/300x225/1 300w, https://images.fastspot.com/hilbert/500x375/1 500w, https://images.fastspot.com/hilbert/740x555/1 740w, https://images.fastspot.com/hilbert/980x735/1 980w" src="https://images.fastspot.com/hilbert/980x735/1" alt="" loading="eager" width="980" height="735">
                            </figure>
                        </a>

                        <div class="news_feature_item_wrapper">
                            <div class="news_feature_item_header">
                                <h2 class="news_feature_item_title">

                                    <a href="page-news-detail.html" class="news_feature_item_title_link">
                                        <span class="news_feature_item_title_link_inner">
                                            <span class="news_feature_item_title_link_label">In Enim Justo Rhoncus Ut Lorem</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="news_feature_item_body">
                                <time class="news_feature_item_date" datetime="2024-07-08">
                                    July 08, 2024
                                </time>
                            </div>
                        </div>
                    </li>
                    <li class="news_feature_item is_secondary">

                        <div class="news_feature_item_wrapper">
                            <div class="news_feature_item_header">
                                <h2 class="news_feature_item_title">

                                    <a href="page-news-detail.html" class="news_feature_item_title_link">
                                        <span class="news_feature_item_title_link_inner">
                                            <span class="news_feature_item_title_link_label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="news_feature_item_body">
                                <time class="news_feature_item_date" datetime="2024-07-10">
                                    July 10, 2024
                                </time>
                            </div>
                        </div>
                    </li>
                    <li class="news_feature_item is_secondary">

                        <div class="news_feature_item_wrapper">
                            <div class="news_feature_item_header">
                                <h2 class="news_feature_item_title">

                                    <a href="page-news-detail.html" class="news_feature_item_title_link">
                                        <span class="news_feature_item_title_link_inner">
                                            <span class="news_feature_item_title_link_label">Etiam ultricies nisi vel augue</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="news_feature_item_body">
                                <time class="news_feature_item_date" datetime="2024-07-15">
                                    July 15, 2024
                                </time>
                            </div>
                        </div>
                    </li>
                    <li class="news_feature_item is_secondary">

                        <div class="news_feature_item_wrapper">
                            <div class="news_feature_item_header">
                                <h2 class="news_feature_item_title">

                                    <a href="page-news-detail.html" class="news_feature_item_title_link">
                                        <span class="news_feature_item_title_link_inner">
                                            <span class="news_feature_item_title_link_label">In Enim Justo Rhoncus Ut Lorem</span>
                                        </span>
                                    </a>
                                </h2>
                            </div>

                            <div class="news_feature_item_body">
                                <time class="news_feature_item_date" datetime="2024-07-30">
                                    July 30, 2024
                                </time>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
<div class="news_feature">
	<div class="news_feature_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="news_feature_items" aria-label="{{ title }}">
					{% for item in items %}
						<li class="news_feature_item {% if loop.first %}is_primary{% else %}is_secondary{% endif %}">
							{% if loop.first and item.image %}
								<a class="news_feature_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
									<figure class="news_feature_item_figure">
										{% include '@partial-image' with {
											class: 'news_feature_item',
											alt: item.alt,
											image: item.image,
											loading: 'eager',
											crop: 'full',
											max: 'med'
										} %}
									</figure>
								</a>
							{% endif %}

							<div class="news_feature_item_wrapper">
								<div class="news_feature_item_header">
									<h2 class="news_feature_item_title">
										{% include '@partial-link' with {
											class: 'news_feature_item_title',
											title: item.title,
											url: item.url
										} %}
									</h2>
								</div>
								
								<div class="news_feature_item_body">
									<time class="news_feature_item_date" datetime="{{ item.date|date("Y-m-d") }}">
										{{ item.date|date("F d, Y") }}
									</time>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.