Form CTA
This is the form-cta component which appears on the home page. This component allows the user to toggle open and closed the different elements. There are three instances of this: Donate, Subscribe and Get Local.
Requires:
dist/js/toggle-class-es6.js
Donate Donate
At Habitat for Humanity International, we build. We build because we believe that everyone, everywhere, should have a healthy, affordable place to call home.
Get involved Get involved
Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.
Subscribe Subscribe
Get the latest news on Habitat projects, volunteer opportunities, advocacy and other ways to get involved.
{{ attach_library('h4h_theme/form-cta') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% for item in items %}
<div id="{{ item.id }}" class="form-cta {{ item.class }}">
{% if item.title %}
<h2 class="form-cta__heading">
{{ icons.get(item.icon, 'form-cta__icon') }}
<a href="#{{ item.id }}" data-toggle-class="is-open" data-target="#{{ item.id }}" class="form-cta__trigger">{{ item.title }}</a>
<span class="form-cta__title">{{ item.title }}</span>
</h2>
{% endif %}
<div class="form-cta__collapsible">
<div class="form-cta__bottom">
<div class="form-cta__text">{{ item.desc }}</div>
<div class="form-cta__form">
{% if item.nested_include %}
{% include item.nested_include.path with item.nested_include.data only %}
{% else %}
{{ item.form_data }}
{% endif %}
</div>
{% if item.suffix %}
<div class="form-cta__suffix">{{ item.suffix }}</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}