Children and Screens Component Library

Research Card: Contained 

<div class="research_list_item type_contained theme_default">
    <figure class="research_list_item_figure research_research_list_item_figure">

        <img class="research_list_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="research_list_item_content">
        <div class="research_list_item_category">Ask the Experts</div>

        <h3 class="research_list_item_title">
            <a href="#" class="research_list_item_title_link">
                On Boredom: Screen Time. Free Time. and Child Development
            </a>
        </h3>

        <div class="research_list_item_source">

            <a href="npr.com" class="research_list_item_source_link theme_salmon">
                <span class="research_list_item_source_link_inner">
                    <span class="research_list_item_source_link_label">npr.com</span>
                    <span class="research_list_item_source_link_icon" aria-hidden="true">

                        <svg class="icon icon_external">
                            <use href="/images/icons.svg#external" />
                        </svg>

                    </span>
                </span>
            </a>
        </div>

        <div class="research_list_item_time_wrap">
            <time class="research_list_item_time" datetime="">
                <span class="research_list_item_time_date">June 16, 2023</span>
                <span class="research_list_item_time_time">8:00 PM UTC</span>
            </time>
        </div>

        <div class="research_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>

    <div class="research_list_item_footer">

        <div class="research_list_item_topics_wrap">
            <div class="research_list_item_topic_wrap">
                <div class="research_list_item_topic_heading">Topics</div>
                <div class="pill_list theme_yellow">
                    <div class="pill_item">

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

    </div>
</div>
 
<div class="research_list_item type_{{ type }} theme_{{ theme }}">
	{% if item.image %}
		<figure class="research_list_item_figure {{ class }}_research_list_item_figure">
			{% include '@partial-image' with {
				class: 'research_list',
				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="research_list_item_content">
		<div class="research_list_item_category">{{ item.type }}</div>

		<h3 class="research_list_item_title">
			<a href="#" class="research_list_item_title_link">
				{{ item.title }}
			</a>
		</h3>
		
		{% if item.source %}
			<div class="research_list_item_source">
				{% include '@partial-link' with {
					title: item.source,
					url: item.source,
					class: 'research_list_item_source',
					theme:'salmon',
					js: false,
					icon: 'external',
					aria: '',
					nowrap: false
				} %}
			</div>
		{% endif %}
		
		{% if item.date %}
			<div class="research_list_item_time_wrap">
				<time class="research_list_item_time" datetime="{{ date }}">
					<span class="research_list_item_time_date">{{ item.date|date("F d, Y") }}</span>
					<span class="research_list_item_time_time">{{ item.date|date("g:i A T") }}</span>
				</time>
			</div>
		{% endif %}

		{% if item.description %}
			<div class="research_list_item_desc">
				<p>{{ item.description }}</p>
			</div>
		{% endif %}
	</div>
	
	<div class="research_list_item_footer">
		
			<div class="research_list_item_topics_wrap">
				{% if item.topics|length %}
					{% set pill_theme = 'yellow' %}
					<div class="research_list_item_topic_wrap">
						<div class="research_list_item_topic_heading">Topics</div>
						{% include "@partial-pill-list" with {
							items: item.topics,
							theme: pill_theme,
						} %}
					</div>
				{% endif %}
				{% if item.ages|length %}
					{% set pill_theme = 'salmon' %}
					<div class="research_list_item_topic_wrap">
						<div class="research_list_item_topic_heading">Ages</div>
						{% include "@partial-pill-list" with {
							items: item.ages,
							theme: pill_theme,
						} %}
					</div>
				{% endif %}
			</div>
		
	</div>
</div>

No notes defined.