Framework Component Library

Card Group: 5 Up 

<!-- Card Group -->
<section class="card-group" id="card-group-3" aria-labelledby="card-group-3__title" aria-describedby="card-group-3__description">
    <div class="fw-container">
        <div class="card-group__inner">
            <div class="card-group__header">
                <h2 class="card-group__title" id="card-group-3__title">Card Group</h2>
                <div class="card-group__description" id="card-group-3__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" aria-labelledby="card-group-3__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">Ornare Egestas</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>
                        <div class="card-group__item-links">

                            <a class="button-text--large
 				" href="#">
                                <span class="button-text--large__inner"> <span class="button-text--large__label">Curabitur ullamcorper</span>
                                </span>
                            </a>
                        </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-title">Etiam sit amet orci eget eros faucibus tincidunt</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>
                        <div class="card-group__item-links">

                            <a class="button-text--large
 				" href="#">
                                <span class="button-text--large__inner"> <span class="button-text--large__label">Donec vitae</span>
                                </span>
                            </a>
                        </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">Pellentesque posuere turpis</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-title">Aliquam lorem ante</h3>
                            <div class="card-group__item-description">
                                <p>Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam.</p>
                            </div>
                        </div>
                        <div class="card-group__item-links">

                            <a class="button-text--large
 				" href="#">
                                <span class="button-text--large__inner"> <span class="button-text--large__label">Sed consequat</span>
                                </span>
                            </a>
                        </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">Vestibulum</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>
                        <div class="card-group__item-links">

                            <a class="button-text--large
 				" href="#">
                                <span class="button-text--large__inner"> <span class="button-text--large__label">Donec</span>
                                </span>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- END: Card Group -->
 
{#
	{% include '@component-card-group' with {
		group_title: 'Title',
		group_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 group_title %}
						aria-labelledby="{{ id ~ '__title' }}"
					{% endif %}
				>
					{% for item in items %}
						<li class="card-group__item">
							{% if item.image %}
								<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>
							{% endif %}
							<div class="card-group__item-body">
								{% if item.title %}
									<{{ item_heading_tag }} class="card-group__item-title">
										{{- item.title -}}
									</{{ item_heading_tag }}>
								{% endif %}
								<div class="card-group__item-description">
									<p>{{ item.description }}</p>
								</div>
							</div>
							{% if item.link %}
								<div class="card-group__item-links">
									{% include '@partial-link' with {
										classes: {
											base: 'button-text--large',
										},
										title: item.link.title,
										url: item.link.url,
										icon: null
									} only %}
								</div>
							{% endif %}
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</{{ base_tag }}>
<!-- END: Card Group -->

No notes defined.