Le Moyne Component Library

News Card 

<article class="news_card">
    <figure class="news_card_figure">
        <a class="news_card_figure_link" href="#" aria-label="Read more about Etiam consequat diam in dictum." tabindex="-1">

            <img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/1 1220w, https://images.fastspot.com/le-moyne/980x654/1 980w, https://images.fastspot.com/le-moyne/740x494/1 740w, https://images.fastspot.com/le-moyne/500x334/1 500w, https://images.fastspot.com/le-moyne/300x200/1 300w" sizes="(min-width: 1400px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/1" alt="" loading="lazy" width="300" height="200">
        </a>
    </figure>
    <div class="news_card_wrapper">
        <div class="news_card_header">
            <h2 class="news_card_title">

                <a href="#" class="news_card_title_link">
                    <span class="news_card_title_link_inner">
                        <span class="news_card_title_link_label">Etiam consequat diam in dictum.</span>
                        <span class="news_card_title_link_icon" aria-hidden="true">

                            <svg class="icon icon_caret_right">
                                <use href="/images/icons.svg#caret_right" />
                            </svg>

                        </span>
                    </span>
                </a>
            </h2>
            <div class="news_card_categories">
                <div class="news_card_category_hint">Category</div>
                <p class="news_card_category_wrapper">
                    <span class="news_card_category">
                        <a class="news_card_category_link" href="#">Category</a>
                    </span>
                </p>
            </div>
        </div>
        <div class="news_card_body">
        </div>
    </div>
</article>
 
<article class="news_card">
	{% if image %}
		<figure class="news_card_figure">
			<a class="news_card_figure_link" href="{{ url }}" aria-label="Read more about {{ title }}" tabindex="-1">
				{% include '@partial-image' with {
					class: 'news_item',
					alt: '',
					image: image,
					loading: 'lazy',
					sources: [
						img.classic.lrg,
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					],
					sizes: image_sizes,
				} %}
			</a>
		</figure>
	{% endif %}
	<div class="news_card_wrapper">
		<div class="news_card_header">
			<h2 class="news_card_title">
				{% include '@partial-link' with {
					class: 'news_card_title',
					title: title,
					url: url,
					icon: is_external ? 'external' : 'caret_right',
				} %}
			</h2>
			{% if categories %}
				<div class="news_card_categories">
					<div class="news_card_category_hint">Category</div>
					<p class="news_card_category_wrapper">
						<span class="news_card_category">
							<a class="news_card_category_link" href="{{ categories[0].url }}">{{ categories[0].label }}</a>
						</span>
					</p>
				</div>
			{% endif %}
		</div>
		<div class="news_card_body">
			{% if description %}
				<div class="news_card_description">
					<p>{{ description }}</p>
				</div>
			{% endif %}
		</div>
	</div>
</article>

No notes defined.