Zero Deaths Maryland Component Library

Call To Action 

<!-- Call to Action -->
<div class="cta has_image">
    <figure class="cta_figure" aria-hidden="true">
        <span class="lazy_image_wrapper cta_image_wrapper">
            <picture class="cta_picture">
                <source media="(min-width: 1220px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/1440x810/1">
                <source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/1">
                <source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x552/1">
                <source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/740x416/1">
                <img class="js-lazy js-lazyload cta_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/740x740/1" alt="">
            </picture>
        </span>
        <noscript>
            <picture class="cta_picture">
                <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/1440x810/1">
                <source media="(min-width: 980px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/1">
                <source media="(min-width: 740px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x552/1">
                <source media="(min-width: 500px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/740x416/1">
                <img class="cta_image" src="https://images.fastspot.com/mdot-zero-deaths-md/740x740/1" alt="">
            </picture>
        </noscript>
    </figure>
    <div class="cta_wrapper">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="cta_inner cta_dark_background">
                    <div class="cta_header">
                        <h2 class="cta_title">
                            <span class="cta_title_label">Be the driver</span>
                            <span class="cta_highlighted_text">
                                who saves lives
                            </span>
                        </h2>
                    </div>
                    <div class="cta_body">
                        <div class="cta_description">
                            <p>An all-encompassing highway safety campaign focused on safe driving behaviors, aptly named Be the Driver.</p>
                        </div>
                    </div>
                    <div class="cta_actions">
                        <div class="cta_footer">
                            <div class="cta_link_item">
                                <span class="cta_link_button">

                                    <a href="#" class="cta_link" aria-label="Be the driver campaign">
                                        <span class="cta_link_inner">
                                            <span class="cta_link_label">Be The Driver Campaign</span>
                                            <span class="cta_link_icon" aria-hidden="true">
                                                <span class="cta_link_icon_inner">
                                                    <span class="cta_link_icon_space">&#xfeff;</span>
                                                    <svg class="icon icon_arrow_right">
                                                        <use xlink:href="/images/icons.svg#arrow_right"></use>

                                                    </svg>
                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action -->
 
{#
{% include '@component-call-to-action' with {
			title: 'Be the driver',
			highlighted_text: 'who saves lives',
			image: 1,
			modifier: 'cta_dark_background',
			description: 'An all-encompassing highway safety campaign focused on safe driving behaviors, aptly named Be the Driver.',
			link_title: 'Be The Driver Campaign',
			link_url: '#',
			link_icon: 'arrow_right',
			aria: 'Be the driver campaign'
		} %}
#}



<!-- Call to Action -->
<div class="cta{% if image %} has_image{% endif %}">
	{% if image %}
		<figure class="cta_figure" aria-hidden="true">
			{% render "@partial-picture" with {
				class: "cta",
				alt: "",
				itemprop: "",
				image: image,
				default: img.square.sml,
				sources: {
					"1220px": img.wide.xlrg,
					"980px": img.wide.lrg,
					"740px": img.wide.med,
					"500px": img.wide.sml
				}
			} %}
		</figure>
	{% else %}
		<div class="cta_bg"></div>
	{% endif %}
	<div class="cta_wrapper">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="cta_inner {{modifier}}">
					<div class="cta_header">
						<h2 class="cta_title">
							<span class="cta_title_label">{{ title }}</span>
								{% if highlighted_text %}
									<span class="cta_highlighted_text">
										{{ highlighted_text }}
									</span>
								{% endif %}
						</h2>
						{% if label %}
							<p class="cta_label">{{ label }}</p>
						{% endif %}
					</div>
					<div class="cta_body">
						<div class="cta_description">
							<p>{{ description }}</p>
						</div>
					</div>
					<div class="cta_actions">
						<div class="cta_footer">
						<div class="cta_link_item">
							<span class="cta_link_button">
								{% include '@partial-link' with {
									class: 'cta',
									title: link_title,
									url: link_url,
									icon: link_icon,
									aria: aria
								} %}
							</span>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.