Children and Screens Component Library

Event Card 

<div class="event_list_item type_default theme_default">
    <div class="event_list_item_meta event_list_item_meta_header">
        <div class="event_list_item_meta_wrapper event_list_item_meta_header_wrapper">
            <time class="event_list_item_date" datetime="">
                <span class="event_list_item_icon event_list_item_date_icon">
                    <svg class="icon icon_calendar">
                        <use href="/images/icons.svg#calendar" />
                    </svg>
                </span>
                <span class="event_list_item_meta_label event_list_item_date_label">June 16, 2023</span>
            </time>
            <span class="event_list_item_location" datetime="">
                <span class="event_list_item_icon event_list_item_location_icon">
                    <svg class="icon icon_place">
                        <use href="/images/icons.svg#place" />
                    </svg>
                </span>
                <span class="event_list_item_meta_label event_list_item_location_label">Hilton Washington DC National Mall</span>
            </span>
        </div>
    </div>

    <figure class="event_list_item_figure">

        <img class="card_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
    </figure>

    <div class="event_list_item_content">
        <div class="card_category">Ask the Experts</div>

        <h2 class="event_list_item_title">
            <a href="#" class="event_list_item_title_link">
                On Boredom: Screen Time. Free Time. and Child Development
            </a>
        </h2>

        <div class="event_list_item_meta">
            <div class="event_list_item_meta_wrapper">
                <time class="event_list_item_time" datetime="">
                    <span class="event_list_item_icon event_list_item_time_icon">
                        <svg class="icon icon_clock">
                            <use href="/images/icons.svg#clock" />
                        </svg>
                    </span>
                    <span class="event_list_item_meta_label event_list_item_time_label">8:00 PM UTC</span>
                </time>
            </div>
        </div>

        <div class="event_list_item_desc">
            <p>What are the benefits and harms of “bored time” for children and has digital media displaced the space to let minds wander?</p>
        </div>

        <div class="event_list_item_topics_wrap">
            <div class="pill_list theme_yellow">
                <div class="pill_item">

                    <div class="pill">
                        Mental Health
                    </div>
                </div>
            </div>
        </div>

        <div class="event_list_item_speakers_wrapper">

            <div class="speakers_list show_count">
                <div class="speakers_list_title">
                    Speakers
                </div>

                <div class="speakers_list_grid_items">

                    <div class="speakers_list_grid_item theme_yellow">
                        <div id="speakers_list_item-12_1_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_1_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_1_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_1_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_1_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>

                    <div class="speakers_list_grid_item theme_salmon">
                        <div id="speakers_list_item-12_2_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_2_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_2_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_2_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_2_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>

                    <div class="speakers_list_grid_item theme_light_green">
                        <div id="speakers_list_item-12_3_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_3_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_3_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Est duis proident cillum excepteur ex sint aliquip amet.</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_3_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_3_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>

                    <div class="speakers_list_grid_item theme_pink">
                        <div id="speakers_list_item-12_4_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_4_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_4_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Consequat consectetur velit tempor consequat est reprehenderit duis nostrud labore in nisi dolor cillum ad.</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_4_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_4_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/3" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>

                    <div class="speakers_list_grid_item theme_light_blue">
                        <div id="speakers_list_item-12_5_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_5_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_5_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Quis velit adipisicing esse officia ea.</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_5_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_5_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>

                    <div class="speakers_list_grid_item theme_dark_green">
                        <div id="speakers_list_item-12_6_item" class="speakers_list_item js-speaker-tooltip">
                            <div id="speakers_list_item-12_6_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                                <h4 id="speakers_list_item-12_6_title" class="speakers_list_item_title">
                                    Caley Arzamarski, PhD, NCSP
                                </h4>

                                <div class="speakers_list_item_desc">
                                    <p>Ipsum aute ullamco velit ut culpa do voluptate.</p>
                                </div>
                            </div>

                            <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-12_6_item" data-swap-group="speakers_list_item-12" aria-controls="speakers_list_item-12_6_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                                <figure class="speakers_list_item_figure">

                                    <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                                </figure>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
 
<div class="event_list_item type_{{ type }} theme_{{ theme }}">
	{% if item.date %}
		<div class="event_list_item_meta event_list_item_meta_header">
			<div class="event_list_item_meta_wrapper event_list_item_meta_header_wrapper">
				<time class="event_list_item_date" datetime="{{ date }}">
					<span class="event_list_item_icon event_list_item_date_icon">{{ icon( 'calendar' ) }}</span>
					<span class="event_list_item_meta_label event_list_item_date_label">{{ item.date|date("F j, Y") }}</span>
				</time>
				<span class="event_list_item_location" datetime="{{ date }}">
					<span class="event_list_item_icon event_list_item_location_icon">{{ icon( 'place' ) }}</span>
					<span class="event_list_item_meta_label event_list_item_location_label">Hilton Washington DC National Mall</span>
				</span>
			</div>
		</div>
	{% endif %}

	{% if item.image %}
		<figure class="event_list_item_figure">
			{% include '@partial-image' with {
				class: 'card',
				alt: '',
				image: item.image,
				loading: 'lazy',
				sources: [
					img.wide.sml,
					img.wide.xsml,
					img.wide.xxsml
				],
				sizes: [
					'(min-width: 500px) 400px',
					'50vw'
				]
			} %}
		</figure>
	{% endif %}

	<div class="event_list_item_content">
		<div class="card_category">{{ item.type }}</div>

		<h2 class="event_list_item_title">
			<a href="#" class="event_list_item_title_link">
				{{ item.title }}
			</a>
		</h2>

		{% if item.source %}
			<div class="event_list_item_source">
				{% include '@partial-link' with {
					title: item.source,
					url: item.source,
					class: class ~ '_source',
					theme:'salmon',
					js: false,
					icon: 'external',
					aria: '',
					nowrap: false
				} %}
			</div>
		{% endif %}

		{% if item.date %}
			<div class="event_list_item_meta">
				<div class="event_list_item_meta_wrapper">
					<time class="event_list_item_time" datetime="{{ date }}">
						<span class="event_list_item_icon event_list_item_time_icon">{{ icon( 'clock' ) }}</span>
						<span class="event_list_item_meta_label event_list_item_time_label">{{ item.date|date("g:i A T") }}</span>
					</time>
				</div>
			</div>
		{% endif %}

		{% if item.description %}
			<div class="event_list_item_desc">
				<p>{{ item.description }}</p>
			</div>
		{% endif %}


		<div class="event_list_item_topics_wrap">
			{% include "@partial-pill-list" with {
				items:['Mental Health'],
				theme: pill_theme,
			} %}
		</div>


		{% if item.speakers|length %}
			<div class="event_list_item_speakers_wrapper">
				{% include "@partial-speakers-list" with {
					title:'Speakers',
					items:item.speakers
				} %}
			</div>
		{% endif %}

	</div>
</div>

No notes defined.