Framework Component Library

Event Feature 

<!-- Event Feature -->
<section class="event_feature" id="event_feature_1" aria-labelledby="event_feature_1_item_title" aria-describedby="event_feature_1_item_description">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event_feature_inner">
                <div class="event_feature_item">
                    <figure class="event_feature_item_figure">
                        <a class="event_feature_item_figure_link" href="#" aria-labelledby="event_feature_1_item_title" tabindex="-1">

                            <img class="event_feature_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="event_feature_item_wrapper">
                        <div class="event_feature_item_header">
                            <h2 class="event_feature_item_title" id="event_feature_1_item_title">

                                <a class="
		event_feature_item_title_link
				
	" href="#">
                                    <span class="event_feature_item_title_link_inner">
                                        <span class="event_feature_item_title_link_label">
                                            Featured Event
                                        </span>
                                    </span>
                                </a>
                            </h2>
                            <div class="event_feature_item_time_wrapper">
                                <time class="event_feature_item_time" datetime="2023-05-31 17:00:00">
                                    May 31
                                    &nbsp;- Jun 02
                                </time>
                            </div>
                        </div>
                        <div class="event_feature_item_body">
                            <div class="event_feature_item_description" id="event_feature_1_item_description">
                                <p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            </div>
                            <div class="event_feature_item_details">
                                <div class="event_feature_item_detail">
                                    <span class="event_feature_item_detail_icon" aria-hidden="true">
                                        <svg class="icon icon_clock">
                                            <use href="/images/icons.svg#clock" />
                                        </svg>
                                    </span>
                                    <span class="event_feature_item_detail_hint">
                                        Time:&nbsp;
                                    </span>
                                    <span class="event_feature_item_detail_label">
                                        5:00 PM - 7:00 PM
                                    </span>
                                </div>
                                <div class="event_feature_item_detail">
                                    <span class="event_feature_item_detail_icon" aria-hidden="true">
                                        <svg class="icon icon_place">
                                            <use href="/images/icons.svg#place" />
                                        </svg>
                                    </span>
                                    <span class="event_feature_item_detail_hint">
                                        Location:&nbsp;
                                    </span>
                                    <span class="event_feature_item_detail_label">
                                        Maecenas tempus
                                    </span>
                                </div>
                                <div class="event_feature_item_detail event_feature_item_detail_category">
                                    <span class="event_feature_item_detail_icon" aria-hidden="true">
                                        <svg class="icon icon_label">
                                            <use href="/images/icons.svg#label" />
                                        </svg>
                                    </span>
                                    <span class="event_feature_item_detail_hint" id="event_feature_1_item_detail_hint_category">
                                        Categories:&nbsp;
                                    </span>
                                    <ul class="event_feature_item_detail_list" aria-labelledby="event_feature_1_item_detail_hint_category">
                                        <li class="event_feature_item_detail_item">

                                            <a class="
		button_text
				
	" href="#">
                                                <span class="button_text_inner">
                                                    <span class="button_text_label">
                                                        Nunc nonummy metus
                                                    </span>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="event_feature_item_detail_item">

                                            <a class="
		button_text
				
	" href="#">
                                                <span class="button_text_inner">
                                                    <span class="button_text_label">
                                                        Vestibulum
                                                    </span>
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END: Event Feature -->
 
{#
	{% include '@component-event-feature' with {
		item: {
			image: '1',
			alt: '',
			date: {
				same_day: true,
				all_day: false,
				from: '2023-05-31 17:00:00',
				to: '2023-05-31 19:00:00'
			},
			title: 'Title',
			url: '#',
			description: 'Description',
			location: 'Location',
			categories: [
				{
					title: 'Category',
					url: '#'
				}
			]
		}
	} %}
#}

{% set id = uniqid('event_feature') %}

<!-- Event Feature -->
<section
	class="event_feature"
	id="{{ id }}"
	aria-labelledby="{{ id }}_item_title"
	{% if item.description %}aria-describedby="{{ id }}_item_description"{% endif %}
>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event_feature_inner">
				<div class="event_feature_item">
					{% if item.image %}
						<figure class="event_feature_item_figure">
							<a
								class="event_feature_item_figure_link"
								href="{{ item.url }}"
								aria-labelledby="{{ id }}_item_title"
								tabindex="-1"
							>
								{% include '@partial-image' with {
									class: 'event_feature_item_image',
									alt: item.alt,
									image: item.image,
									loading: 'lazy',
									crop: 'classic',
									max: 'med'
								} %}
							</a>
						</figure>
					{% endif %}
					<div class="event_feature_item_wrapper">
						<div class="event_feature_item_header">
							<h2 class="event_feature_item_title" id="{{ id }}_item_title">
								{% include '@partial-link' with {
									classes: {
										base: 'event_feature_item_title_link',
									},
									id: null,
									title: item.title,
									url: item.url
								} %}
							</h2>
							<div class="event_feature_item_time_wrapper">
								<time class="event_feature_item_time" datetime="{{ item.date.from }}">
									{{ item.date.from|date('M d') }}
									{% if item.date.same_day == false %}
										&nbsp;- {{ item.date.to|date('M d') }}
									{% endif %}
								</time>
							</div>
						</div>
						<div class="event_feature_item_body">
							{% if item.description %}
								<div class="event_feature_item_description" id="{{ id }}_item_description">
									<p>{{ item.description }}</p>
								</div>
							{% endif %}
							<div class="event_feature_item_details">
								{% if item.date.all_day == false %}
									<div class="event_feature_item_detail">
										<span class="event_feature_item_detail_icon" aria-hidden="true">
											{{ icon('clock') }}
										</span>
										<span class="event_feature_item_detail_hint">
											Time:&nbsp;
										</span>
										<span class="event_feature_item_detail_label">
											{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}
										</span>
									</div>
								{% endif %}
								{% if item.location %}
									<div class="event_feature_item_detail">
										<span class="event_feature_item_detail_icon" aria-hidden="true">
											{{ icon('place') }}
										</span>
										<span class="event_feature_item_detail_hint">
											Location:&nbsp;
										</span>
										<span class="event_feature_item_detail_label">
											{{ item.location }}
										</span>
									</div>
								{% endif %}
								{% if item.categories %}
									<div class="event_feature_item_detail event_feature_item_detail_category">
										<span class="event_feature_item_detail_icon" aria-hidden="true">
											{{ icon('label') }}
										</span>
										<span
											class="event_feature_item_detail_hint"
											id="{{ id }}_item_detail_hint_category"
										>
											Categories:&nbsp;
										</span>
										<ul
											class="event_feature_item_detail_list"
											aria-labelledby="{{ id }}_item_detail_hint_category"
										>
											{% for category in item.categories %}
												<li class="event_feature_item_detail_item">
													{% include '@partial-link' with {
														classes: {
															base: 'button_text'
														},
														id: null,
														title: category.title,
														url: category.url
													} %}
												</li>
											{% endfor %}
										</ul>
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END: Event Feature -->

No notes defined.