Johns Hopkins Data Science and AI Institute Component Library

Event Card 

<div class="event_card">
    <div class="event_card_content">
        <div class="event_card_date_wrap">
            <div class="event_card_date">
                <div class="event_card_date_item">
                    <div class="event_card_date_month">May</div>
                    <div class="event_card_date_day">31</div>
                </div>

            </div>
        </div>

        <div class="event_card_body">
            <div class="event_card_title_wrap">
                <h3 class="event_card_title">

                    <a href="#" class="event_card_link">
                        <span class="event_card_link_inner">
                            <span class="event_card_link_label">AI-X Symposium: On challenges and opportunities for AI and Data Science in Academia</span>
                        </span>
                    </a>
                </h3>
            </div>

            <div class="event_card_meta_wrap">
                <div class="event_card_meta_item">
                    <time class="event_card_time" datetime="2023-05-31 17:00:00">
                        <span class="event_card_time_start">5:00 PM</span>

                    </time>
                </div>

                <div class="event_card_meta_item">
                    <span class="event_card_meta_hint">Location:&nbsp;</span>
                    <span class="event_card_meta_label">Johns Hopkins Homewood campus</span>
                </div>
            </div>

            <div class="event_card_topics_wrap">
                <ul class="event_card_topics">
                    <li>
                        <a href="#">Assurance</a><!--
								-->,
                    </li>
                    <li>
                        <a href="#">Computer Vision</a><!--
								-->,
                    </li>
                    <li>
                        <a href="#">Ethics</a><!--
								-->
                    </li>
                </ul>
            </div>
        </div>

        <div class="event_card_footer">
            <div class="event_card_footer_inner">

                <a href="#" class="event_card_cta_link">
                    <span class="event_card_cta_link_inner">
                        <span class="event_card_cta_link_label">Read More</span><span class="icon_nowrap event_card_cta_link_icon" aria-hidden="true">&#xfeff;
                            <svg class="icon icon_chevron_right">
                                <use href="/images/icons.svg#chevron_right" />
                            </svg>
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="event_card">
	<div class="event_card_content">
		<div class="event_card_date_wrap">
			<div class="event_card_date">
				<div class="event_card_date_item">
					<div class="event_card_date_month">{{ item.date.from|date("M") }}</div>
					<div class="event_card_date_day">{{ item.date.from|date("d") }}</div>
				</div>

				{% if item.date.to and not item.date.same_day %}
					<div class="event_card_date_item">
						&mdash;
					</div>

					<div class="event_card_date_item">
						<div class="event_card_date_month">{{ item.date.to|date("M") }}</div>
						<div class="event_card_date_day">{{ item.date.to|date("d") }}</div>
					</div>
				{% endif %}
			</div>
		</div>

		<div class="event_card_body">
			<div class="event_card_title_wrap">
				<h3 class="event_card_title">
					{% include '@partial-link' with {
						title: item.title,
						url: item.url,
						class: 'event_card',
						js: false,
						icon: item.external_url ? 'external' : false,
						aria: '',
						nowrap: item.external_url
					} %}
				</h3>
			</div>

			<div class="event_card_meta_wrap">
				<div class="event_card_meta_item">
					<time class="event_card_time" datetime="{{ item.date.from }}">
						{% if item.date.all_day %}
							All Day
						{% else %}
							<span class="event_card_time_start">{{ item.date.from|date('g:i A') }}</span>
							
							{% if not item.date.same_day %}
								<span class="event_card_time_end"> - {{ item.date.to|date('g:i A') }}</span>
							{% endif %}
						{% endif %}
					</time>
				</div>

				<div class="event_card_meta_item">
					<span class="event_card_meta_hint">Location:&nbsp;</span>
					<span class="event_card_meta_label">{{ item.location }}</span>
				</div>
			</div>

			{% if item.topics|length %}
				<div class="event_card_topics_wrap">
					<ul class="event_card_topics">
						{% for topic in item.topics %}
							<li>
								<a href="#">{{ topic }}</a><!--
								-->{% if not loop.last %},{% endif %}
							</li>
						{% endfor %}
					</ul>
				</div>
			{% endif %}
		</div>

		<div class="event_card_footer">
			<div class="event_card_footer_inner">
				{% include '@partial-link' with {
					title: "Read More",
					url: item.url,
					class: 'event_card_cta',
					js: false,
					icon: "chevron_right",
					aria: '',
					nowrap: true
				} %}
			</div>
		</div>
	</div>
</div>

No notes defined.