Framework Component Library

Card Group: One Up 

<!-- Card Group -->
<section class="card_group" id="card_group_7" aria-labelledby="card_group_7_title" aria-describedby="card_group_7_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_7_title">
                        Card Group
                    </h2>
                    <div class="card_group_description" id="card_group_7_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_7_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>
                </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'
								} %}
							</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.