Children and Screens Component Library

Facts & Stats 

<div class="facts_stats">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="facts_stats_inner">
                <div class="facts_stats_content">
                    <div class="facts_stats_grid">
                        <div class="facts_stats_grid_item is_left">
                            <header class="facts_stats_header">
                                <h2 class="facts_stats_title">
                                    Our Impact
                                </h2>

                                <div class="facts_stats_desc">
                                    We seek fundamental insights into how kids and families engage with digital media and how these technology-mediated interactions affect their cognitive, psychological, social, behavioral and physical development.
                                </div>

                                <div class="facts_stats_cta_wrap">

                                    <a href="#" class="button button_link theme_salmon">
                                        <span class="button_inner">
                                            <span class="button_icon">

                                                <svg class="icon icon_heart">
                                                    <use href="/images/icons.svg#heart" />
                                                </svg>

                                            </span>

                                            <span class="button_text">
                                                Donate Now
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </header>
                        </div>

                        <div class="facts_stats_grid_item is_right">
                            <div class="facts_stats_cards_grid_container">
                                <div class="facts_stats_cards_grid js-carousel" data-carousel-options='{"contained":false,"show":{"0px":1,"740px":2,"1220px":3},"maxWidth":"740px","controls":false}'>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_salmon has_bg_image">
                                            <figure class="facts_stats_item_figure">

                                                <img class="facts_stats_item_image" srcset="https://images.fastspot.com/framework/735x980/1 735w, https://images.fastspot.com/framework/555x740/1 555w, https://images.fastspot.com/framework/375x500/1 375w, https://images.fastspot.com/framework/225x300/1 225w" sizes="(min-width: 1220px) 403px, (min-width: 980px) 441px, (min-width: 740px) 690px, 90vw" src="https://images.fastspot.com/framework/225x300/1" alt="" loading="lazy" width="225" height="300">
                                            </figure>

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    $1 Million
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...in grant funding to interdisciplinary research projects since 2012.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_light_green ">

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    No. 1
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...leading interdisciplinary convenor, grant-giver, curator, and public educator in the field.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_yellow has_bg_image">
                                            <figure class="facts_stats_item_figure">

                                                <img class="facts_stats_item_image" srcset="https://images.fastspot.com/framework/735x980/2 735w, https://images.fastspot.com/framework/555x740/2 555w, https://images.fastspot.com/framework/375x500/2 375w, https://images.fastspot.com/framework/225x300/2 225w" sizes="(min-width: 1220px) 403px, (min-width: 980px) 441px, (min-width: 740px) 690px, 90vw" src="https://images.fastspot.com/framework/225x300/2" alt="" loading="lazy" width="225" height="300">
                                            </figure>

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    $2 Million
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...in grant funding to interdisciplinary research projects since 2012.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_dark_green ">

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    No. 2
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...leading interdisciplinary convenor, grant-giver, curator, and public educator in the field.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_light_blue has_bg_image">
                                            <figure class="facts_stats_item_figure">

                                                <img class="facts_stats_item_image" srcset="https://images.fastspot.com/framework/735x980/3 735w, https://images.fastspot.com/framework/555x740/3 555w, https://images.fastspot.com/framework/375x500/3 375w, https://images.fastspot.com/framework/225x300/3 225w" sizes="(min-width: 1220px) 403px, (min-width: 980px) 441px, (min-width: 740px) 690px, 90vw" src="https://images.fastspot.com/framework/225x300/3" alt="" loading="lazy" width="225" height="300">
                                            </figure>

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    $3 Million
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...in grant funding to interdisciplinary research projects since 2012.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="facts_stats_cards_grid_item">
                                        <div class="facts_stats_item theme_pink ">

                                            <div class="facts_stats_item_content">
                                                <h3 class="facts_stats_item_title">
                                                    No. 3
                                                </h3>

                                                <div class="facts_stats_item_desc">
                                                    ...leading interdisciplinary convenor, grant-giver, curator, and public educator in the field.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="facts_stats_footer">
                        <div class="facts_stats_cta_wrap">

                            <a href="#" class="button button_link theme_white">
                                <span class="button_inner">
                                    <span class="button_icon">

                                        <svg class="icon icon_heart">
                                            <use href="/images/icons.svg#heart" />
                                        </svg>

                                    </span>

                                    <span class="button_text">
                                        Donate Now
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set unique_base_class = uniqid("facts_stats") %}

{% set carousel_options_json = {
	contained: false,
	show: {
		"0px": 1,
		"740px": 2,
		"1220px": 3
	},
	maxWidth: "740px",
	controls: false
}|json_encode() %}

<div class="facts_stats">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="facts_stats_inner">
				<div class="facts_stats_content">
					<div class="facts_stats_grid">
						<div class="facts_stats_grid_item is_left">
							<header class="facts_stats_header">
								<h2 class="facts_stats_title">
									{{ title }}
								</h2>

								{% if description %}
									<div class="facts_stats_desc">
										{{ description }}
									</div>
								{% endif %}

								{% if cta %}
									<div class="facts_stats_cta_wrap">
										{% include "@partial-button-link" with cta %}
									</div>
								{% endif %}
							</header>
						</div>

						<div class="facts_stats_grid_item is_right">
							<div class="facts_stats_cards_grid_container">
								<div class="facts_stats_cards_grid js-carousel" data-carousel-options='{{ carousel_options_json }}'>
									{% for item in items %}
										{% set theme = get_theme_key(color_patterns.secondary, loop.index0) %}

										<div class="facts_stats_cards_grid_item">
											<div class="facts_stats_item theme_{{ theme }} {% if item.bg_image %}has_bg_image{% endif %}">
												{% if item.bg_image %}
													<figure class="facts_stats_item_figure">
														{% include '@partial-image' with {
															class: 'facts_stats_item',
															alt: '',
															image: item.bg_image,
															loading: 'lazy',
															sources: [
																img.portraitFull.med,
																img.portraitFull.sml,
																img.portraitFull.xsml,
																img.portraitFull.xxsml
															],
															sizes: [
																'(min-width: 1220px) 403px',
																'(min-width: 980px) 441px',
																'(min-width: 740px) 690px',
																'90vw'
															]
														} %}
													</figure>
												{% endif %}

												<div class="facts_stats_item_content">
													<h3 class="facts_stats_item_title">
														{{ item.title }}
													</h3>

													<div class="facts_stats_item_desc">
														{{ item.description }}
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
					<div class="facts_stats_footer">
						{% if cta %}
							<div class="facts_stats_cta_wrap">
								{% include "@partial-button-link" with {
									title: cta.title,
									icon: cta.icon,
									theme: 'white'
								} %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.