Band
This component pulls together details of an event and displays them within a band. Use this component by leveraging twig embeds and overriding the blocks.
Home construction
Help build new homes with those in need.
March 31, 2017 - April 9, 2017
10 days
Trip cost: US$2,255
{{ attach_library('h4h_theme/band') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="band">
{% block top %}
{% endblock %}
{% block content %}
<div class="band__content l-three-up">
{% for item in items %}
<div class="l-three-up__col">
<div class="band__item">
<h2 class="band__title">
{%- if item.title.icon -%}
<span class="band__icon trip-icon--shrinking trip-icon--{{ item.title.icon }}"></span>
{%- endif -%}
{%- if item.title.prefix %}
<span class="band__prefix">{{ item.title.prefix }}</span>
{% endif -%}
{{ item.title.text|raw }}
</h2>
{% if item.info.text %}
{% include '@h4h_theme/info/info.twig' with {
'label': item.info.text,
'url': item.info.link
} only
%}
{% endif %}
{% if item.desc %}
<div class="band__desc">{{ item.desc|raw }}</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block bottom %}
{% endblock %}
</section>