New College of Florida Component Library

Stats: In Content 

<div class="stats stats_in_content">

    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">

            <div class="stats_inner">

                <div class="stats_content_wrapper">
                    <h2 class="stats_title">Stats</h2>
                </div>

                <div class="stats_body">

                    <div class="stat has_image">
                        <figure class="stat_figure">
                            <span class="lazy_image_wrapper stat_image_wrapper">
                                <img class="js-lazy js-lazyload stat_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/300x169/1" data-src="//images.fastspot.com/new-college-of-florida/500x282/1" data-srcset="//images.fastspot.com/new-college-of-florida/500x282/1 500w, //images.fastspot.com/new-college-of-florida/300x169/1 300w" alt="">
                            </span>
                            <noscript>
                                <img class="stat_image" src="https://images.fastspot.com/new-college-of-florida/300x169/1" srcset="https://images.fastspot.com/new-college-of-florida/300x169/1 300w, https://images.fastspot.com/new-college-of-florida/500x282/1 500w" sizes="100vw" alt="">
                            </noscript>
                        </figure>
                        <div class="stat_wrapper">
                            <div class="stat_header">
                                <h3 class="stat_title">Top 10</h3>
                            </div>
                            <div class="stat_body">
                                <div class="stat_description">
                                    <p><a href="#">Fiske Guide to Colleges </a> ranks New College a Top 10 “Best Buy” public college.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat has_image">
                        <figure class="stat_figure">
                            <span class="lazy_image_wrapper stat_image_wrapper">
                                <img class="js-lazy js-lazyload stat_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/300x169/2" data-src="//images.fastspot.com/new-college-of-florida/500x282/2" data-srcset="//images.fastspot.com/new-college-of-florida/500x282/2 500w, //images.fastspot.com/new-college-of-florida/300x169/2 300w" alt="">
                            </span>
                            <noscript>
                                <img class="stat_image" src="https://images.fastspot.com/new-college-of-florida/300x169/2" srcset="https://images.fastspot.com/new-college-of-florida/300x169/2 300w, https://images.fastspot.com/new-college-of-florida/500x282/2 500w" sizes="100vw" alt="">
                            </noscript>
                        </figure>
                        <div class="stat_wrapper">
                            <div class="stat_header">
                                <h3 class="stat_title">9 of 10</h3>
                            </div>
                            <div class="stat_body">
                                <div class="stat_description">
                                    <p>Fiske Guide to Colleges ranks New College a Top 10 “Best Buy” public college. <a href="#">Explore Academics and Majors</a></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

</div>
 
<div class="stats stats_in_content">

	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">

			<div class="stats_inner">

				<div class="stats_content_wrapper">
					<h2 class="stats_title">{{ title }}</h2>
				</div>

				{% if items %}
					<div class="stats_body">

						{% for item in items %}
							<div class="stat{% if item.image %} has_image{% endif %}">
								{% if item.image %}
									<figure class="stat_figure">
										{% include "@partial-image" with {
											class: "stat",
											alt: "",
											image: item.image,
											sources: [
												img.wide.xsml,
												img.wide.xxsml
											]
										} %}
									</figure>
								{% endif %}
								<div class="stat_wrapper">
									<div class="stat_header">
										<h3 class="stat_title">{{ item.title }}</h3>
									</div>
									<div class="stat_body">
										<div class="stat_description">
											<p>{{ item.description }}</p>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}

					</div>
				{% endif %}

			</div>

		</div>
	</div>

</div>

No notes defined.