<!-- Card Group -->
<div class="card_group_accordion">
<div class="card_group_accordion_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-lg-justify-center">
<div class="card_group_accordion_header_inner">
<h2 class="card_group_accordion_title">Facts & Figures</h2>
<div class="card_group_accordion_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_accordion_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_group_accordion_items card_count_3" aria-label="Facts & Figures">
<li class="card_group_accordion_item">
<a href="#">
<figure class="card_group_accordion_item_figure">
<img class="card_group_accordion_item_image" srcset="https://images.fastspot.com/jhu-sustainability/740x494/1 740w, https://images.fastspot.com/jhu-sustainability/500x334/1 500w, https://images.fastspot.com/jhu-sustainability/300x200/1 300w" src="https://images.fastspot.com/jhu-sustainability/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
</a>
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<a class="card_group_accordion_item_title_link" href="#">
<span class="card_group_accordion_item_title_label">2/3</span>
</a>
</h3>
<div class="card_group_accordion_item_description">
<p>Roughly two-thirds of the university's <a href="#">overall electricity</a> needs will be provided by solar power.</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 1-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".1-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 1-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".1-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 1-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".1-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="card_group_accordion_item">
<figure class="card_group_accordion_item_figure">
<img class="card_group_accordion_item_image" srcset="https://images.fastspot.com/jhu-sustainability/740x494/2 740w, https://images.fastspot.com/jhu-sustainability/500x334/2 500w, https://images.fastspot.com/jhu-sustainability/300x200/2 300w" src="https://images.fastspot.com/jhu-sustainability/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<span class="card_group_accordion_item_title_label">#1 Largest</span>
</h3>
<div class="card_group_accordion_item_description">
<p>Solar agreement in <strong>Baltimore</strong> & the state of Maryland.</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 2-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".2-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 2-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".2-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 2-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".2-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="card_group_accordion_item">
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<span class="card_group_accordion_item_title_label">250,000 mwh</span>
</h3>
<div class="card_group_accordion_item_description">
<p>University has pledged to buy more than <em>250,000 megawatt hours</em> of solar power a year.</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 3-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".3-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 3-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".3-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 3-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".3-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="card_group_accordion_item">
<a href="#">
<figure class="card_group_accordion_item_figure">
<img class="card_group_accordion_item_image" srcset="https://images.fastspot.com/jhu-sustainability/740x494/4 740w, https://images.fastspot.com/jhu-sustainability/500x334/4 500w, https://images.fastspot.com/jhu-sustainability/300x200/4 300w" src="https://images.fastspot.com/jhu-sustainability/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
</a>
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<a class="card_group_accordion_item_title_link" href="#">
<span class="card_group_accordion_item_title_label">Some Title</span>
</a>
</h3>
<div class="card_group_accordion_item_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 4-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".4-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 4-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".4-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 4-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".4-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="card_group_accordion_item">
<figure class="card_group_accordion_item_figure">
<img class="card_group_accordion_item_image" srcset="https://images.fastspot.com/jhu-sustainability/740x494/1 740w, https://images.fastspot.com/jhu-sustainability/500x334/1 500w, https://images.fastspot.com/jhu-sustainability/300x200/1 300w" src="https://images.fastspot.com/jhu-sustainability/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<span class="card_group_accordion_item_title_label">Ornare Egestas</span>
</h3>
<div class="card_group_accordion_item_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 5-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".5-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 5-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".5-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 5-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".5-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
<li class="card_group_accordion_item">
<figure class="card_group_accordion_item_figure">
<img class="card_group_accordion_item_image" srcset="https://images.fastspot.com/jhu-sustainability/740x494/2 740w, https://images.fastspot.com/jhu-sustainability/500x334/2 500w, https://images.fastspot.com/jhu-sustainability/300x200/2 300w" src="https://images.fastspot.com/jhu-sustainability/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card_group_accordion_item_body">
<h3 class="card_group_accordion_item_title">
<span class="card_group_accordion_item_title_label">Another Title</span>
</h3>
<div class="card_group_accordion_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 class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
<div class="js-accordion-item 6-js-card-group-accordion-item-2-1 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".6-js-card-group-accordion-item-2-1">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Transportation</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Transportation">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 6-js-card-group-accordion-item-2-2 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".6-js-card-group-accordion-item-2-2">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Lighting</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Lighting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
<div class="js-accordion-item 6-js-card-group-accordion-item-2-3 card_group_accordion_accordion_item">
<h3 class="card_group_accordion_accordion_item_heading">
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".6-js-card-group-accordion-item-2-3">
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">Virtual Attendance</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="Virtual Attendance">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet sagittis felis, ut ornare arcu. Nam vitae sodales est, non convallis quam. Nulla quis fringilla dolor. Praesent maximus at erat ut aliquet.
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
{#
{% include '@component-card-group' with {
title: 'Title',
description: 'Description',
items: [
{
image: '1',
title: 'Item Title',
description: 'Item Description'
}
]
} %}
#}
{% set id = uniqid('js-card-group-accordion-item') %}
{% set group_id = uniqid('card-group-accordion-group') %}
{% if items|length % 3 == 0 %}
{% set card_count = 3 %}
{% elseif items|length < 3 %}
{% set card_count = 2 %}
{% else %}
{% set card_count = 4 %}
{% endif %}
<!-- Card Group -->
<div class="card_group_accordion">
{% if title or description %}
<div class="card_group_accordion_header">
<div class="fs-row">
<div class="fs-cell {{ cell }}">
<div class="card_group_accordion_header_inner">
{% if title %}
<h2 class="card_group_accordion_title">{{ title }}</h2>
{% endif %}
{% if description %}
<div class="card_group_accordion_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="card_group_accordion_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_group_accordion_items card_count_{{ card_count }}" {% if title %} aria-label="{{ title }}" {% endif %}>
{% for item in items %}
<li class="card_group_accordion_item">
{% if item.image %}
{% if item.href %}
<a href="{{ item.href }}">
<figure class="card_group_accordion_item_figure">
{% include '@partial-image' with {
class: 'card_group_accordion_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
</a>
{% else %}
<figure class="card_group_accordion_item_figure">
{% include '@partial-image' with {
class: 'card_group_accordion_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
{% endif %}
{% endif %}
<div class="card_group_accordion_item_body">
{% if item.title %}
{% if title %}
<h3 class="card_group_accordion_item_title">
{% else %}
<h2 class="card_group_accordion_item_title">
{% endif %}
{% if item.href %}
<a class="card_group_accordion_item_title_link" href="{{ item.href }}">
<span class="card_group_accordion_item_title_label">{{ item.title }}</span>
</a>
{% else %}
<span class="card_group_accordion_item_title_label">{{ item.title }}</span>
{% endif %}
{% if title %}
</h3>
{% else %}
</h2>
{% endif %}
{% elseif item.stat %}
{% if title %}
<h3 class="card_group_accordion_item_stat">
{% else %}
<h2 class="card_group_accordion_item_stat">
{% endif %}
<span class="card_group_accordion_item_stat_figure">{{ item.stat.figure }}</span>
<span class="card_group_accordion_item_stat_context">{{ item.stat.context }}</span>
{% if title %}
</h3>
{% else %}
</h2>
{% endif %}
{% endif %}
<div class="card_group_accordion_item_description">
<p>{{ item.description }}</p>
</div>
<div class="card_group_accordion_items_wrap">
<div class="card_group_accordion__accordion_items">
{% for item in item.accordionItems %}
<div class="js-accordion-item {{ loop.parent.loop.index }}-{{ id }}-{{ loop.index }} card_group_accordion_accordion_item">
{% if item.title %}
<h3 class="card_group_accordion_accordion_item_heading">
{% else %}
<h2 class="card_group_accordion_accordion_item_heading">
{% endif %}
<button class="js-accordion-swap js-swap card_group_accordion_accordion_item_button" data-swap-target=".{{ loop.parent.loop.index }}-{{ id }}-{{ loop.index }}" {% if grouped %} data-swap-group="{{ group_id }}" {% endif %}>
<span class="card_group_accordion_accordion_item_heading_inner">
<span class="card_group_accordion_accordion_item_heading_label">
<span class="card_group_accordion_accordion_item_heading_title">{{ item.title }}</span>
</span>
<span class="card_group_accordion_accordion_item_heading_icon"></span>
</span>
</button>
{% if item.title %}
</h3>
{% else %}
</h2>
{% endif %}
<div class="js-accordion-content card_group_accordion_accordion_item_content typography" aria-label="{{ item.title|e('html_attr') }}">
{{ item.detail }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
No notes defined.