Le Moyne Component Library

Event Card 

<article class="event_card">
    <figure class="event_card_figure">
        <a class="event_card_figure_link" href="page-event-detail.html" aria-label="Read more about In Enim Justo Rhoncus Ut" tabindex="-1">

            <img class="event_card_image" srcset="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="event_card_wrapper">
        <div class="event_card_header">
            <h2 class="event_card_title">

                <a href="page-event-detail.html" class="event_card_title_link">
                    <span class="event_card_title_link_inner">
                        <span class="event_card_title_link_label">In Enim Justo Rhoncus Ut</span>
                        <span class="event_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="event_card_date_wrapper">
                <div class="event_date_pill">
                    <time class="event_date_pill_inner event_date_pill_inner_same_month" datetime="2023-06-01 17:00:00">
                        <span class="event_date_pill_start">
                            <span class="event_date_pill_start_month">Jun</span>
                            <span class="event_date_pill_start_day">01</span>
                        </span>
                        <span class="event_date_pill_separator">-</span>
                        <span class="event_date_pill_end">
                            <span class="event_date_pill_end_day">13</span>
                        </span>
                    </time>
                </div>
            </div>
        </div>
        <div class="event_card_body">
            <div class="event_card_description">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
            </div>
        </div>
    </div>
</article>
 
<article class="event_card">
	{% if image %}
		<figure class="event_card_figure">
			<a class="event_card_figure_link" href="{{ url }}" aria-label="Read more about {{ title }}" tabindex="-1">
				{% include '@partial-image' with {
					class: 'event_card',
					alt: '',
					image: image,
					loading: 'lazy',
					sources: [
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					],
					sizes: image_sizes,
				} %}
			</a>
		</figure>
	{% endif %}
	<div class="event_card_wrapper">
		<div class="event_card_header">
			<h2 class="event_card_title">
				{% include '@partial-link' with {
					class: 'event_card_title',
					title: title,
					url: url,
					icon: 'caret_right',
				} %}
			</h2>

			<div class="event_card_date_wrapper">
				{% include "@partial-event-date-pill" with {
					date: date,
				} %}
			</div>
		</div>
		<div class="event_card_body">
			{% if description %}
				<div class="event_card_description">
					<p>{{ description }}</p>
				</div>
			{% endif %}
		</div>
	</div>
</article>

No notes defined.