Johns Hopkins Data Science and AI Institute Component Library

Event Feature 

<!-- Event Feature -->
<div class="event_feature_block">
    <div class="fs-row fs-lg-justify-end">
        <div class="fs-cell fs-lg-10">
            <div class="event_feature_block_inner">
                <header class="event_feature_block_head">
                    <h2 class="event_feature_block_title">Featured Event</h2>
                </header>

                <div class="event_feature">
                    <figure class="event_feature_figure">

                        <img class="event_feature_image" srcset="https://images.fastspot.com/framework/1440x617/1 1440w, https://images.fastspot.com/framework/1220x523/1 1220w, https://images.fastspot.com/framework/980x420/1 980w, https://images.fastspot.com/framework/740x317/1 740w, https://images.fastspot.com/framework/500x214/1 500w, https://images.fastspot.com/framework/300x129/1 300w" sizes="(min-width: 1478px) 1315px, (min-width: 980px) 70vw, 90vw" src="https://images.fastspot.com/framework/300x129/1" alt="" loading="lazy" width="300" height="129">
                    </figure>

                    <div class="event_feature_wrapper">
                        <div class="event_feature_wrapper_inner">
                            <div class="event_feature_header">
                                <h3 class="event_feature_title">

                                    <a href="#" class="event_feature_title_link">
                                        <span class="event_feature_title_link_inner">
                                            <span class="event_feature_title_link_label">AI-X Symposium: On challenges and opportunities for AI and Data Science in Academia</span>
                                        </span>
                                    </a>
                                </h3>

                                <div class="event_feature_time_wrapper">
                                    <time class="event_feature_time" datetime="2023-05-31 17:00:00">
                                        <span class="event_feature_time_start">May 31, 2023</span>
                                    </time>
                                </div>
                            </div>

                            <div class="event_feature_body">
                                <div class="event_feature_details">
                                    <div class="event_feature_detail">
                                        <span class="event_feature_detail_hint">Time:&nbsp;</span>
                                        <span class="event_feature_detail_label">
                                            <span class="event_feature_detail_label_date">5:00 PM - 7:00 PM</span>
                                        </span>
                                    </div>

                                    <div class="event_feature_detail">&bull;</div>

                                    <div class="event_feature_detail">
                                        <span class="event_feature_detail_hint">Location:&nbsp;</span>
                                        <span class="event_feature_detail_label">Johns Hopkins Homewood campus</span>
                                    </div>
                                </div>

                                <div class="event_feature_description">
                                    <p>At the symposium, thought leaders from industry and academia will come together to discuss strategies that can help guide the future of artificial intelligence and data science within major universities. Speakers will address the major challenges in AI and data science and discuss those areas that will have the greatest impact on scholarship, discovery, and translation.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Event Feature -->
 
{#
	{% include '@partial-event-feature' with {
		item: {
			image: '1',
			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: [
				{
					label: 'Category',
					url: '#'
				}
			]
		}
	} %}
#}
<!-- Event Feature -->
<div class="event_feature_block">
	<div class="fs-row fs-lg-justify-end">
		<div class="fs-cell fs-lg-10">
			<div class="event_feature_block_inner">
				<header class="event_feature_block_head">
					<h2 class="event_feature_block_title">Featured Event</h2>
				</header>

				<div class="event_feature">
					{% if item.image %}
						<figure class="event_feature_figure">
							{% include '@partial-image' with {
								class: 'event_feature',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.ultrawide.xlrg,
									img.ultrawide.lrg,
									img.ultrawide.med,
									img.ultrawide.sml,
									img.ultrawide.xsml,
									img.ultrawide.xxsml
								],
								sizes: [
									'(min-width: 1478px) 1315px',
									'(min-width: 980px) 70vw',
									'90vw'
								]
							} %}
						</figure>
					{% endif %}

					<div class="event_feature_wrapper">
						<div class="event_feature_wrapper_inner">
							<div class="event_feature_header">
								<h3 class="event_feature_title">
									{% include '@partial-link' with {
										class: 'event_feature_title',
										title: item.title,
										url: item.url
									} %}
								</h3>

								<div class="event_feature_time_wrapper">
									<time class="event_feature_time" datetime="{{ item.date.from }}">
										<span class="event_feature_time_start">{{ item.date.from|date('M d, Y') }}</span>
										{% if item.date.same_day == false %}
											<span class="event_feature_time_end"> - {{ item.date.to|date('M d, Y') }}</span>
										{% endif %}
									</time>
								</div>
							</div>

							<div class="event_feature_body">
								<div class="event_feature_details">
									{% if item.date.all_day == false %}
										<div class="event_feature_detail">
											<span class="event_feature_detail_hint">Time:&nbsp;</span>
											<span class="event_feature_detail_label">
												<span class="event_feature_detail_label_date">{{ item.date.from|date('g:i A') }} - {{ item.date.to|date('g:i A') }}</span>
											</span>
										</div>
									{% endif %}

									{% if item.location %}
										<div class="event_feature_detail">&bull;</div>

										<div class="event_feature_detail">
											<span class="event_feature_detail_hint">Location:&nbsp;</span>
											<span class="event_feature_detail_label">{{ item.location }}</span>
										</div>
									{% endif %}
								</div>

								{% if item.description %}
									<div class="event_feature_description">
										<p>{{ item.description }}</p>
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Event Feature -->

No notes defined.