Zero Deaths Maryland Component Library

Homepage Feature 

<!-- Topic Row -->
<div class="homepage_feature">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="homepage_feature_inner">
                <div class="homepage_feature_inner_content order_2">
                    <div class="homepage_feature_header">
                        <h1 class="homepage_feature_title">
                            <span class="homepage_feature_title_label">
                                Every Crash Is Preventable.
                            </span>
                            <span class="homepage_feature_highlighted_text">
                                Every life counts.
                            </span>
                        </h1>
                    </div>
                    <div class="homepage_feature_body">
                        <div class="homepage_feature_description">
                            <p>
                                Maryland is dedicated to saving lives and preventing injuries from traffic crashes.
                            </p>
                        </div>
                        <div class="homepage_feature_footer">
                            <div class="homepage_feature_link_item">
                                <span class="homepage_feature_link_button">

                                    <a href="/" class="homepage_feature_link">
                                        <span class="homepage_feature_link_inner">
                                            <span class="homepage_feature_link_label">About Us</span>
                                            <span class="homepage_feature_link_icon" aria-hidden="true">
                                                <span class="homepage_feature_link_icon_inner">
                                                    <span class="homepage_feature_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 class="homepage_feature_media order_1">
                    <div class="homepage_feature_item no_caption">
                        <figure class="homepage_feature_figure">
                            <span class="homepage_feature_media_item">
                                <span class="lazy_image_wrapper homepage_feature_image_wrapper">
                                    <img class="js-lazy js-lazyload homepage_feature_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/300x169/" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/300x169/ 300w, https://images.fastspot.com/mdot-zero-deaths-md/500x282/ 500w, https://images.fastspot.com/mdot-zero-deaths-md/740x416/ 740w, https://images.fastspot.com/mdot-zero-deaths-md/980x552/ 980w, https://images.fastspot.com/mdot-zero-deaths-md/1220x686/ 1220w" alt="">
                                </span>
                                <noscript>
                                    <img class="homepage_feature_image" src="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/" srcset="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/ 1220w, https://images.fastspot.com/mdot-zero-deaths-md/980x552/ 980w, https://images.fastspot.com/mdot-zero-deaths-md/740x416/ 740w, https://images.fastspot.com/mdot-zero-deaths-md/500x282/ 500w, https://images.fastspot.com/mdot-zero-deaths-md/300x169/ 300w" sizes="100vw" alt="">
                                </noscript>
                            </span>
                            <figcaption class="homepage_feature_details">
                            </figcaption>
                        </figure>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<!-- END: Topic Row -->
 
<!-- Topic Row -->
<div class="homepage_feature">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="homepage_feature_inner">
				<div class="homepage_feature_inner_content order_2">
					<div class="homepage_feature_header">
								<h1 class="homepage_feature_title">
									<span class="homepage_feature_title_label">
										{{ title|title }}
									</span>
									{% if highlighted_text %}
										<span class="homepage_feature_highlighted_text">
											{{ highlighted_text }}
										</span>
									{% endif %}
								</h1>
							</div>
							<div class="homepage_feature_body">
								{% if description %}
									<div class="homepage_feature_description">
										<p>
											{{ description }}
										</p>
									</div>
								{% endif %}
								<div class="homepage_feature_footer">
									<div class="homepage_feature_link_item">
									<span class="homepage_feature_link_button">
										{% render "@partial-link" with {
											class: "homepage_feature",
											title: link_title,
											url: link_url,
											icon: 'arrow_right'
										} %}
										
									</span>
									
								</div>
							</div>
						</div>
				</div>

				<div class="homepage_feature_media order_1">
					<div class="homepage_feature_item{% if caption is empty %} no_caption{% endif %}">
						<figure class="homepage_feature_figure" {% if caption %} aria-label="{{ caption|striptags }}" {% endif %}>
							<span class="homepage_feature_media_item">
								{% include "@partial-image" with {
                                	class: "homepage_feature",
                                    alt: "",
                                    itemprop: "",
                                    image: image,
                                    sources: [
                                        img.wide.lrg,
                                        img.wide.med,
                                        img.wide.sml,
                                        img.wide.xsml,
                                        img.wide.xxsml
                                    ]
                                    } %}
									{% if video %}
										<a class="js-video-appender homepage_feature_video_link" href="{{ video }}" target="_blank">
											<span class="homepage_feature_link_inner">
												<span class="homepage_feature_video_link_icon">{{ icon("play") }}</span>
												<span class="homepage_feature_video_link_label">Play</span>
											</span>
										</a>
									{% endif %}
								</span>
								<figcaption class="homepage_feature_details">
									{% if caption %}
										<p class="homepage_featurem_caption">{{ caption }}</p>
									{% endif %}
								</figcaption>
						</figure>
					</div>
				
		</div>
				</div>
			
				
				
</div>
</div>
</div>
<!-- END: Topic Row -->

No notes defined.