Card
Card component renders on the Affiliates page with data from the feed.
Chicago Habitat for Humanity with a Really Long Name Going to a Second Line
2201 South Halstead, Suite 1251, Chicago, IL 60608
{{ attach_library('h4h_theme/card') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% set phys_addr %}
<div class="card__map-pin-icon">
{{ icons.get('map') }}
</div>
<div class="card__address">
{{ address|render ? address : "(N/A)" }}
</div>
{% endset %}
{% set mail_addr %}
<div class="card__map-pin-icon">
{{ icons.get('map') }}
</div>
<div class="card__address">
{{ mailing_address|render ? mailing_address : "(N/A)" }}
</div>
{% endset %}
{% set tabs_content = [
{
id: "address",
body: phys_addr
},
{
id: "mailing",
body: mail_addr
}
] %}
{# If there's no social items add more bottom padding. #}
<div class="card{{ not items ? ' card--bottom-padding' }} {{ location ? 'card--location' }} {{ modifier_class }}">
<div class="card__content-wrapper">
{% include '@h4h_theme/breadcrumb/breadcrumb.twig' with {
modifier_class: 'breadcrumb--nopadding breadcrumb--reversed',
'breadcrumb': breadcrumb
} only
%}
<h1 class="card__heading">{{ heading }}</h1>
<div class="card__content-wrapper--bottom">
{% if location %}
<div class="card__column card__column2">
{% if website.src|default() %}
<div class="card__website">
{{ icons.get('website', 'card__icon card__icon-website') }}<a href="{{ website.src }}">{{ website.title }}</a>
</div>
{% endif %}
{% if email|default() %}
<div class="card__email">{{ icons.get('mail', 'card__icon card__icon-email') }}<a href="mailto:{{ email }}">{{ email }}</a>
</div>
{% endif %}
{% if phone|default() %}
<div class="card__phone">{{ icons.get('phone', 'card__icon card__icon-phone') }}{{ phone }}</div>
{% endif %}
</div>
<div class="card__column card__column1">
{%
include '@h4h_theme/tabs/tabs.twig' with {
title: content.field_title,
heading_level: content.field_heading_level.0['#markup'],
tabs: [
{
text: "Physical address",
link: "#address"
},
{
text: "Mailing address",
link: "#mailing"
}
],
tabs_content: tabs_content,
img_url: background_image_url,
modifier_class: "tabs--white",
} only
%} </div>
{% else %}
<div class="card__column card__column1">
<div class="card__map-pin-icon">
{{ icons.get('map') }}
</div>
<div class="card__address">
{{ address }}
</div>
</div>
<div class="card__column card__column2">
{% if website.src|default() %}
<div class="card__website">
{{ icons.get('website', 'card__icon card__icon-website') }}<a href="{{ website.src }}">{{ website.title }}</a>
</div>
{% endif %}
{% if email|default() %}
<div class="card__email">{{ icons.get('mail', 'card__icon card__icon-email') }}<a href="mailto:{{ email }}">{{ email }}</a>
</div>
{% endif %}
{% if phone|default() %}
<div class="card__phone">{{ icons.get('phone', 'card__icon card__icon-phone') }}{{ phone }}</div>
{% endif %}
</div>
{% endif %}
</div>
{% include '@h4h_theme/social-bar/social-bar.twig' with {
modifier_class: 'card__social-bar',
'items': items
} only
%}
</div>
{# If there's no image url provided, set a default. #}
{% if not location %}
{%
set img_url = img_url ? img_url : '/themes/custom/h4h_theme/src/components/card/assets/affiliate-default.jpg'
%}
<div class="card__image" style="background-image: url('{{ img_url }}')"></div>
{% endif %}
</div>