Paul Smith's College Component Library

Card Group: White 

<!-- Card Group -->
<div class="card_group component_theme_white component_spacing_margin">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="card_group_inner">
                <header class="card_group_header">
                    <div class="card_group_header_grid">
                        <div class="card_group_header_grid_item is_left">
                            <div class="card_group_header_label">
                                It’s About the Experience
                            </div>

                            <h1 class="card_group_header_title">
                                Adventure Inside Academics
                            </h1>
                        </div>

                        <div class="card_group_header_grid_item is_right">
                            <div class="card_group_header_desc">
                                <p>We’re not just earning degrees. We’re living our passions. Hands-on learning is an integral part of our 20+ degree programs. So, you’ll graduate with more than a degree — you’ll have real job experience.</p>
                            </div>

                            <div class="card_group_header_cta_wrap is_desktop">

                                <a href="#" class="base_link">
                                    <span class="base_link_inner">
                                        <span class="base_link_label">Explore All Programs of Study</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_chevron_right">
                                                <use href="/images/icons.svg#chevron_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </header>

                <div class="card_group_body">
                    <ul class="card_group_items_grid">
                        <li class="card_group_items_grid_item">
                            <div class="card_group_item">
                                <div class="card_group_item_grid">
                                    <div class="card_group_item_grid_item is_content">
                                        <div class="card_group_item_content">
                                            <div class="card_group_item_content_inner">
                                                <div class="card_group_item_spacing_wrap">
                                                    <div class="card_group_item_content_grid">
                                                        <div class="card_group_item_content_grid_item is_title">
                                                            <h3 class="card_group_item_title">
                                                                <a href="#" class="card_group_item_link">
                                                                    Business & Hospitality
                                                                </a>
                                                            </h3>
                                                        </div>

                                                        <div class="card_group_item_content_grid_item is_desc">
                                                            <div class="card_group_item_desc">
                                                                <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card_group_item_grid_item is_media">

                                        <picture class="card_group_item_picture">
                                            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/1" width="494" height="740">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/654x980/1" width="654" height="980">
                                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/1" width="494" height="740">
                                            <img class="card_group_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/1" alt="" loading="lazy" width="980" height="980">
                                        </picture>
                                    </div>

                                    <div class="card_group_item_grid_item is_desc">
                                        <div class="card_group_item_desc is_mobile">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="card_group_items_grid_item">
                            <div class="card_group_item">
                                <div class="card_group_item_grid">
                                    <div class="card_group_item_grid_item is_content">
                                        <div class="card_group_item_content">
                                            <div class="card_group_item_content_inner">
                                                <div class="card_group_item_spacing_wrap">
                                                    <div class="card_group_item_content_grid">
                                                        <div class="card_group_item_content_grid_item is_title">
                                                            <h3 class="card_group_item_title">
                                                                Environment & Society
                                                            </h3>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card_group_item_grid_item is_media">

                                        <picture class="card_group_item_picture">
                                            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/2" width="494" height="740">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/654x980/2" width="654" height="980">
                                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/2" width="494" height="740">
                                            <img class="card_group_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/2" alt="" loading="lazy" width="980" height="980">
                                        </picture>
                                    </div>

                                    <div class="card_group_item_grid_item is_desc">
                                        <div class="card_group_item_desc is_mobile">
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="card_group_items_grid_item">
                            <div class="card_group_item">
                                <div class="card_group_item_grid">
                                    <div class="card_group_item_grid_item is_content">
                                        <div class="card_group_item_content">
                                            <div class="card_group_item_content_inner">
                                                <div class="card_group_item_spacing_wrap">
                                                    <div class="card_group_item_content_grid">
                                                        <div class="card_group_item_content_grid_item is_title">
                                                            <h3 class="card_group_item_title">
                                                                <a href="#" class="card_group_item_link">
                                                                    Forestry
                                                                </a>
                                                            </h3>
                                                        </div>

                                                        <div class="card_group_item_content_grid_item is_desc">
                                                            <div class="card_group_item_desc">
                                                                <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card_group_item_grid_item is_media">

                                        <picture class="card_group_item_picture">
                                            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/3" width="494" height="740">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/654x980/3" width="654" height="980">
                                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/3" width="494" height="740">
                                            <img class="card_group_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/3" alt="" loading="lazy" width="980" height="980">
                                        </picture>
                                    </div>

                                    <div class="card_group_item_grid_item is_desc">
                                        <div class="card_group_item_desc is_mobile">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="card_group_items_grid_item">
                            <div class="card_group_item">
                                <div class="card_group_item_grid">
                                    <div class="card_group_item_grid_item is_content">
                                        <div class="card_group_item_content">
                                            <div class="card_group_item_content_inner">
                                                <div class="card_group_item_spacing_wrap">
                                                    <div class="card_group_item_content_grid">
                                                        <div class="card_group_item_content_grid_item is_title">
                                                            <h3 class="card_group_item_title">
                                                                Natural Science
                                                            </h3>
                                                        </div>

                                                        <div class="card_group_item_content_grid_item is_desc">
                                                            <div class="card_group_item_desc">
                                                                <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card_group_item_grid_item is_media">

                                        <picture class="card_group_item_picture">
                                            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/4" width="494" height="740">
                                            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/paul-smiths-college/654x980/4" width="654" height="980">
                                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/paul-smiths-college/494x740/4" width="494" height="740">
                                            <img class="card_group_item_image" src="//images.fastspot.com/paul-smiths-college/980x980/4" alt="" loading="lazy" width="980" height="980">
                                        </picture>
                                    </div>

                                    <div class="card_group_item_grid_item is_desc">
                                        <div class="card_group_item_desc is_mobile">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor ristique Porta amet risus ornare.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>

                    <div class="card_group_header_cta_wrap is_mobile">

                        <a href="#" class="base_link">
                            <span class="base_link_inner">
                                <span class="base_link_label">Explore All Programs of Study</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_chevron_right">
                                        <use href="/images/icons.svg#chevron_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </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
		},
		'(min-width: 992px)': {
			slidesToScroll: 3
		},
		'(min-width: 1220px)': {
			active: false
		}
	}
}|json_encode %}

{% set uuid_viewport = uniqid("card-group-viewport") %}

<!-- Card Group -->
<div class="card_group component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="card_group_inner">
				<header class="card_group_header">
					<div class="card_group_header_grid">
						<div class="card_group_header_grid_item is_left">
							{% if group_label %}
								<div class="card_group_header_label">
									{{ group_label }}
								</div>
							{% endif %}

							<h1 class="card_group_header_title">
								{{ group_title }}
							</h1>
						</div>
						
						<div class="card_group_header_grid_item is_right">
							{% if group_description %}
								<div class="card_group_header_desc">
									<p>{{ group_description }}</p>
								</div>
							{% endif %}

							{% if group_cta.url %}
								<div class="card_group_header_cta_wrap is_desktop">
									{% include '@partial-link' with {
										class: 'base',
										title: group_cta.title,
										url: group_cta.url,
										icon: 'chevron_right',
										nowrap: true
									} %}
								</div>
							{% endif %}
						</div>
					</div>
				</header>

				<div class="card_group_body">
					<ul class="card_group_items_grid">
						{% for item in items %}
							<li class="card_group_items_grid_item">
								{% include "@partial-card-group-item" with {
									item: item
								} %}
							</li>
						{% endfor %}
					</ul>

					{% if group_cta.url %}
						<div class="card_group_header_cta_wrap is_mobile">
							{% include '@partial-link' with {
								class: 'base',
								title: group_cta.title,
								url: group_cta.url,
								icon: 'chevron_right',
								nowrap: true
							} %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.