Children and Screens Component Library

Card: Contained 

<div class="card type_contained theme_default">
    <figure class="card_figure">
        <a href="#">

            <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">
        </a>
    </figure>

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

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

        <div class="card_time_wrap">
            <time class="card_time" datetime="">
                <span class="card_time_date">June 16</span>
                <span class="card_time_time">8:00 PM UTC</span>
            </time>
        </div>

        <div class="card_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="card_topics_wrap">
            <div class="pill_list theme_yellow">
                <div class="pill_item">

                    <div class="pill">
                        Mental & Behavioral Health
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="card type_{{ type }} theme_{{ theme }}">
	{% if item.image %}
		<figure class="card_figure">
			<a href="#">
				{% 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'
					]
				} %}
			</a>
		</figure>
	{% endif %}

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

		<h3 class="card_title">
			<a href="#" class="card_title_link">
				{{ item.title }}
			</a>
		</h3>
		
		{% if item.date %}
			<div class="card_time_wrap">
				<time class="card_time" datetime="{{ date }}">
					<span class="card_time_date">{{ item.date|date("F j") }}</span>
					<span class="card_time_time">{{ item.date|date("g:i A T") }}</span>
				</time>
			</div>
		{% endif %}

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

		{% if item.topics|length %}
			<div class="card_topics_wrap">
				{% include "@partial-pill-list" with {
					items: item.topics,
					theme: pill_theme,
				} %}
			</div>
		{% endif %}
	</div>
</div>

No notes defined.