Framework Component Library

Card Group: 2 Up 

<!-- Card Group -->
<section class="card-group" id="card-group-6" aria-labelledby="card-group-6__title" aria-describedby="card-group-6__description">
    <div class="card-group__header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="card-group__header-inner">
                    <h2 class="card-group__title" id="card-group-6__title">Card Group</h2>
                    <div class="card-group__description" id="card-group-6__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>
        </div>
    </div>
    <div class="card-group__body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="card-group__items" aria-labelledby="card-group-6__title">
                    <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>
                </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 item_heading_level = title ? 'h3' : 'h2'  %}

<!-- Card Group -->
<{{ title ? 'section' : 'div' }}
	class="card-group"
	id="{{ id }}"
	{% if title %}
		aria-labelledby="{{ id ~ '__title' }}"
	{% endif %}
	{% if description %}
		aria-describedby="{{ id ~ '__description' }}"
	{% endif %}
>
	{% if title or description %}
		<div class="card-group__header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="card-group__header-inner">
						{% if title %}
							<h2 class="card-group__title" id="{{ id ~ '__title' }}">
								{{- title -}}
							</h2>
						{% endif %}
						{% if description %}
							<div class="card-group__description" id="{{ id ~ '__description' }}">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="card-group__body">
		<div class="fs-row">
			<div class="fs-cell">
				<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_level }} class="card-group__item-title">
										<span class="card-group__item-title-label">
											{{- item.title -}}
										</span>
									</{{ item_heading_level }}>
								{% elseif item.stat %}
									<{{ item_heading_level }} 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_level }}>
								{% endif %}
								<div class="card-group__item-description">
									<p>{{ item.description }}</p>
								</div>
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</{{ title ? 'section' : 'div' }}>
<!-- END: Card Group -->

No notes defined.