Children and Screens Component Library

Research Feature 

<div class="research_feature type_default theme_light">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell">
            <div class="research_feature_wrapper">
                <div class="card research_feature_card type_default theme_light">
                    <figure class="card_figure research_feature_card_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="card_content research_feature_card_content">
                        <div class="card_category research_feature_card_category">Ask the Experts</div>

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

                        <div class="card_desc research_feature_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 research_feature_card_topics_wrap">
                            <div class="pill_list theme_">
                                <div class="pill_item">

                                    <div class="pill">
                                        Mental & Behavioral Health
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="research_feature type_{{ type }} theme_{{ theme }}">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell">
            <div class="research_feature_wrapper">
                <div class="card {{ class }}_card type_{{ type }} theme_{{ theme }}">
                    {% if item.image %}
                        <figure class="card_figure {{ class }}_card_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="card_content {{ class }}_card_content">
                        <div class="card_category {{ class }}_card_category">{{ item.type }}</div>

                        <h3 class="card_title {{ class }}_card_title">
                            <a href="#" class="card_title_link {{ class }}_card_title_link">
                                {{ item.title }}
                            </a>
                        </h3>

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

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

No notes defined.