<!-- Error rendering component -->
<!-- TypeError: Cannot read properties of undefined (reading 'length') -->
<!-- Error: TypeError: Cannot read properties of undefined (reading 'length')
    at /home/runner/work/jhu-soe/jhu-soe/wp-content/themes/primary/frontend/node_modules/@frctl/twig/src/adapter.js:156:24
    at new Promise (<anonymous>)
    at TwigAdapter.render (/home/runner/work/jhu-soe/jhu-soe/wp-content/themes/primary/frontend/node_modules/@frctl/twig/src/adapter.js:134:16)
    at ComponentSource._renderVariant (/home/runner/work/jhu-soe/jhu-soe/wp-content/themes/primary/frontend/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/home/runner/work/jhu-soe/jhu-soe/wp-content/themes/primary/frontend/node_modules/co/index.js:65:19) -->
{#
	{% include '@partial-links-card' with {
		item: {
			type: 'default',
			title: 'Title',
			items: [
				{
					url: '#',
					label: 'Label'
				}
			]
		}
	} %}
#}

{% set title = [
	group|first.title|slice(0, 2),
	group|last.title|slice(0, 2)
]|join(' - ')|upper %}

<!-- Links Card -->
<div class="card card_states card_type_{{ type ?: 'default' }} card_theme_{{ theme ?: 'default' }}" data-swap-group="card_states_swap_group">
	<div class="card_inner card_states_inner">
		<div class="card_states_grid">
			<div class="card_states_header">
				<h3 class="card_states_title">
					{% include '@partial-button-toggle' with {
						class: 'card_states',
						js_class:'js-states-card-toggle',
						title: title,
						icon: 'chevron_down',
						active_title: title,
						active_icon: 'chevron_down',
						swap_target: '.js-card-states-body-' ~ loop.index0,
						swap_link: '',
						aria: '',
						nowrap: false
					} %}
				</h3>
			</div>
			<div class="card_states_body js-card-states-body js-card-states-body-{{ loop.index0 }}">
				<ul class="card_states_list" aria-label="{{ title }}">
					{% for item in group %}
						<li class="card_states_item">
							<a href="{{ item.url ?: '#' }}" class="card_states_item_link">
								<span class="card_states_item_link_label">{{ item.title }}</span>
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Links Card -->

No notes defined.