Children and Screens Component Library

Visual Call To Action 

<div class="visual_cta theme_yellow">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell fs-lg-10">
            <div class="visual_cta_inner">
                <div class="visual_cta_grid fs-row fs-lg-align-center fs-cell-padded">
                    <div class="visual_cta_grid_item fs-cell fs-md-6 fs-lg-6">
                        <div class="visual_cta_body">

                            <h2 class="visual_cta_title">
                                Who We Are
                            </h2>

                            <div class="visual_cta_desc typography">
                                <p>Children and Screens is the nation’s leading non-profit organization dedicated to advancing and supporting interdisciplinary scientific research, informing and educating the public, advocating for sound public policy for child health and wellness, and enhancing human capital in the field.</p>
                            </div>

                            <div class="visual_cta_links">
                                <div class="visual_cta_link_wrap">

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

                                                <svg class="icon icon_arrow_right_long">
                                                    <use href="/images/icons.svg#arrow_right_long" />
                                                </svg>

                                            </span>

                                            <span class="button_text">
                                                Learn About Us
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="visual_cta_grid_item fs-cell fs-md-6 fs-lg-6">
                        <figure class="visual_cta_figure">

                            <img class="visual_cta_image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" sizes="(min-width: 1220px) 549px, (min-width: 980px) 439px, (min-width: 740px) 689px, 90vw" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{# 
	{% include "@partial-visual-call-to-action" with {
		image: '1',
		title: 'Who We Are',
		description:
			'Children and Screens is the nation’s leading non-profit organization dedicated to advancing and supporting interdisciplinary scientific research, informing and educating the public, advocating for sound public policy for child health and wellness, and enhancing human capital in the field.',
		links: [
			{
				title: 'Learn About Us',
				href: '#',
				aria_label:'Aria Label',
				icon:''
			}
		],
		theme:'yellow'
	} %}
#}
<div class="visual_cta theme_{{ theme }}">
	<div class="fs-row fs-lg-justify-center">
		<div class="fs-cell fs-lg-10">
			<div class="visual_cta_inner">
				<div class="visual_cta_grid fs-row fs-lg-align-center fs-cell-padded">
					<div class="visual_cta_grid_item fs-cell fs-md-6 fs-lg-6">
						<div class="visual_cta_body">

							<h2 class="visual_cta_title">
								{{ title }}
							</h2>

							{% if description %}
								<div class="visual_cta_desc typography">
									<p>{{ description }}</p>
								</div>
							{% endif %}

							{% if links|length %}
								<div class="visual_cta_links">
									{% for link in links %}
										<div class="visual_cta_link_wrap">
											{% include '@partial-button-link' with {
												class: '',
												title: link.title,
												url: link.url,
												aria_label:link.aria_label,
												icon: 'arrow_right_long',
												theme:''
											} %}
										</div>
									{% endfor %}
								</div>
							{% endif %}
						</div>
					</div>
					<div class="visual_cta_grid_item fs-cell fs-md-6 fs-lg-6">
						<figure class="visual_cta_figure">
							{% include "@partial-image" with {
								class: "visual_cta",
								alt: "",
								image: image,
								loading: "lazy",
								sources: [
									img.classic.med,
									img.classic.sml,
									img.classic.xsml,
									img.classic.xxsml
								],
								sizes: [
									"(min-width: 1220px) 549px",
									"(min-width: 980px) 439px",
									"(min-width: 740px) 689px",
									"90vw"
								]
							} %}
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.