Framework Component Library

Card Group: 3 Up 

<!-- Card Group -->
<section class="card-group comp_style__light" id="card-group-5" aria-labelledby="card-group-5__title" aria-describedby="card-group-5__description">
    <div class="fw-container">
        <div class="card-group__inner">
            <div class="card-group__header">
                <h2 class="card-group__title" id="card-group-5__title">Card Group title goes here</h2>
                <div class="card-group__header-inner">
                    <div class="card-group__description" id="card-group-5__description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>

                    <a class="button-paint
 		 			button-paint--light
 				" href="#">
                        <span class="button-paint__inner"> <span class="button-paint__label">Group CTA</span>
                        </span>
                    </a>
                </div>
            </div>
            <div class="card-group__body">
                <ul class="card-group__items" aria-labelledby="card-group-5__title">
                    <li class="card-group__item">
                        <a class="card-group__item-link" href="#" id="" aria-labelledby="item-link-title__1" aria-describedby="item-link-description__1">

                            <figure class="card-group__item-figure">
                                <div class="card-group__item-figure-media">

                                    <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">
                                </div>
                            </figure>
                            <div class="card-group__item-wrapper">
                                <div class="card-group__item-body">
                                    <h3 class="card-group__item-title" id="item-link-title__1">Ornare egestas aquilam</h3>
                                    <div class="card-group__item-description" id="item-link-description__1">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.
                                    </div>
                                </div>
                                <div class="card-group__item-links">
                                    <button class="button-paint button-paint--light">
                                        <span class="button-paint__inner">
                                            <span class="button-paint__label">
                                                Curabitur ullam
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="card-group__item">
                        <a class="card-group__item-link" href="#" id="" aria-labelledby="item-link-title__2" aria-describedby="item-link-description__2">

                            <figure class="card-group__item-figure">
                                <div class="card-group__item-figure-media">

                                    <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">
                                </div>
                            </figure>
                            <div class="card-group__item-wrapper">
                                <div class="card-group__item-body">
                                    <h3 class="card-group__item-title" id="item-link-title__2">Etiam sit amet orci eget eros faucibus tincidunt</h3>
                                    <div class="card-group__item-description" id="item-link-description__2">
                                        Phasellus ullamcorper ipsum rutrum nunc. Sed aliquam, nisi quis porttitor congue. Vivamus ac turpis anean viverra rhoncus pede.
                                    </div>
                                </div>
                                <div class="card-group__item-links">
                                    <button class="button-paint button-paint--light">
                                        <span class="button-paint__inner">
                                            <span class="button-paint__label">
                                                Donec vitae
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="card-group__item">
                        <a class="card-group__item-link" href="#" id="" aria-labelledby="item-link-title__3" aria-describedby="item-link-description__3">

                            <figure class="card-group__item-figure">
                                <div class="card-group__item-figure-media">

                                    <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">
                                </div>
                            </figure>
                            <div class="card-group__item-wrapper">
                                <div class="card-group__item-body">
                                    <h3 class="card-group__item-title" id="item-link-title__3">Pellentesque posuere turpis</h3>
                                    <div class="card-group__item-description" id="item-link-description__3">
                                        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean bibendum sed, posuere ac, mattis non, nunc.
                                    </div>
                                </div>
                                <div class="card-group__item-links">
                                    <button class="button-paint button-paint--light">
                                        <span class="button-paint__inner">
                                            <span class="button-paint__label">
                                                Tellus metus
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-group__border"></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) %}
{% set comp_style = group_style ? 'comp_style__' ~ group_style : 'comp_style__light' %}

<!-- Card Group -->
<{{ base_tag }}
	class="card-group {{comp_style}}"
	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 %}
					<div class="card-group__header-inner">
						{% if group_description %}
							<div class="card-group__description" id="{{ id ~ '__description' }}">
								<p>{{ group_description }}</p>
							</div>
						{% endif %}
						{% if group_link %}
							{% include '@partial-link' with {
								classes: {
									base: 'button-paint',
									modifiers: [
										'light'
									]
								},
								title: group_link.title,
								url: group_link.url,
								icon: null
							} only %}
						{% endif %}
					</div>
				</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">
							<a 
								class="card-group__item-link" 
								href="{{ item.link.url }}" 
								id="" 
								aria-labelledby="item-link-title__{{loop.index}}" 
								aria-describedby="item-link-description__{{loop.index}}" 
							>

								{% if item.image %}
									<figure class="card-group__item-figure">
										<div class="card-group__item-figure-media">
											{% include '@partial-image' with {
												class: 'card-group__item-image',
												alt: item.alt,
												image: item.image,
												loading: 'lazy',
												crop: 'classic',
												max: 'sml'
											} only %}
										</div>
									</figure>
								{% endif %}
								<div class="card-group__item-wrapper">
									<div class="card-group__item-body">
										{% if item.title %}
											<{{ item_heading_tag }} class="card-group__item-title" id="item-link-title__{{loop.index}}">
												{{- item.title -}}
											</{{ item_heading_tag }}>
										{% endif %}
										<div class="card-group__item-description" id="item-link-description__{{loop.index}}">
											{{ item.description }}
										</div>
									</div>
									{% if item.link %}
										<div class="card-group__item-links">
											<button class="button-paint button-paint--light">
												<span class="button-paint__inner">
													<span class="button-paint__label">
														{{item.link.title}}
													</span>
												</span>
											</button>
										</div>
									{% endif %}
								</div>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
	<div class="card-group__border"></div>
</{{ base_tag }}>
<!-- END: Card Group -->

No notes defined.