<!-- Card Group - States -->
<div class="js-anim card_states_group component_theme_blue_navy">
<div class="card_states_group_header">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="card_states_group_header_inner">
<h2 class="card_states_group_title">More State Summaries</h2>
</div>
</div>
</div>
</div>
<div class="js-card-row card_states_group_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_states_group_items" aria-label="More State Summaries">
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_blue_brand" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-0">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">AL - CO</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">AL - CO</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-0">
<ul class="card_states_list" aria-label="AL - CO">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Alabama</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Alaska</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Arizona</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Arkansas</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">California</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Colorado</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_orange_gem" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-1">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">CO - HA</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">CO - HA</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-1">
<ul class="card_states_list" aria-label="CO - HA">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Connecticut</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Delaware</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">District Of Columbia</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Florida</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Georgia</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Hawaii</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_plum_gem" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-2">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">ID - KE</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">ID - KE</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-2">
<ul class="card_states_list" aria-label="ID - KE">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Idaho</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Illinois</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Indiana</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Iowa</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Kansas</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Kentucky</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_green_wireframe" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-3">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">LO - MI</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">LO - MI</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-3">
<ul class="card_states_list" aria-label="LO - MI">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Louisiana</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Maine</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Maryland</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Massachusetts</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Michigan</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Minnesota</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_green_gem" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-4">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">MI - NE</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">MI - NE</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-4">
<ul class="card_states_list" aria-label="MI - NE">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Mississippi</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Missouri</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Montana</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Nebraska</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Nevada</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">New Hampshire</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_blue_spirit" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-5">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">NE - OH</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">NE - OH</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-5">
<ul class="card_states_list" aria-label="NE - OH">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">New Jersey</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">New Mexico</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">New York</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">North Carolina</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">North Dakota</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Ohio</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_purple_gem" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-6">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">OK - SO</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">OK - SO</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-6">
<ul class="card_states_list" aria-label="OK - SO">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Oklahoma</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Oregon</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Pennsylvania</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Rhode Island</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">South Carolina</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">South Dakota</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_blue_gem" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-7">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">TE - WA</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">TE - WA</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-7">
<ul class="card_states_list" aria-label="TE - WA">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Tennessee</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Texas</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Utah</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Vermont</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Virginia</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Washington</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
<li class="card_states_group_card">
<!-- Links Card -->
<div class="card card_states card_type_contained card_theme_blue_brand" 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">
<button class="js-card-states-toggle js-states-card-toggle js-swap card_states_toggle button_toggle" data-swap-target=".js-card-states-body-8">
<span class="card_states_toggle_inner_default card_states_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="card_states_toggle_label_default card_states_toggle_label button_toggle_label_default button_toggle_label">WE - WY</span>
<span class="card_states_toggle_icon_default card_states_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="card_states_toggle_inner_active card_states_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="card_states_toggle_label_active card_states_toggle_label button_toggle_label_active button_toggle_label">WE - WY</span>
<span class="card_states_toggle_icon_active card_states_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
</button>
</h3>
</div>
<div class="card_states_body js-card-states-body js-card-states-body-8">
<ul class="card_states_list" aria-label="WE - WY">
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">West Virginia</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Wisconsin</span>
</a>
</li>
<li class="card_states_item">
<a href="#" class="card_states_item_link">
<span class="card_states_item_link_label">Wyoming</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Links Card -->
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Card Group - States -->
{#
{% include '@component-card-group' with {
theme: 'theme',
group_title: 'Title',
group_title_visible: true,
group_description: 'Description',
cards: [
{
card_type: 'solution',
item: {
}
}
]
} %}
#}
{% set groups = states_lookup|batch(6) %}
{% set theme_lookup = [
"blue_brand",
"orange_gem",
"plum_gem",
"green_wireframe",
"green_gem",
"blue_spirit",
"purple_gem",
"blue_gem"
] %}
<!-- Card Group - States -->
<div class="js-anim card_states_group component_theme_blue_navy">
<div class="card_states_group_header">
<div class="fs-row">
<div class="fs-cell fs-lg-7">
<div class="card_states_group_header_inner">
<h2 class="card_states_group_title">{{ group_title|default('More State Summaries') }}</h2>
{% if group_description %}
<div class="card_states_group_description">
<p>{{ group_description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="js-card-row card_states_group_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="card_states_group_items" aria-label="{{ group_title }}">
{% for group in groups %}
<li class="card_states_group_card">
{% include '@partial-states-card' with {
group: group,
type: 'contained',
theme: theme_lookup[loop.index0 % theme_lookup|length]
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END: Card Group - States -->
No notes defined.