<div class="campaign_pillars timer js-campaign-pillars" style="--timer: 4s" data-timer="4" data-checkpoint-intersect="center-top">
<div class="campaign_pillars_controls">
<div class="campaign_pillars_header">
<h2 class="campaign_pillars_title">Campaign Priorities</h2>
</div>
<div class="fs-row campaign_pillars_controls_row">
<div class="fs-cell campaign_pillars_controls_cell">
<div class="campaign_pillars_controls_inner">
<ul class="campaign_pillars_controls_list">
<li class="campaign_pillars_controls_item">
<button class="campaign_pillars_control_button js-swap js-campaign-control-button" data-id="1" data-swap-target=".campaign_pillar_1" data-swap-options='{"collapse": false}' data-swap-group="campaign" data-swap-active="true">
<span class="campaign_pillars_control_button_label">National <br>Treasure</span>
</button>
<button class="campaign_pillars_pause_button js-campaign-pause-button">
<span class="campaign_pillars_pause_button_label">Pause</span>
<span class="campaign_pillars_pause_button_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</li>
<li class="campaign_pillars_controls_item">
<button class="campaign_pillars_control_button js-swap js-campaign-control-button" data-id="2" data-swap-target=".campaign_pillar_2" data-swap-options='{"collapse": false}' data-swap-group="campaign">
<span class="campaign_pillars_control_button_label">Where Civic <br>Meets Sacred</span>
</button>
<button class="campaign_pillars_pause_button js-campaign-pause-button">
<span class="campaign_pillars_pause_button_label">Pause</span>
<span class="campaign_pillars_pause_button_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</li>
<li class="campaign_pillars_controls_item">
<button class="campaign_pillars_control_button js-swap js-campaign-control-button" data-id="3" data-swap-target=".campaign_pillar_3" data-swap-options='{"collapse": false}' data-swap-group="campaign">
<span class="campaign_pillars_control_button_label">A House of Prayer <br>for All People</span>
</button>
<button class="campaign_pillars_pause_button js-campaign-pause-button">
<span class="campaign_pillars_pause_button_label">Pause</span>
<span class="campaign_pillars_pause_button_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</li>
<li class="campaign_pillars_controls_item">
<button class="campaign_pillars_control_button js-swap js-campaign-control-button" data-id="4" data-swap-target=".campaign_pillar_4" data-swap-options='{"collapse": false}' data-swap-group="campaign">
<span class="campaign_pillars_control_button_label">Day-to-Day <br>Operations</span>
</button>
<button class="campaign_pillars_pause_button js-campaign-pause-button">
<span class="campaign_pillars_pause_button_label">Pause</span>
<span class="campaign_pillars_pause_button_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="campaign_pillars_body" aria-live="polite">
<div class="fs-row">
<div class="fs-cell">
<div class="campaign_pillars_body_inner">
<div class="campaign_pillar campaign_pillar_1 js-campaign-pillar-item active_pillar">
<h3 class="campaign_pillar_title">National <br>Treasure</h3>
<span class="campaign_pillar_intro">The Cathedral is both an architectural masterpiece in the heart of the nation’s capital and the sacred repository for the emotions of an entire country in times of joy and sorrow.</span>
<div class="campaign_pillar_wrapper">
<div class="campaign_pillar_content">
<figure class="campaign_pillar_figure">
<img class="campaign_pillar_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/3 980w, https://images.fastspot.com/washington-national-cathedral/740x494/3 740w, https://images.fastspot.com/washington-national-cathedral/500x334/3 500w, https://images.fastspot.com/washington-national-cathedral/300x200/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_description">This is a space where everyone is welcomed, every story is honored and every life is valued. In the grand expanse of our nation’s capital, the Cathedral stands apart as holy ground, consecrated by generations of prayers, tears, laughter and silence. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
<a href="#" class="campaign_pillar_link">
<span class="campaign_pillar_link_inner">
<span class="campaign_pillar_link_label">More About This Priority</span>
</span>
</a>
</div>
<div class="campaign_pillar_sidebar">
<div class="campaign_pillar_sidebar_1">
<figure class="campaign_pillar_sidebar_figure">
<img class="campaign_pillar_sidebar_image" srcset="https://images.fastspot.com/washington-national-cathedral/500x334/6 500w, https://images.fastspot.com/washington-national-cathedral/300x200/6 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_sidebar_heading">Restoration Stories</span>
<a href="#" class="campaign_pillar_sidebar_link">
<span class="campaign_pillar_sidebar_title">A Life’s Work Dedicated to Cathedral Stone</span>
</a>
</div>
<div class="campaign_pillar_sidebar_2">
<span class="campaign_pillar_sidebar_heading">How to Help</span>
<span class="campaign_pillar_sidebar_description"><strong>Damage</strong> <em>remains</em> from the <a href="#">2011 earthquake</a>, and your partnership is needed to finish repairs. This Cathedral knows what it means to be broken, and yet we also know what it looks like to rebuild and renew. <div class="wysiwyg_button_wrapper"><a class="wysiwyg_button" href="#">Give Now</a></div></span>
</div>
</div>
</div>
</div>
<div class="campaign_pillar campaign_pillar_2 js-campaign-pillar-item">
<h3 class="campaign_pillar_title">Where Civic <br>Meets Sacred</h3>
<span class="campaign_pillar_intro">Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.</span>
<div class="campaign_pillar_wrapper">
<div class="campaign_pillar_content">
<figure class="campaign_pillar_figure">
<img class="campaign_pillar_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/7 980w, https://images.fastspot.com/washington-national-cathedral/740x494/7 740w, https://images.fastspot.com/washington-national-cathedral/500x334/7 500w, https://images.fastspot.com/washington-national-cathedral/300x200/7 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/7" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_description">This is a space where everyone is welcomed, every story is honored and every life is valued. In the grand expanse of our nation’s capital, the Cathedral stands apart as holy ground, consecrated by generations of prayers, tears, laughter and silence. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
<a href="#" class="campaign_pillar_link">
<span class="campaign_pillar_link_inner">
<span class="campaign_pillar_link_label">More About This Priority</span>
</span>
</a>
</div>
<div class="campaign_pillar_sidebar">
<div class="campaign_pillar_sidebar_1">
<figure class="campaign_pillar_sidebar_figure">
<img class="campaign_pillar_sidebar_image" srcset="https://images.fastspot.com/washington-national-cathedral/500x334/6 500w, https://images.fastspot.com/washington-national-cathedral/300x200/6 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_sidebar_heading">Restoration Stories</span>
<a href="#" class="campaign_pillar_sidebar_link">
<span class="campaign_pillar_sidebar_title">A Life’s Work Dedicated to Cathedral Stone</span>
</a>
</div>
<div class="campaign_pillar_sidebar_2">
<figure class="campaign_pillar_sidebar_figure">
<img class="campaign_pillar_sidebar_image" srcset="https://images.fastspot.com/washington-national-cathedral/500x334/6 500w, https://images.fastspot.com/washington-national-cathedral/300x200/6 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/6" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_sidebar_heading">Restoration Stories</span>
<span class="campaign_pillar_sidebar_title">A Life’s Work Dedicated to Cathedral Stone</span>
</div>
</div>
</div>
</div>
<div class="campaign_pillar campaign_pillar_3 js-campaign-pillar-item">
<h3 class="campaign_pillar_title">A House of Prayer <br>for All People</h3>
<span class="campaign_pillar_intro">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
<div class="campaign_pillar_wrapper">
<div class="campaign_pillar_content">
<figure class="campaign_pillar_figure">
<img class="campaign_pillar_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/8 980w, https://images.fastspot.com/washington-national-cathedral/740x494/8 740w, https://images.fastspot.com/washington-national-cathedral/500x334/8 500w, https://images.fastspot.com/washington-national-cathedral/300x200/8 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_description">This is a space where everyone is welcomed, every story is honored and every life is valued. In the grand expanse of our nation’s capital, the Cathedral stands apart as holy ground, consecrated by generations of prayers, tears, laughter and silence. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
<a href="#" class="campaign_pillar_link">
<span class="campaign_pillar_link_inner">
<span class="campaign_pillar_link_label">More About This Priority</span>
</span>
</a>
</div>
<div class="campaign_pillar_sidebar">
<div class="campaign_pillar_sidebar_1">
<span class="campaign_pillar_sidebar_heading">How to Help</span>
<span class="campaign_pillar_sidebar_description">Damage remains from the 2011 earthquake, and your partnership is needed to finish repairs. This Cathedral knows what it means to be broken, and yet we also know what it looks like to rebuild and renew.</span>
</div>
<div class="campaign_pillar_sidebar_2">
<span class="campaign_pillar_sidebar_heading">How to Help</span>
<span class="campaign_pillar_sidebar_description">Damage remains from the 2011 earthquake, and your partnership is needed to finish repairs. This Cathedral knows what it means to be broken, and yet we also know what it looks like to rebuild and renew.</span>
</div>
</div>
</div>
</div>
<div class="campaign_pillar campaign_pillar_4 js-campaign-pillar-item">
<h3 class="campaign_pillar_title">Day-to-Day <br>Operations</h3>
<span class="campaign_pillar_intro">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
<div class="campaign_pillar_wrapper">
<div class="campaign_pillar_content">
<figure class="campaign_pillar_figure">
<img class="campaign_pillar_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/8 980w, https://images.fastspot.com/washington-national-cathedral/740x494/8 740w, https://images.fastspot.com/washington-national-cathedral/500x334/8 500w, https://images.fastspot.com/washington-national-cathedral/300x200/8 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/8" alt="" loading="lazy" width="300" height="200">
</figure>
<span class="campaign_pillar_description">This is a space where everyone is welcomed, every story is honored and every life is valued. In the grand expanse of our nation’s capital, the Cathedral stands apart as holy ground, consecrated by generations of prayers, tears, laughter and silence. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
<a href="#" class="campaign_pillar_link">
<span class="campaign_pillar_link_inner">
<span class="campaign_pillar_link_label">More About This Priority</span>
</span>
</a>
</div>
<div class="campaign_pillar_sidebar">
<div class="campaign_pillar_sidebar_1">
<span class="campaign_pillar_sidebar_heading">How to Help</span>
<span class="campaign_pillar_sidebar_description">Damage remains from the 2011 earthquake, and your partnership is needed to finish repairs. This Cathedral knows what it means to be broken, and yet we also know what it looks like to rebuild and renew.</span>
</div>
<div class="campaign_pillar_sidebar_2">
<span class="campaign_pillar_sidebar_heading">How to Help</span>
<span class="campaign_pillar_sidebar_description">Damage remains from the 2011 earthquake, and your partnership is needed to finish repairs. This Cathedral knows what it means to be broken, and yet we also know what it looks like to rebuild and renew.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="campaign_pillars timer js-campaign-pillars" style="--timer: {{ timer }}s" data-timer="{{ timer }}" data-checkpoint-intersect="center-top">
<div class="campaign_pillars_controls">
<div class="campaign_pillars_header">
<h2 class="campaign_pillars_title">Campaign Priorities</h2>
</div>
<div class="fs-row campaign_pillars_controls_row">
<div class="fs-cell campaign_pillars_controls_cell">
<div class="campaign_pillars_controls_inner">
<ul class="campaign_pillars_controls_list">
{% for pillar in pillars %}
<li class="campaign_pillars_controls_item">
<button class="campaign_pillars_control_button js-swap js-campaign-control-button" data-id="{{ loop.index }}" data-swap-target=".campaign_pillar_{{ loop.index }}" data-swap-options='{"collapse": false}' data-swap-group="campaign"{% if loop.index == 1 %} data-swap-active="true"{% endif %}>
<span class="campaign_pillars_control_button_label">{{ pillar.title }}</span>
</button>
<button class="campaign_pillars_pause_button js-campaign-pause-button">
<span class="campaign_pillars_pause_button_label">Pause</span>
<span class="campaign_pillars_pause_button_icon">{{ icon("pause") }}</span>
</button>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="campaign_pillars_body" aria-live="polite">
<div class="fs-row">
<div class="fs-cell">
<div class="campaign_pillars_body_inner">
{% for pillar in pillars %}
<div class="campaign_pillar campaign_pillar_{{ loop.index }} js-campaign-pillar-item{% if loop.index == 1 %} active_pillar{% endif %}">
<h3 class="campaign_pillar_title">{{ pillar.title }}</h3>
<span class="campaign_pillar_intro">{{ pillar.intro }}</span>
<div class="campaign_pillar_wrapper">
<div class="campaign_pillar_content">
<figure class="campaign_pillar_figure">
{% include '@partial-image' with {
class: 'campaign_pillar',
alt: '',
image: pillar.feature.image,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
<span class="campaign_pillar_description">{{ pillar.feature.description }}</span>
{% if pillar.feature.link %}
{% include '@partial-link' with {
title: pillar.feature.link.label,
url: pillar.feature.link.url,
class: 'campaign_pillar',
js: false,
icon: '',
aria: '',
nowrap: false
} %}
{% endif %}
</div>
<div class="campaign_pillar_sidebar">
{% if pillar.sidebar_1 %}
<div class="campaign_pillar_sidebar_1">
{% if pillar.sidebar_1.image %}
<figure class="campaign_pillar_sidebar_figure">
{% include '@partial-image' with {
class: 'campaign_pillar_sidebar',
alt: '',
image: pillar.sidebar_1.image,
loading: 'lazy',
sources: [
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
{% endif %}
<span class="campaign_pillar_sidebar_heading">{{ pillar.sidebar_1.heading }}</span>
{% if pillar.sidebar_1.title %}
<a href="#" class="campaign_pillar_sidebar_link">
<span class="campaign_pillar_sidebar_title">{{ pillar.sidebar_1.title }}</span>
</a>
{% endif %}
{% if pillar.sidebar_1.description %}
<span class="campaign_pillar_sidebar_description">{{ pillar.sidebar_1.description }}</span>
{% endif %}
</div>
{% endif %}
{% if pillar.sidebar_2 %}
<div class="campaign_pillar_sidebar_2">
{% if pillar.sidebar_2.image %}
<figure class="campaign_pillar_sidebar_figure">
{% include '@partial-image' with {
class: 'campaign_pillar_sidebar',
alt: '',
image: pillar.sidebar_2.image,
loading: 'lazy',
sources: [
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
{% endif %}
<span class="campaign_pillar_sidebar_heading">{{ pillar.sidebar_2.heading }}</span>
{% if pillar.sidebar_2.title %}
<span class="campaign_pillar_sidebar_title">{{ pillar.sidebar_2.title }}</span>
{% endif %}
{% if pillar.sidebar_2.description %}
<span class="campaign_pillar_sidebar_description">{{ pillar.sidebar_2.description }}</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
No notes defined.