Paul Smith's College Component Library

Facts & Stats: Green 

<div class="facts_stats component_theme_green component_spacing_padding">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="facts_stats_inner">
                <header class="facts_stats_header">
                    <h1 class="facts_stats_header_title">
                        Facts &amp; Stats
                    </h1>

                    <div class="facts_stats_header_desc">
                        <p>Nulla culpa ex tempor cillum occaecat qui est laboris culpa exercitation quis consectetur reprehenderit duis tempor.</p>
                    </div>
                </header>

                <div class="facts_stats_body">
                    <div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"breakpoints":{"(min-width: 740px)":{"slidesToScroll":2}}}'>
                        <div id="facts-stats-viewport-4" class="embla__viewport" data-js="viewport">
                            <ul class="embla__container" data-js="container">
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Environment</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    14,<wbr>200
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    acres of land
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/1" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/1" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Student Life</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    20+
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    niche student groups
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/2" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/2" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Activities</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    Free
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    Rental of skis, snowshoes, and canoes
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/3" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/3" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Athletics</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    21+
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    athletic teams
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/4" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/4" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Aliqua</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    500
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    veniam cillum non
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/6" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/6" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="embla__slide">
                                    <div class="facts_stats_item">
                                        <div class="facts_stats_item_grid">
                                            <div class="facts_stats_item_grid_item is_content">
                                                <div class="facts_stats_item_content">
                                                    <div class="facts_stats_item_content_grid">
                                                        <div class="facts_stats_item_content_grid_item is_top">
                                                            <div class="facts_stats_item_pill_wrap">
                                                                <div class="facts_stats_item_pill">Tempor</div>
                                                            </div>
                                                        </div>

                                                        <div class="facts_stats_item_content_grid_item is_bottom">
                                                            <h3 class="facts_stats_item_stat">
                                                                <span class="facts_stats_item_stat_figure">
                                                                    100%
                                                                </span>
                                                                <span class="facts_stats_item_stat_context">
                                                                    occaecat non esse
                                                                </span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="facts_stats_item_grid_item is_media">

                                                <picture class="facts_stats_item_picture">
                                                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/7" width="494" height="740">
                                                    <img class="facts_stats_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/7" alt="" loading="lazy" width="980" height="980">
                                                </picture>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="embla__controls" aria-controls="facts-stats-viewport-4">
                            <button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">

                                <svg class="icon icon_arrow_carousel_left">
                                    <use href="/images/icons.svg#arrow_carousel_left" />
                                </svg>

                            </button>

                            <div class="embla__dots" data-js="dots" role="navigation"></div>

                            <button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">

                                <svg class="icon icon_arrow_carousel_right">
                                    <use href="/images/icons.svg#arrow_carousel_right" />
                                </svg>

                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set component_spacing = 'padding' %}

{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}

{% set carousel_json = {
	loop: false,
	slidesToScroll: 1,
	breakpoints: {
		'(min-width: 740px)': {
			slidesToScroll: 2
		}
	}
}|json_encode %}

{% set uuid_viewport = uniqid("facts-stats-viewport") %}

<div class="facts_stats component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="facts_stats_inner">
				<header class="facts_stats_header">
					<h1 class="facts_stats_header_title">
						{{ group_title }}
					</h1>

					{% if group_description %}
						<div class="facts_stats_header_desc">
							<p>{{ group_description }}</p>
						</div>
					{% endif %}
				</header>

				<div class="facts_stats_body">
					<div
						class="embla embla__default-controls js-carousel-embla"
						data-carousel-embla='{{ carousel_json }}'
					>
						<div
							id="{{ uuid_viewport }}"
							class="embla__viewport"
							data-js="viewport"
						>
							<ul class="embla__container" data-js="container">
								{% for item in items %}
									<li class="embla__slide">
										{% include "@partial-facts-stats-item" with {
											item: item
										} %}
									</li>
								{% endfor %}
							</ul>
						</div>

						<div class="embla__controls" aria-controls="{{ uuid_viewport }}">
							<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
								{{ icon("arrow_carousel_left") }}
							</button>

							<div class="embla__dots" data-js="dots" role="navigation"></div>

							<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
								{{ icon("arrow_carousel_right") }}
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.