DRBU Component Library

News Featured: Orange 

<div class="news_featured theme_orange">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="news_featured_inner">
                <figure class="js-rock news_featured_item_figure">
                    <a class="news_featured_item_figure_link" href="" aria-label="Read more about Buddhism and Loneliness: How to Find Real Connection?" tabindex="-1">

                        <img class="news_featured_item_image" srcset="https://images.fastspot.com/framework/740x740/1 740w, https://images.fastspot.com/framework/500x500/1 500w, https://images.fastspot.com/framework/300x300/1 300w" src="https://images.fastspot.com/framework/300x300/1" alt="" loading="lazy" width="300" height="300">
                    </a>
                </figure>
                <div class="news_featured_item_wrapper">
                    <div class="news_featured_item_header">
                        <h2 class="news_featured_item_title">

                            <a href="#" class="news_featured_item_title_link">
                                <span class="news_featured_item_title_link_inner">
                                    <span class="news_featured_item_title_link_label">Buddhism and Loneliness: How to Find Real Connection?</span>
                                </span>
                            </a>
                        </h2>
                        <div class="news_featured_item_description">
                            <p>“A meaningful life is a life of liberation and freedom from the habits of the mind.”</p>
                        </div>
                        <div class="news_featured_item">

                            <a href="page-news-detail.html" class="news_featured_item_link">
                                <span class="news_featured_item_link_inner">
                                    <span class="news_featured_item_link_label">Read More</span>
                                    <span class="news_featured_item_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right">
                                            <use href="/images/icons.svg#arrow_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="news_featured_item_categories">
                            <div class="news_featured_item_category_hint">Categories</div>
                            <ul class="news_featured_item_category_list" aria-label="Categories">
                                <li class="news_featured_item_category">
                                    <a class="news_featured_item_category_link" href="page-news-category.html">Spiritual Life</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </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_featured theme_{{ theme }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="news_featured_inner">
				{% if image %}
					<figure class="js-rock news_featured_item_figure">
						<a class="news_featured_item_figure_link" href="{{ url }}" aria-label="Read more about {{ title }}" tabindex="-1">
							{% include '@partial-image' with {
								class: 'news_featured_item',
								alt: '',
								image: image,
								loading: 'lazy',
								sources: [
									img.square.sml,
									img.square.xsml,
									img.square.xxsml
								]
							} %}
						</a>
					</figure>
				{% endif %}
				<div class="news_featured_item_wrapper">
					<div class="news_featured_item_header">
						<h2 class="news_featured_item_title">
							{% include '@partial-link' with {
								class: 'news_featured_item_title',
								title: title,
								url: url
							} %}
						</h2>
						<div class="news_featured_item_description">
							<p>{{ description }}</p>
						</div>
						<div class="news_featured_item">
							{% include '@partial-link' with {
								class: 'news_featured_item',
								title: link.title,
								url: link.url,
								icon: link.icon
							} %}
						</div>
						{% if categories %}
							<div class="news_featured_item_categories">
								<div class="news_featured_item_category_hint">Categories</div>
								<ul class="news_featured_item_category_list" aria-label="Categories">
									{% for category in categories %}
										<li class="news_featured_item_category">
											<a class="news_featured_item_category_link" href="{{ category.url }}">{{ category.label }}</a>
										</li>
									{% endfor %}
								</ul>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Related News -->

No notes defined.