Paul Smith's Component Library

Statistics 

<div class="statistics">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="statistics_inner">
                <h2 class="statistics_title">You Don't Fit in a Box. Great, <span>Neither Do We.</span></h2>
                <div class="statistics_group">
                    <div class="statistics_group_media">
                        <figure class="statistics_group_figure">

                            <img class="statistics_group_image" srcset="https://images.fastspot.com/generic/980x552/3 980w, https://images.fastspot.com/generic/740x416/3 740w, https://images.fastspot.com/generic/500x282/3 500w, https://images.fastspot.com/generic/300x169/3 300w" src="https://images.fastspot.com/generic/300x169/3" alt="" loading="lazy" width="300" height="169">
                        </figure>
                        <div class="js-stats-video-wrapper statistics_video" data-background-video='{"display":"background","id":"917920246","type":"vimeo","title":"Paul Smiths","autoplay":true}'>
                            <div class="statistics_video_iframe_wrap">
                                <div class="statistics_video_iframe_target js-iframe-target"></div>
                            </div>
                        </div>
                        <div class="statistics_video_controls">

                            <button class="statistics_video_play_button js-statistics-video-play-button">
                                <span class="statistics_video_play_button_inner">
                                    <span class="statistics_video_play_button_label">Play Video</span>
                                    <span class="statistics_video_play_button_icon" aria-hidden="true">

                                        <svg class="icon icon_play">
                                            <use href="/images/icons.svg#play" />
                                        </svg>

                                    </span>
                                </span>
                            </button>

                            <button class="statistics_video_pause_button js-statistics-video-pause-button">
                                <span class="statistics_video_pause_button_inner">
                                    <span class="statistics_video_pause_button_label">Pause Video</span>
                                    <span class="statistics_video_pause_button_icon" aria-hidden="true">

                                        <svg class="icon icon_pause">
                                            <use href="/images/icons.svg#pause" />
                                        </svg>

                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="statistics_group_content">

                        <p>There's a lot that sets Paul Smith's apart. We're the only 4-year college in the Adirondack Park. Our graduates are U.S. Biathlon athletes, environmental policymakers, food truck entrepreneurs, Fortune 500 CEOs, and eSports champions. Our hobbies include birding, fungi foraging, axe-throwing, beekeeping, trout fishing, and beanie knitting.</p>
                        <p><strong>We're unique. We're curious. And we aren't here by accident.</strong></p>

                    </div>
                </div>
                <div class="statistics_stats">
                    <div class="statistics_item">
                        <div class="statistics_item_stat">
                            <div class="statistics_item_stat_inner">
                                <span class="statistics_item_stat_value">95%</span>
                            </div>
                        </div>
                        <div class="statistics_item_description">of Graduates are Employed or in Grad School within Six Months</div>
                    </div>
                    <div class="statistics_item">
                        <div class="statistics_item_stat">
                            <div class="statistics_item_stat_inner">
                                <span class="statistics_item_stat_value">14k</span>
                            </div>
                        </div>
                        <div class="statistics_item_description">Acre Campus on Lower St. Regis Lake</div>
                    </div>
                    <div class="statistics_item">
                        <div class="statistics_item_stat">
                            <div class="statistics_item_stat_inner">
                                <span class="statistics_item_stat_value">800</span>
                            </div>
                        </div>
                        <div class="statistics_item_description">Approximate Total Number of Students</div>
                    </div>
                    <div class="statistics_item">
                        <div class="statistics_item_stat">
                            <div class="statistics_item_stat_inner">
                                <span class="statistics_item_stat_value">20+</span>
                            </div>
                        </div>
                        <div class="statistics_item_description">Bachelor's degree programs</div>
                    </div>
                    <div class="statistics_item">
                        <div class="statistics_item_stat">
                            <div class="statistics_item_stat_inner">
                                <span class="statistics_item_stat_value">99%</span>
                            </div>
                        </div>
                        <div class="statistics_item_description">of Students Receive Scholarships, Grants, and other Financial Assistance</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="statistics">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="statistics_inner">
				<h2 class="statistics_title">{{ subheading }} <span>{{ title }}</span></h2>
				<div class="statistics_group">
					<div class="statistics_group_media">
						<figure class="statistics_group_figure">
							{% include '@partial-image' with {
								class: 'statistics_group',
								alt: '',
								image: image,
								loading: 'lazy',
								sources: [
									img.wide.med,
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								]
							} %}
						</figure>
						{% if video %}
							{% set video_options = {
								display: "background",
								id: video.id,
								type: video.type,
								title: video.title,
								autoplay: true
							} %}
							<div class="js-stats-video-wrapper statistics_video" data-background-video='{{ video_options|json_encode }}'>
								<div class="statistics_video_iframe_wrap">
									<div class="statistics_video_iframe_target js-iframe-target"></div>
								</div>
							</div>
							<div class="statistics_video_controls">
								{% render '@partial-button' with {
									class: 'statistics_video_play',
									title: 'Play Video',
									icon: 'play',
									js: true
								} %}

								{% render "@partial-button" with {
									class: 'statistics_video_pause',
									title: 'Pause Video',
									icon: 'pause',
									js: true
								} %}
							</div>
						{% endif %}
					</div>
					<div class="statistics_group_content">
						{{ content }}
					</div>
				</div>
				<div class="statistics_stats">
					{% for stat in stats %}
					<div class="statistics_item">
						<div class="statistics_item_stat">
							<div class="statistics_item_stat_inner">
								<span class="statistics_item_stat_value">{{ stat.stat }}</span>
							</div>
						</div>
						<div class="statistics_item_description">{{ stat.description }}</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.