Framework Component Library

Card Group: 6 Up 

<!-- Card Group -->
<section class="card-group" id="card-group-2" aria-labelledby="card-group-2__title" aria-describedby="card-group-2__description">
    <div class="fw-container">
        <div class="card-group__inner">
            <div class="card-group__header">
                <h2 class="card-group__title" id="card-group-2__title">Card Group</h2>
                <div class="card-group__description" id="card-group-2__description">
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                </div>
            </div>
            <div class="card-group__body">
                <ul class="card-group__items">
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-title">
                                <span class="card-group__item-title-label">Ornare Egestas</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Praesent eget est sed</strong> ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
                            </div>
                        </div>
                    </li>
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-stat">
                                <span class="card-group__item-stat-value">100%</span>
                                <span class="card-group__item-stat-context">of undergraduate students</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>Phasellus ullamcorper ipsum rutrum nunc. Sed aliquam, nisi quis porttitor congue. <a href="#">Vivamus ac turpis</a> anean viverra rhoncus pede.</p>
                            </div>
                        </div>
                    </li>
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-title">
                                <span class="card-group__item-title-label">Pellentesque posuere turpis</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>Vestibulum ante ipsum primis in <strong>faucibus</strong> orci luctus et <em>ultrices posuere</em> cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.</p>
                            </div>
                        </div>
                    </li>
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-stat">
                                <span class="card-group__item-stat-value">Aenean</span>
                                <span class="card-group__item-stat-context">Nullam sagittis</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam.</p>
                            </div>
                        </div>
                    </li>
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-title">
                                <span class="card-group__item-title-label">Vestibulum</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>enean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis.</p>
                            </div>
                        </div>
                    </li>
                    <li class="card-group__item">
                        <figure class="card-group__item-figure">

                            <img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
                        </figure>
                        <div class="card-group__item-body">
                            <h3 class="card-group__item-stat">
                                <span class="card-group__item-stat-value">1/3</span>
                                <span class="card-group__item-stat-context">Ut varius tincidunt libero</span>
                            </h3>
                            <div class="card-group__item-description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. <a href="#">Vivamus ac turpis</a> quis eros consectetur ornare.</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- END: Card Group -->
 
{#
	{% include '@component-card-group' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				alt: '',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{% set id = uniqid('card-group') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}

<!-- Card Group -->
<{{ base_tag }}
	class="card-group"
	id="{{ id }}"
	{% if group_title %}
		aria-labelledby="{{ id ~ '__title' }}"
	{% endif %}
	{% if group_description %}
		aria-describedby="{{ id ~ '__description' }}"
	{% endif %}
>
	<div class="fw-container">
		<div class="card-group__inner">
			{% if group_title or group_description %}
				<div class="card-group__header">
					{% if group_title %}
						<{{ group_heading_tag }} class="card-group__title" id="{{ id ~ '__title' }}">
							{{- group_title -}}
						</{{ group_heading_tag }}>
					{% endif %}
					{% if group_description %}
						<div class="card-group__description" id="{{ id ~ '__description' }}">
							<p>{{ group_description }}</p>
						</div>
					{% endif %}
				</div>
			{% endif %}
			<div class="card-group__body">
				<ul
					class="card-group__items"
					{% if title %}
						aria-labelledby="{{ id ~ '__title' }}"
					{% endif %}
				>
					{% for item in items %}
						<li class="card-group__item">
							<figure class="card-group__item-figure">
								{% include '@partial-image' with {
									class: 'card-group__item-image',
									alt: item.alt,
									image: item.image,
									loading: 'lazy',
									crop: 'classic',
									max: 'sml'
								} only %}
							</figure>
							<div class="card-group__item-body">
								{% if item.title %}
									<{{ item_heading_tag }} class="card-group__item-title">
										<span class="card-group__item-title-label">
											{{- item.title -}}
										</span>
									</{{ item_heading_tag }}>
								{% elseif item.stat %}
									<{{ item_heading_tag }} class="card-group__item-stat">
										<span class="card-group__item-stat-value">
											{{- item.stat.value -}}
										</span>
										<span class="card-group__item-stat-context">
											{{- item.stat.context -}}
										</span>
									</{{ item_heading_tag }}>
								{% endif %}
								<div class="card-group__item-description">
									<p>{{ item.description }}</p>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</{{ base_tag }}>
<!-- END: Card Group -->

No notes defined.