New College of Florida Component Library

Stats: Full Width 

<div class="stats stats_full_width">

    <div class="fs-row">
        <div class="fs-cell fs-lg-12">

            <div class="stats_inner">

                <div class="stats_content_wrapper">
                    <h2 class="stats_title">Exceptional return on investment.</h2>
                    <a href="#" class="stats_link desktop_stats_link">
                        <span class="stats_link_inner">
                            <span class="stats_link_label">Why New?</span>
                        </span>
                    </a>
                </div>

                <div class="stats_body js-carousel" data-carousel-options='{"maxWidth":"979px", "matchWidth": false, "controls": false, "contained": false}'>

                    <div class="stat">
                        <div class="stat_inner">
                            <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>Fiske Guide to Colleges ranks New College a Top 10 “Best Buy” public college.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat_inner">
                            <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>New College students receive some form of financial aid.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat_inner">
                            <div class="stat_wrapper">
                                <div class="stat_header">
                                    <h3 class="stat_title">6th</h3>
                                </div>
                                <div class="stat_body">
                                    <div class="stat_description">
                                        <p>Public liberal arts college in the nation according to U.S. News & World Report.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="stat">
                        <div class="stat_inner">
                            <div class="stat_wrapper">
                                <div class="stat_header">
                                    <h3 class="stat_title">1st</h3>
                                </div>
                                <div class="stat_body">
                                    <div class="stat_description">
                                        <p>No. 1 Lowest average student debt among all universities in Florida (lendedu.com).</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <a href="#" class="stats_link mobile_stats_link">
                    <span class="stats_link_inner">
                        <span class="stats_link_label">Why New?</span>
                    </span>
                </a>

            </div>

        </div>
    </div>

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

	<div class="fs-row">
		<div class="fs-cell fs-lg-12">

			<div class="stats_inner">

				<div class="stats_content_wrapper">
					<h2 class="stats_title">{{ title }}</h2>
					{% if link %}
						<a href="{{ link.url }}" class="stats_link desktop_stats_link">
							<span class="stats_link_inner">
								<span class="stats_link_label">{{ link.label }}</span>
							</span>
						</a>
					{% endif %}
				</div>

				{% if items %}
					<div class="stats_body js-carousel" data-carousel-options='{"maxWidth":"979px", "matchWidth": false, "controls": false, "contained": false}'>

						{% for item in items %}
							<div class="stat">
								<div class="stat_inner">
									<div class="stat_wrapper">
										<div class="stat_header">
											<h3 class="stat_title">{{ item.title|title }}</h3>
										</div>
										<div class="stat_body">
											<div class="stat_description">
												<p>{{ item.description }}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}

					</div>
				{% endif %}

				{% if link %}
					<a href="{{ link.url }}" class="stats_link mobile_stats_link">
						<span class="stats_link_inner">
							<span class="stats_link_label">{{ link.label }}</span>
						</span>
					</a>
				{% endif %}

			</div>

		</div>
	</div>

</div>

No notes defined.