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 %}
{# If there's no social items add more bottom padding. #}
<div class="card{{ not items ? ' card--bottom-padding' }} {{ 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">
<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>
</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. #}
{%
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>
</div>