Children and Screens Component Library

News Card: Contained 

<div class="news_list_item type_contained theme_default">
    <figure class="news_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="news_list_item_content">
        <div class="news_list_item_category">Ask the Experts</div>

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

        <div class="news_list_item_time_wrap">
            <time class="news_list_item_time" datetime="">
                <span class="news_list_item_time_date">June 16, 2023</span>
                <span class="news_list_item_time_time">8:00 PM UTC</span>
            </time>
        </div>

        <div class="news_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="news_list_item_footer">
        <div class="news_list_item_topics_wrap">
            <div class="news_list_item_topic_wrap">
                <div class="news_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="news_list_item type_{{ type }} theme_{{ theme }}">
	{% if item.image %}
		<figure class="news_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="news_list_item_content">
		<div class="news_list_item_category">{{ item.type }}</div>

		<h2 class="news_list_item_title">
			<a href="#" class="news_list_item_title_link">
				{{ item.title }}
			</a>
		</h2>
		
		{% if item.source %}
			<div class="news_list_item_source">
				{% include '@partial-link' with {
					title: item.source,
					url: item.source,
					class: 'news_list_item_source',
					theme:'salmon',
					js: false,
					icon: 'external',
					aria: '',
					nowrap: false
				} %}
			</div>
		{% endif %}
		
		{% if item.date %}
			<div class="news_list_item_time_wrap">
				<time class="news_list_item_time" datetime="{{ date }}">
					<span class="news_list_item_time_date">{{ item.date|date("F d, Y") }}</span>
					<span class="news_list_item_time_time">{{ item.date|date("g:i A T") }}</span>
				</time>
			</div>
		{% endif %}

		{% if item.description %}
			<div class="news_list_item_desc">
				<p>{{ item.description }}</p>
			</div>
		{% endif %}
	</div>
	
	{% if item.topics|length or item.ages|length %}
		<div class="news_list_item_footer">
			<div class="news_list_item_topics_wrap">
				{% if item.topics|length %}
					{% set pill_theme = 'yellow' %}
					<div class="news_list_item_topic_wrap">
						<div class="news_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="news_list_item_topic_wrap">
						<div class="news_list_item_topic_heading">Ages</div>
						{% include "@partial-pill-list" with {
							items: item.ages,
							theme: pill_theme,
						} %}
					</div>
				{% endif %}
			</div>
		</div>
	{% endif %}
</div>

No notes defined.