Dream Academy Component Library

Event Related: Default Style 

<!-- Related Events -->
<section class="event-related comp_style__default" id="event-related-2" aria-labelledby="event-related-2__title">
    <div class="event-related__inner">
        <div class="event-related__header">
            <div class="event-related__header-wrapper">
                <h2 class="event-related__title" id="event-related-2__title">Related Events</h2>
                <div class="event-related__link">

                    <a class="button-paint
 		 			button-paint--light
 				" href="#">
                        <span class="button-paint__inner"> <span class="button-paint__label">Group CTA</span>
                        </span>
                    </a>
                </div>
            </div>
            <div class="event-related__border"></div>
        </div>
        <div class="event-related__body carousel">
            <div class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"32px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":"--fw-container-gutter-px","slidesPerView":1,"enabled":true,"breakpoints":{"740":{"slidesPerView":2},"1220":{"slidesPerView":4}}}' aria-labelledby="event-related-2__title" aria-describedby="event-related-2__description">
                <div class="swiper-wrapper event-related__items">
                    <div class="swiper-slide carousel__item event-related__row" data-js-carousel-item data-js-carousel-item-title="In Enim Justo Rhoncus Ut">
                        <article class="event-related__item" aria-labelledby="event-related-2__item-1-title">
                            <a href="#" class="event-related__item-link">
                                <div class="event-related__item-wrap">
                                    <div class="event-related__item-header">
                                        <h3 class="event-related__item-title" id="event-related-2__item-1-title">
                                            In Enim Justo Rhoncus Ut
                                        </h3>
                                        <div class="event-related__item-time-wrapper">
                                            <time class="event-time" datetime="2023-05-13 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">
                                                        13
                                                    </span>
                                                </span>
                                            </time>
                                        </div>
                                    </div>
                                    <div class="event-related__item-body">
                                        <div class="event-related__item-description">
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
                                        </div>
                                        <div class="event-related__item-details">
                                            <div class="event-related__item-detail">
                                                <span class="event-related__item-detail-hint">
                                                    Time:&nbsp;
                                                </span>
                                                <span class="event-related__item-detail-label">
                                                    5:00 PM
                                                    &nbsp;&mdash; 7:00 PM
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                    </div>
                    <div class="swiper-slide carousel__item event-related__row" data-js-carousel-item data-js-carousel-item-title="Pellentesque libero tortor">
                        <article class="event-related__item" aria-labelledby="event-related-2__item-2-title">
                            <a href="#" class="event-related__item-link">
                                <div class="event-related__item-wrap">
                                    <div class="event-related__item-header">
                                        <h3 class="event-related__item-title" id="event-related-2__item-2-title">
                                            Pellentesque libero tortor
                                        </h3>
                                        <div class="event-related__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>
                                            </time>
                                        </div>
                                    </div>
                                    <div class="event-related__item-body">
                                        <div class="event-related__item-description">
                                            <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.</p>
                                        </div>
                                        <div class="event-related__item-details">
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                    </div>
                    <div class="swiper-slide carousel__item event-related__row" data-js-carousel-item data-js-carousel-item-title="Etiam porta magna">
                        <article class="event-related__item" aria-labelledby="event-related-2__item-3-title">
                            <a href="#" class="event-related__item-link">
                                <div class="event-related__item-wrap">
                                    <div class="event-related__item-header">
                                        <h3 class="event-related__item-title" id="event-related-2__item-3-title">
                                            Etiam porta magna
                                        </h3>
                                        <div class="event-related__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">
                                                        03
                                                    </span>
                                                </span>
                                            </time>
                                        </div>
                                    </div>
                                    <div class="event-related__item-body">
                                        <div class="event-related__item-description">
                                            <p>Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
                                        </div>
                                        <div class="event-related__item-details">
                                            <div class="event-related__item-detail">
                                                <span class="event-related__item-detail-hint">
                                                    Time:&nbsp;
                                                </span>
                                                <span class="event-related__item-detail-label">
                                                    5:00 PM
                                                    &nbsp;&mdash; 7:00 PM
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                    </div>
                    <div class="swiper-slide carousel__item event-related__row" data-js-carousel-item data-js-carousel-item-title="Vestibulum ante ipsum primis">
                        <article class="event-related__item" aria-labelledby="event-related-2__item-4-title">
                            <a href="#" class="event-related__item-link">
                                <div class="event-related__item-wrap">
                                    <div class="event-related__item-header">
                                        <h3 class="event-related__item-title" id="event-related-2__item-4-title">
                                            Vestibulum ante ipsum primis
                                        </h3>
                                        <div class="event-related__item-time-wrapper">
                                            <time class="event-time" datetime="2023-06-12 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">
                                                        Jun
                                                    </span>
                                                    <span class="event-time__item-day">
                                                        12
                                                    </span>
                                                </span>
                                            </time>
                                        </div>
                                    </div>
                                    <div class="event-related__item-body">
                                        <div class="event-related__item-description">
                                            <p>Phasellus gravida semper nisi. Nullam vel sem. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.</p>
                                        </div>
                                        <div class="event-related__item-details">
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                    </div>
                </div>
                <div class="swiper-controls carousel__controls">
                    <div class="fw-container">
                        <div class="carousel__controls-inner">
                            <div class="swiper-pagination carousel__progress" data-js-carousel-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END: Related Events -->
 
{#
	{% include '@component-event-related' with {
		group_title: 'Title',
		group_description: 'Description',
		items: [
			{
				image: '1',
				alt: '',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{% set id = uniqid('event-related') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}
{% set comp_style = group_style ? 'comp_style__' ~ group_style : 'comp_style__light' %}

<!-- Related Events -->
<{{ base_tag }}
	class="event-related {{ comp_style }}"
	id="{{ id }}"
	{% if group_title %}
		aria-labelledby="{{ id ~ '__title' }}"
	{% endif %}
>
	<div class="event-related__inner">
		{% if group_title %}
			<div class="event-related__header">
				<div class="event-related__header-wrapper">
				{% if group_title %}
					<{{ group_heading_tag }}
						class="event-related__title"
						id="{{ id ~ '__title' }}"
					>
						{{- group_title -}}
					</{{ group_heading_tag }}>
				{% endif %}
				{% if group_link %}
					<div class="event-related__link">
						{% include '@partial-link' with {
							classes: {
								base: 'button-paint',
								modifiers: [
									'light'
								]
							},
							title: group_link.title,
							url: group_link.url,
							icon: null
						} only %}
					</div>
				{% endif %}
				</div>
				<div class="event-related__border"></div>
			</div>
		{% endif %}
		<div class="event-related__body carousel">
			<div
				class="swiper carousel__swiper"
				data-js-carousel='{{ carousel_config|json_encode }}'
				aria-labelledby="{{ id ~ '__title' }}"
				aria-describedby="{{ id ~ '__description' }}"
			>
				<div class="swiper-wrapper event-related__items">
					{% for item in items %}
						{% set item_id = id ~ '__item-' ~ loop.index %}
						<div
							class="swiper-slide carousel__item event-related__row"
							data-js-carousel-item
							data-js-carousel-item-title="{{ item.title }}"
						>
							<article
								class="event-related__item"
								aria-labelledby="{{ item_id ~ '-title' }}"
							>
								<a href="{{ item.url }}" class="event-related__item-link">
									<div class="event-related__item-wrap">
										<div class="event-related__item-header">
											<{{ item_heading_tag }}
												class="event-related__item-title"
												id="{{ item_id ~ '-title' }}"
											>
												{{ item.title }}
											</{{ item_heading_tag }}>
											<div class="event-related__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-related__item-body">
											{% if item.description %}
												<div class="event-related__item-description">
													<p>{{ item.description }}</p>
												</div>
											{% endif %}
											<div class="event-related__item-details">
												{% if item.date.all_day == false %}
													<div class="event-related__item-detail">
														<span class="event-related__item-detail-hint">
															Time:&nbsp;
														</span>
														<span class="event-related__item-detail-label">
															{{ item.date.from|date('g:i A') }}
															{% if item.date.to %}
																&nbsp;&mdash; {{ item.date.to|date('g:i A') }}
															{% endif %}
														</span>
													</div>
												{% endif %}
											</div>
										</div>
									</div>
								</a>
							</article>
						</div>
					{% endfor %}
				</div>
				<div class="swiper-controls carousel__controls">
					<div class="fw-container">
						<div class="carousel__controls-inner">
							<div
								class="swiper-pagination carousel__progress"
								data-js-carousel-pagination
							>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</{{ base_tag }}>
<!-- END: Related Events -->

No notes defined.