Dream Academy Component Library

Event Feature 

<!-- Event Feature -->
<article class="event-feature" id="event-feature-1" aria-labelledby="event-feature-1__item-title" aria-describedby="event-feature-1__item-description">
    <div class="fw-container">
        <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/1220x814/1 1220w, 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" sizes="(min-width: 1620px) 658px, (min-width: 980px) calc(38.23vw + 46px), (min-width: 740px) 37.73vw, (min-width: 380px) calc(96.47vw - 27px), calc(66.67vw + 80px)" 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-time" datetime="2023-05-31 17:00:00">
                            <span class="event-time__item">
                                <span class="event-time__item-icon" aria-hidden="true">
                                    <svg class="icon icon--date-page">
                                        <use href="/images/icons.svg?1.0.0#date-page" />
                                    </svg>
                                </span>
                                <span class="event-time__item-month">
                                    May
                                </span>
                                <span class="event-time__item-day">
                                    31
                                </span>
                            </span>
                            <span class="event-time__divider"></span>
                            <span class="event-time__item">
                                <span class="event-time__item-icon" aria-hidden="true">
                                    <svg class="icon icon--date-page">
                                        <use href="/images/icons.svg?1.0.0#date-page" />
                                    </svg>
                                </span>
                                <span class="event-time__item-month">
                                    Jun
                                </span>
                                <span class="event-time__item-day">
                                    02
                                </span>
                            </span>
                        </time>
                    </div>
                </div>
                <div class="event-feature__item-body">
                    <div class="event-feature__item-detail event-feature__item-detail--category">
                        <div class="categories">
                            <div class="categories__title" id="event-feature-1__item-detail-hint-category">
                                Categories:
                            </div>
                        </div>
                        <ul class="categories__list" aria-labelledby="event-feature-1__item-detail-hint-category">
                            <li class="categories__item">

                                <a class="category-link
 				" href="#">
                                    <span class="category-link__inner"> <span class="category-link__label">Nunc nonummy metus</span>
                                    </span>
                                </a>
                            </li>
                            <li class="categories__item">

                                <a class="category-link
 				" href="#">
                                    <span class="category-link__inner"> <span class="category-link__label">Vestibulum</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <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-detail">
                            <div class="event-detail__title">
                                When
                            </div>
                            <div class="event-detail__label">
                                5:00 PM
                                &nbsp;&mdash; 7:00 PM
                            </div>
                        </div>
                        <div class="event-detail">
                            <div class="event-detail__title">
                                Where
                            </div>
                            <div class="event-detail__label">Maecenas tempus</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="event-feature__border"></div>
</article>
<!-- 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') %}
{% set heading_level = heading_level ?? 2 %}
{% set heading_tag = 'h' ~ (heading_level) %}

<!-- Event Feature -->
<article
	class="event-feature"
	id="{{ id }}"
	aria-labelledby="{{ id ~ '__item-title' }}"
	{% if item.description %}
		aria-describedby="{{ id ~ '__item-description' }}"
	{% endif %}
>
	<div class="fw-container">
		<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: 'lrg',
							sizes: [
								'(min-width: 1620px) 658px',
								'(min-width: 980px) calc(38.23vw + 46px)',
								'(min-width: 740px) 37.73vw',
								'(min-width: 380px) calc(96.47vw - 27px)',
								'calc(66.67vw + 80px)'
							]
						} only %}
					</a>
				</figure>
			{% endif %}
			<div class="event-feature__item-wrapper">
				<div class="event-feature__item-header">
					<{{ heading_tag }}
						class="event-feature__item-title"
						id="{{ id ~ '__item-title' }}"
					>
						{% include '@partial-link' with {
							classes: {
								base: 'event-feature__item-title-link',
							},
							title: item.title,
							url: item.url
						} only %}
					</{{ heading_tag }}>
					<div class="event-feature__item-time-wrapper">
						<time class="event-time" datetime="{{ item.date.from }}">
							<span class="event-time__item">
								<span class="event-time__item-icon" aria-hidden="true">
									{{ icon('date-page') }}
								</span>
								<span class="event-time__item-month">
									{{ item.date.from|date('M') }}
								</span>
								<span class="event-time__item-day">
									{{ item.date.from|date('d') }}
								</span>
							</span>
							{% if item.date.same_day == false %}
								<span class="event-time__divider"></span>
								<span class="event-time__item">
									<span class="event-time__item-icon" aria-hidden="true">
										{{ icon('date-page') }}
									</span>
									<span class="event-time__item-month">
										{{ item.date.to|date('M') }}
									</span>
									<span class="event-time__item-day">
										{{ item.date.to|date('d') }}
									</span>
								</span>
							{% endif %}
						</time>
					</div>
				</div>
				<div class="event-feature__item-body">
					{% if item.categories %}
						<div class="event-feature__item-detail event-feature__item-detail--category">
							<div class="categories">
								<div
									class="categories__title"
									id="{{ id ~ '__item-detail-hint-category' }}"
								>
									Categories:
								</div>
							</div>
							<ul
								class="categories__list"
								aria-labelledby="{{ id ~ '__item-detail-hint-category' }}"
							>
								{% for category in item.categories %}
									<li class="categories__item">
										{% include '@partial-link' with {
											classes: {
												base: 'category-link'
											},
											title: category.title,
											url: category.url
										} only %}
									</li>
								{% endfor %}
							</ul>
						</div>
					{% endif %}
					{% 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-detail">
								<div class="event-detail__title">
									When
								</div>
								<div class="event-detail__label">
									{{ item.date.from|date('g:i A') }}
									{% if item.date.to %}
										&nbsp;&mdash; {{ item.date.to|date('g:i A') }}
									{% endif %}
								</div>
							</div>
						{% endif %}
						{% if item.location %}
							<div class="event-detail">
								<div class="event-detail__title">
									Where
								</div>
								<div class="event-detail__label">
									{{- item.location -}}
								</div>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="event-feature__border"></div>
</article>
<!-- END: Event Feature -->

No notes defined.