Accordion
This component is a Accordion. It allows the user to
click the title and toggle open and closed the information.
The accordion can be rendered starting open if the item variable expanded is
set to true.
The container title text is also variable. The level variable need to be
passed a heading value ie 3, else it will default to h2.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/toggle-class.bundle.js
Accordion heading (optional)
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
{#
/**
* @file
* accordion component.
*/
#}
{{ attach_library('h4h_theme/accordion') }}
{{ attach_library('h4h_theme/basic-text') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="basic-text">
{% if heading %}
<h{{ heading_level ?: '2' }} class="accordion__heading">{{ heading }}</h{{ heading_level ?: '2' }}>
{% endif %}
{% for item in accordion_items %}
<section class="accordion {{accordion_type_arrow ? "accordion-type-arrow"}}" role="presentation">
<div>
<dl class="accordion__legend">
<dt class="accordion__title {{ item.expanded ? 'is-active' : '' }}" data-toggle-class="is-open" data-target=".{{ item.selectorClass }}">
{% if accordion_type_arrow %}
{{ icons.get('chevronright', 'icon accordion__icon accordion__icon--arrow') }}
{% endif %}
<button class="accordion__trigger" aria-controls="{{ item.selectorClass }}">
{% if item.inactive_title %}
<span class="active-title">{{ item.title }}</span>
<span class="inactive-title">{{ item.inactive_title }}</span>
{% else %}
{{ item.title }}
{% endif %}
</button>
{% if not accordion_type_arrow %}
{{ icons.get('plusminus', 'icon accordion__icon') }}
{% endif %}
</dt>
<dd class="accordion__wrapper {{ item.selectorClass }}{{ item.expanded ? ' is-open' : '' }}">
<div class="accordion__content">
{{ item.children }}
</div>
</dd>
</dl>
</div>
</section>
{% endfor %}
</div>
Address Listing
The address listing component is used to display search results for affiliates or Restores. It's not used within the main site search results.
Pickens County HFH
Clemson, SC{{ attach_library('h4h_theme/address-listing') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% set has_address = (physical_address.0.address_line1['#value'] is not empty) or (physical_address.0.address_line2['#value'] is not empty) %}
<article class="address-listing{{ type == 'restore_store' ? " address-listing__restore" }}">
<div class="address-listing__header">
<{{ heading }} class="address-listing__heading">
{# If this is a Restore don't link the title to it's node. #}
{% if type == 'restore_store' %}
{{ label }}
{% else %}
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
{% endif %}
</{{ heading }}>
{% if city and state and type == 'restore_store' %}
<span class="address-listing__right">
{{ city }}, {{ state }}
</span>
{% endif %}
</div>
<div class="address-listing__body-container">
<div class="address-listing__items">
{% if website %}
<div class="address-listing__item">
{{ icons.get('website', 'icon--small-website icon--oslo-gray') }} {{ website }}
</div>
{% endif %}
{% if email %}
<div class="address-listing__item">
{{ icons.get('mail', 'icon--small-mail icon--oslo-gray') }}<a href="mailto:{{ email }}"> {{ email }}</a>
</div>
{% endif %}
{% if phone %}
<div class="address-listing__item">
{{ icons.get('phone', 'icon--small-phone icon--oslo-gray') }} {{ phone }}
</div>
{% endif %}
</div>
</div>
<div class="address-listing__body-container">
<span class="address-listing__address-header">{{ "Physical address"|t}}</span>
{% if (physical_address|render) and (has_address) %}
{{ physical_address|raw }}
{% else %}
({{ "N/A"|t}})
{% endif %}
</div>
<div class="address-listing__body-container">
{% if type != 'restore_store' %}
<span class="address-listing__address-header">{{ "Mailing address"|t}}</span>
{% if mailing_address|render %}
{{ mailing_address|raw }}
{% else %}
({{ "N/A"|t}})
{% endif %}
{% endif %}
</div>
</article>
Article Meta
The Article Meta component is a set of social media and related links that appears on the Stories page.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="article-meta">
<div class="article-meta__author article-meta__section">
<div class="article-meta__title article-meta__learn-more--title">{{ author.title }}</div>
{%
include '@h4h_theme/info-plain/info-plain.twig' with {
label: author.label,
} only
%}
</div>
<div class="article-meta__team-leader article-meta__section">
<div class="article-meta__title article-meta__team-leader--title">{{ leading.title }}</div>
{%
include '@h4h_theme/info/info.twig' with {
label: leading.label,
url: leading.url,
icon: leading.icon
} only
%}
</div>
<div class="article-meta__more-stories article-meta__section">
<div class="article-meta__title article-meta__more-stories--title">{{ more_stories.title }}</div>
<div class="article-meta__more-stories--links">
{%
include '@h4h_theme/tags/tags.twig' with {
items: more_stories.items
} only
%}
</div>
</div>
<div class="article-meta__learn-more article-meta__section">
<div class="article-meta__title article-meta__learn-more--title">{{ learn_more.title }}</div>
<div class="article-meta__learn-more--links">
{%
include '@h4h_theme/tags/tags.twig' with {
items: learn_more.items
} only
%}
</div>
</div>
<div class="article-meta__share-this article-meta__section">
<div class="article-meta__title article-meta__share-this--title">{{ share.title }}</div>
{%
include '@h4h_theme/share/share.twig' with {
items: share.items
} only
%}
</div>
</div>
Aside
This is the Aside component which appears on donation pages. It contains three sets of links for online security, good stewardship, and links for donations
Safe and secure location
Good stewardship
Other ways to donate
{{ attach_library('theme_name/aside') }}
<section class="aside">
<div class="aside__secure aside__section">
<h2 class="aside__heading">{{ secure_title }}</h2>
<div class="aside-secure__img">
<a href="{{ secure_image.link }}">
<img src="{{ secure_image.url }}" alt="secure_image.alt" >
</a>
</div>
</div>
<div class="aside__stewardship aside__section">
<h2 class="aside__heading">{{ stewardship_title }}</h2>
<div class="aside-stewardship__img">
<a href="{{ stewardship_image.link }}">
<img src="{{ stewardship_image.url }}" alt="{{ stewardship_image.alt }}" >
</a>
<ul>
{% for item in stewardship_links.items %}
<li><a href="{{ item.link }}">{{ item.title }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div class="aside__other aside__section">
<h2 class="aside__heading">{{ other_title }}</h2>
<ul>
{% for item in other_links.items %}
<li><a href="{{ item.link }}">{{ item.title }}</a></li>
{% endfor %}
</ul>
</div>
</section>
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
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>
Basic Row
The Basic Row is used for rows of data with striping. If a more complicated
structure is needed, basic-row--odd and basic-row--even modifiers are available.
Example:
<div class="basic-row basic-row--even">
<div class="basic-row__label">Label</div>
<div class="basic-row__data">Title</div>
</div>
<div class="basic-row basic-row--odd">
<div class="basic-row__label">Label</div>
<div class="basic-row__data">Title</div>
</div>
{{ attach_library('h4h_theme/basic-row') }}
{% for item in items %}
<div class="basic-row">
<div class="basic-row__label">{{ item.label }}</div>
<div class="basic-row__data">{{ item.title }}</div>
</div>
{% endfor %}
Basic Text
The basic text component is used to restrict basic text styles.
Note:
Heading classes can be applied to any heading element to give it the correct size while keeping the correct semantic element. I.E. "I need an h3 but it has to look like an h4".
.basic-text-h2.basic-text-h3.basic-text-h4.basic-text-h5.basic-text-h6
Additional modifier classes:
.basic-text-margin-smBumps the bottom margin down by half.
This is an h2
Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.
- Etiam ac mauris vitae ante vulputate convallis non eu orci.
This is an h3
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.1 Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.
- Etiam ac mauris vitae ante vulputate convallis non eu orci.
This is an h4
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod2. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
This is an h5
SEtiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.
This is an h6
Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
{{ attach_library('h4h_theme/basic-text') }}
<div class="basic-text">
<h2 class="basic-text__heading">{{ heading_2 }}</h2>
<p>{{ paragraph_1 }}</p>
<ul>
{% for item in unordered_list.items %}
<li>{{ item.desc }}</li>
{% endfor %}
</ul>
<h3>{{ heading_3 }}</h3>
<p>{{ paragraph_2 }}</p>
<ol>
{% for item in unordered_list.items %}
<li>{{ item.desc }}</li>
{% endfor %}
</ol>
<h4>{{ heading_4 }}</h4>
<p>{{ paragraph_3 }}</p>
<h5>{{ heading_5 }}</h5>
<p>{{ paragraph_4 }}</p>
<h6>{{ heading_6 }}</h6>
<p>{{ paragraph_1 }}</p>
</div>
Blockquote
The following options should be available on blockquotes, with each adding the appropriate modifier classes to the container:
- Color scheme. This applies to the containing page; all blockquotes on a page must use the same
color scheme. Options:
- Black text on off-white (default; no classes added)
- White text on blue
.blockquote--color-white-on-blue - Black text on green
.blockquote--color-black-on-green - Blue text on white
.blockquote--color-blue-on-white - Blue text on white with top bar
.blockquote--color-blue-on-white-with-bar
- Typeface. This also applies to the page; all blockquotes on a page must use the same font-family.
Options:
- Sans-serif (default; no classes added)
- Serif
.blockquote--font-serif
- Font size. This can be different for each blockquote. Options:
- Normal (default; no classes added)
- Smaller
.blockquote--font-size-small
There should also be a boolean checkbox, checked by default, to Show Twitter link. This works
through a template variable rather than through a normal modifier class. All the examples below
have this option set to true.
{{ attach_library('h4h_theme/blockquote') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="blockquote {{ modifier_class }}{{ show_twitter is not empty ? ' blockquote--show-twitter' }}">
<blockquote>{{ quote }}
</blockquote>
{% if credit %}
<cite>— {{ credit }}
</cite>
{% endif %}
{% if show_twitter is not empty %}
<a class="blockquote__twitter" target="_blank" href="https://twitter.com/intent/tweet?text={{ quote|trim|escape('url') }}&url={{ url is not empty ? url|escape('url') : 'https://www.habitat.org/'|escape('url') }}&via=Habitat_org">
{{ icons.get('twitter', 'icon icon--twitter', true) }}
</a>
{% endif %}
</section>
Buttons
This is the button component. It provides basic styles for buttons throughout the site.
disabled attribute. The disabled attribute is the preferred method.
{% for item in items %}
{% if modifier_class == 'btn--primary' %}
<div style="padding: 1rem; background-color: #0099cc;">
<button type="button" class="btn {{ modifier_class }}">{{ item.text }}</button>
</div>
{% else %}
<button type="button" class="btn {{ modifier_class }}"{{ modifier_class == 'is-disabled' ? ' disabled' }}>{{ item.text }}</button>
{% endif %}
{% endfor %}
Callout
This is the Callout component. It contains a single field of text with character limit of 200.
We build strength, stability, and self reliance through shelter.
{{ attach_library('h4h_theme/callout') }}
<div class="callout">
<h2 class="callout__heading">{{ heading|raw }}</h2>
</div>
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
{{ 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>
Collapsible
This component is a collapsible fieldset. It allows the user to click the fieldset legend and toggle open and closed the information.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/toggle-class.bundle.js
{#
/**
* @file
* Collapsible fieldset component.
*/
#}
{{ attach_library('h4h_theme/collapsible') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="collapsible">
<fieldset>
<legend class="collapsible__legend">
<span class="collapsible__title {{ collapsed ? '' : 'is-active'}}" data-toggle-class="is-open" data-target=".{{ selectorClass }}">
{{ legend }}
{{ icons.get('chevronright', 'icon collapsible__icon') }}
</span>
</legend>
<div class="collapsible__wrapper {{ selectorClass }}{{ collapsed ? '' : ' is-open'}}">
<div class="collapsible__content">
{{ children }}
</div>
</div>
</fieldset>
</section>
{% if layout_type %}
{#
Clean up value that comes from StoriesList plugin
so that it matches the relevant library name.
(@See: /modules/custom/hab_component/src/Plugin/ParagraphHandler/StoriesList.php)
#}
{% set layout_type = layout_type|replace({' ': '-', ',': ''})|lower %}
{% endif %}
{# Dynamically attach the correct libraries. #}
{{ attach_library('h4h_theme/content-list-' ~ color_style|default('neutral')) }}
{{ attach_library('h4h_theme/content-list-' ~ layout_type|default('3up-grid')) }}
{#
We want all classes to be prefixed with 'content-list'.
Provide a default just in case.
#}
{% set style = 'content-list--' ~ color_style|default('neutral') %}
{% set layout = 'content-list--' ~ layout_type|default('3up-grid') %}
<div class="content-list__container" data-layout-type="{{ layout_type }}" data-color-style="{{ color_style }}">
<div class="content-list {{ grid ? 'l-grid' }} {{ layout }} {{ style }} {{ paging_mode_class }}">
{{ content }}
</div>
</div>
CTA
CTAs for the site
{{ attach_library('h4h_theme/form-cta') }}
{{ attach_library('h4h_theme/cta') }}
{{ attach_library('h4h_theme/btn') }}
{% set classes = [
modifier_class,
modifier,
has_icon ? "cta--icon" : ''
] %}
<div class="cta {{ attributes ? ' ' ~ attributes.class }} {{ modifier_class }} {{has_icon ? "cta--icon" : ''}}" {{- attributes ? attributes|without(class) -}}>
<div class="cta__icon-container">{{ icon }}</div>
<div class="cta__title"><h2>{{ title }}</h2></div>
<div class="cta__prefix">
{{ prefix }}
</div>
{% block cta %}
<div class="cta__action">
<a href="{{ url }}" class="btn btn--{{ button_level }}">{{ button_label }}</a>
</div>
{% endblock cta %}
<div class="cta__suffix">
{{ suffix }}
</div>
</div>
Divider
This is the divider component that is used to divide page elements.
The component is section that contains a hr tag.
The section can be passed the class divider--hot-orange to alter
the color.
The divider has spacing options controlled by the classes
divider--2x and divider--3x, which double or triple the space.
{{ attach_library('h4h_theme/divider') }}
{#
Add special kss styles to show how much space
is added.
#}
{% if kss_styles %}
<div style="{{ kss_styles }}">
{% endif %}
<section class="divider {{ modifier_class }}">
<hr>
</section>
{% if kss_styles %}
</div>
{% endif %}
Donate
This is the donate dropdown in the header.
{{ attach_library('h4h_theme/donate') }}
{% if donate_menu.items is empty %}
{# Non-NA pages always use the "fallback", which is populated by the Area
Editions's link options. #}
<a class="btn btn--donate header__btn" href="{{ donate_fallback.link }}">{{ donate_fallback.text }}</a>
{% else %}
{# Fallback if JS doesn't load #}
<a class="btn btn--donate header__btn btn--no-js" href="{{ donate_fallback.link }}">{{ donate_fallback.text }}</a>
<nav class="donate-menu" id="donate-menu" role="navigation" aria-label="Donate Menu">
{# Donate menu #}
<ul class="donate-menu__nav-wrapper" role="menubar">
<li class="donate-menu__parent-item js-donate-menu__parent-item">
{# Button used to toggle menu visibility #}
<button class="btn btn--donate header__btn btn--js" id="donate-button" aria-label="donate toggle button" aria-pressed="false">{{ donate_button.text }}</button>
<ul class="donate-menu__list donate-menu__list--desktop" id="donate-dropdown" aria-expanded="false" aria-label="donate menu items">
{% for item in donate_menu.items %}
<li class="donate-menu__item js-donate-menu__item" role="menuitem">
<a class="donate-menu__link js-donate-menu__link" href="{{ item.link }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</nav>
{% endif %}
Esri Leaflet Map (esrimap)
This is a Esri Leaflet map. It leverages the Esri Leaflet API.
Import site utilities.
{{ attach_library('h4h_theme/esrimap') }}
<section class="esrimap" id="container-{{ modifier_class }}">
{% for item in items %}
<h2>{{ item.title }}</h2>
<div class="{{ item.className }}" id="{{ item.id }}"></div>
{% endfor %}
</section>
FAQ
The FAQ component appears on the Affiliates page.
FAQs
What is Habitat for Humanity International?
- Habitat is a nonprofit, Christian housing ministry.
- We believe that every person should have a decent, safe and affordable place to live.
- We build, renovate and repair houses all over the world using volunteer labor and donations.
- We welcome all people to work with us in partnership.
Does Habitat give houses away?
- Habitat’s partner families buy the houses that Habitat builds and renovates.
- Habitat makes no profit on the sale.
- In the United States, Habitat homeowners purchase their houses through affordable monthly mortgage payments.
- In other countries, Habitat also works with partner organizations to serve even more families through innovative financing methods.
How are Habitat's families chosen?
- Each affiliate’s family selection committee chooses Habitat homeowners for their local area, based on three criteria:
- The family’s level of need.
- Their willingness to become partners in the program.
- Their ability to repay the loan through an affordable payment plan.
- Habitat’s partner families buy the houses that Habitat builds and renovates.
- Habitat makes no profit on the sale.
- In the United States, Habitat homeowners purchase their houses through affordable monthly mortgage payments.
- In other countries, Habitat also works with partner organizations to serve even more families through innovative financing methods.
How are Habitat's families chosen?
- Each affiliate’s family selection committee chooses Habitat homeowners for their local area, based on three criteria:
- The family’s level of need.
- Their willingness to become partners in the program.
- Their ability to repay the loan through an affordable payment plan.
{{ attach_library('h4h_theme/faq') }}
<div class="faq">
<h2 class="faq__heading">{{ heading }}</h2>
{% for item in items %}
<h3 class="faq__title">{{ item.title }}</h2>
<ul class="faq__items">
{% for subitem in item.subitems %}
<li>{{ subitem.text }}</li>
{% endfor %}
</ul>
{% endfor %}
<button type="button" class="btn btn--secondary">{{ button_text }}</button>
</div>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
Get involved Get involved
Subscribe Subscribe
{{ 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 %}
Form CTA Basic
This component is similar to Form CTA Full but doesn't support forms. It only supports a single call to action button and an additional text link. This keeps it simpler and lighter than the Form CTA Full component.
Join this trip
{{ attach_library('h4h_theme/form-cta-basic') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="form-cta-basic {{ modifier_class }}">
<h2 class="form-cta-basic__heading">
{{ title }}
</h2>
<div class="form-cta-basic__bottom">
<div class="form-cta-basic__text">{{ desc|raw }}</div>
{% if cta_url %}
<a class="form-cta-basic__btn" href="{{ cta_url }}">{{ cta_text }}</a>
{% endif %}
{% if link_url %}
<a class="form-cta-basic__link" href="{{ link_url }}">{{ link_text }}{{ icons.get('arrowright', 'form-cta-basic__icon') }}</a>
{% endif %}
</div>
</div>
Form CTA Full
There are two alternate Form CTAs: one for newsleter signup, the other for donations.
Donate
Habitat Extra E-Newsletter
{{ attach_library('h4h_theme/form-cta-full') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% for item in items %}
<div id="{{ item.id }}" class="form-cta-full {{ item.class }}">
<h2 class="form-cta-full__heading">
{{ item.icon ? icons.get(item.icon, 'form-cta-full__icon') }}
<span class="form-cta-full__title">{{ item.title }}</span>
</h2>
<div class="form-cta-full__bottom">
<div class="form-cta-full__text">{{ item.desc|raw }}</div>
{% if item.form %}
<div class="form-cta-full__form">
{{ item.form }}
</div>
{% endif %}
{% if item.link %}
<div class="form-cta-full__link">
<a href="{{ item.url }}">{{ item.link }}{{ icons.get('arrowright', 'form-cta-full__icon--arrowright') }}</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
Form CTA Promo
The Form CTA Promo component uses the following components:
Get involved Get involved
{{ attach_library('h4h_theme/form-cta-promo') }}
<div class="form-cta-promo">
<div class="form-cta-promo__img" style="background-image: url('{{ img_url }}')"></div>
{% include '@h4h_theme/form-cta/form-cta.twig' with {
'items': items
} only
%}
</div>
Form CTA Single
This is an individual instance of each CTA within the form-cta component.
Get involved
Get involved
Get involved
Get involved
{{ attach_library('h4h_theme/form-cta-single') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="form-cta-single {{ modifier_class}}">
{% if title %}
<h2 class="form-cta-single__heading">
{{ icons.get(icon, 'form-cta-single__icon') }}
<span class="form-cta-single__title">{{ title }}</span>
</h2>
{% endif %}
<div class="form-cta-single__bottom">
<div class="form-cta-single__text">{{ desc|raw }}</div>
<a class="form-cta-single__btn" aria-label="{{ aria }}" href="{{ url }}">{{ btn_desc }}</a>
{% if suffix %}
<div class="form-cta-single__suffix">{{ suffix|raw }}</div>
{% endif %}
</div>
</div>
Game
This is interactive game that can highlight some of the key issues for the Cost of Home campaign.
It's written in React and compiled by Webpack. It's compiled using the normal
npm run build or npm run watch commands.
{{ attach_library('h4h_theme/magnific-popup') }}
{{ attach_library('h4h_theme/game') }}
<div id="game-app" class="game"></div>
Google Map (Gmap)
This is a Google map. It leverages the Google Maps JavaScript API.
Usage:
- Include the
@h4h_theme/gmap/gmap.twigfile passing it the needed map id. - Populate the drupalSettings.gMaps object with the needed data.
Example drupalSettings.gMaps:
"gMaps":[
{
"id": "map1",
"center":{
"lat": -25.363,
"lng": 131.044
},
"markers":[
{
"title": "Some label 1",
"style": "red",
"position": {
"lat": -10.363,
"lng": 120.044
},
"details": {
"title": "Seminole / Apopka ReStore",
"desc": "<p>110 Americana Blvd</p><p>Sanford, FL 32773-8027</p>",
"phone": "tel:+17709956211",
"email": "mailto:[email protected]",
"website": "https://example.com/"
}
},
{
"title": "Some label 1",
"style": "blue",
"position": {
"lat": -15.151,
"lng": 131.044
},
"details": {
"title": "Some Other ReStore",
"desc": "<p>First Line Address</p><p>City, FL 32773-8027</p>",
"phone": "tel:+17709956211"
}
},
{
"title": "Some label 1",
"style": "blue",
"position": {
"lat": -40.363,
"lng": 100.044
}
}
]
}
]
{{ attach_library('h4h_theme/gmap') }}
<section class="gmap {{ modifier_class }}">
<div class="gmap__info">
{%
include "@h4h_theme/info-window/info-window.twig" with {
id: id
} only
%}
</div>
<div class="gmap__buttons">
<button class="gmap__button btn btn--reversed" id="gmap__location">{{ "Local Habitat"|t }}</button>
<button class="gmap__button btn" id="gmap__restore">{{ "ReStore"|t }}</button>
</div>
<div class="gmap__item {{ className }}" id="{{ id }}"></div>
</section>
Header
The header is made up of the following components:
{{ attach_library('h4h_theme/header') }}
{# Include the main sprite with icons used by the header and footer. #}
{% include "@h4h_theme/icons/assets/sprite.svg.twig" %}
<header role="banner" class="header">
<div class="header__left">
{%
include "@h4h_theme/site-logo/site-logo.twig" with {
link: logo.link,
espanol: logo.espanol
} only
%}
</div>
<div class="header__mobile">
{%
include "@h4h_theme/mobile-bar/mobile-bar.twig" with {
donate_menu: mobile_donate_menu,
donate_button: mobile_donate_button,
donate_fallback: mobile_donate_fallback
} only
%}
</div>
<div class="header__right js-m-dropdown" id="header-m-dropdown">
<div class="header__top-bar">
<div class="header__search js-header-search" id="site-search">
{#
First try to see if the search var contains any subitems.
If so it's not the rendered search block so we need to include
the style guide search component.
#}
{% if search.label %}
{%
include "@h4h_theme/site-search/site-search.twig" with {
label: search.label
} only
%}
{# If it doesn't contain subitems it's the rendered search block. #}
{% else %}
{{ search }}
{% endif %}
</div>
<div class="header__social">
{%
include "@h4h_theme/social-bar/social-bar.twig" with {
items: social.items
} only
%}
</div>
<div class="header__donate">
{%
include "@h4h_theme/donate/donate.twig" with {
donate_button: donate_button,
donate_fallback: donate_fallback,
donate_menu: donate_menu,
more_text: more_text
} only
%}
</div>
</div>
<div class="header__nav">
{%
include "@h4h_theme/main-menu/main-menu.twig" with {
items: menu.items,
more_text: menu.more_text
} only
%}
</div>
</div>
</header>
Subsite Header
The header for subsites is usually used with the main header:
{{ attach_library('h4h_theme/header-subsite') }}
{# Include the main sprite with icons used by the header and footer. #}
{% include "@h4h_theme/icons/assets/sprite.svg.twig" %}
<header role="banner" class="header-subsite {{ modifier_class }}">
<div class="header-subsite__content l-center">
<div class="header__left header-subsite__left">
<div class="header-subsite__title">
<a href="{{ link }}" rel="home" class="header-subsite__link">
{%- if subsite_logo %}
{{- subsite_logo|raw -}}
{% else %}
{{- subsite_title -}}
{% endif -%}
</a>
</div>
</div>
<div class="header__mobile">
{%
include "@h4h_theme/mobile-bar/mobile-bar.twig" with {
modifier_class: 'mobile-bar--basic',
data_target: '#subsite-header-dropdown-' ~ modifier_class,
icon_name: 'dots',
menu_bar_text: 'More'|t
} only
%}
</div>
{# Add a unique class in case there's more than one subsite headers. #}
<div class="header__right header-subsite__right js-subsite-dropdown" id="subsite-header-dropdown{{ '-' ~ modifier_class }}">
<div class="header__top-bar">
</div>
<div class="header__nav header-subsite__nav">
{%
include "@h4h_theme/main-menu/main-menu.twig" with {
modifier_class: 'main-menu--basic',
items: menu.items,
more_text: menu.more_text
} only
%}
{% if alternate_language_link is not empty %}
{%
include "@h4h_theme/language-selector/language-selector.twig" with {
language_version: language_version,
alternate_language_link: alternate_language_link,
} only
%}
{% endif %}
</div>
</div>
</div>
</header>
Header Plain
This is the Header Plain component that appears on donation pages.
{{ attach_library('h4h_theme/header-plain') }}
{% block parent_el_top %}
<header role="banner" class="header-plain">
{% endblock parent_el_top %}
<div class="header-plain__left">
{%
include "@h4h_theme/site-logo/site-logo.twig" with {
link: link,
espanol: espanol,
class: 'site-logo--header-plain'
} only
%}
</div>
{% if donate.text %}
<div class="header-plain__right">
<h1 class="header-plain__title">{{ donate.text }}</h1>
</div>
{% endif %}
{% block parent_el_bottom %}
</header>
{% endblock parent_el_bottom %}
Hero
The hero is made up of two reusable components:
This component also has multiple variations. Here's how someone would go about adding or removing a variation.
- Create a new SCSS stylesheet. (You can copy
hero-blue.scssand use that as a starting point.) - Add a modifier that references the stylesheet to the
hero.scssKSS modifiers list. - In your new stylesheet reference use
hero-[whatever color name you picked]as the selector. - If you are adding a new layout option use
hero-box-[whatever layout name you picked]instead. - At this point you should be able to modify your new color stylesheet and see it working in the style guide.
Now time to tie it into Drupal.
- Create a new library for your variant stylesheet. (Take a look at
hero-bluefor an example.) - Make sure that library depends on
h4h_theme/hero. This ensures the base css is added. - Update the hero and hero with video paragraph style or layout field to add in your new option.
Deleting a unused style.
- Delete the SCSS stylesheet.
- Delete the Drupal library.
- Delete the value from the style or layout field on the paragraph.
{#
Note: We're extending `hero-vars` here because that's the only way we
can break out some of the code that's needed to make the
KSS modifications work.
#}
{% extends "@h4h_theme/hero/hero-vars.twig" %}
{% block component %}
{#
Dynamically attach the correct libraries.
Also note that we never attach the `hero` library which contains the
base hero styles. We always attach a color and layout variation
i.e. `hero-blue` which will make sure the `hero` library is added
as a dependency.
#}
{{ attach_library('h4h_theme/hero-' ~ style|default('blue')) }}
{{ attach_library('h4h_theme/hero-' ~ layout|default('box-right')) }}
{#
We want all classes to be prefixed with 'hero'.
Provide a default just in case.
#}
{% set style = 'hero-' ~ style|default('blue') %}
{% set layout = 'hero-' ~ layout|default('box-right') %}
<article class="hero {{ style }} {{ layout }} {{ modifier_class }}">
{# If there's a video the image is used as a placeholder. #}
{% if video %}
{%
include "@h4h_theme/video/video.twig" with {
video: video,
img: img
} only
%}
{% endif %}
{# If there's no video but there IS an image. #}
{% if not video and img %}
<div class="hero__img {{ style }}__img {{ layout }}__img">
{% if url %}
<a class="hero__img-link {{ style }}__img-link {{ layout }}__img-link" href="{{ url }}">{{ img }}</a>
{% else %}
{{ img }}
{% endif %}
</div>
{% endif %}
<div class="hero__content {{ style }}__content {{ layout }}__content">
<div class="hero__content-background {{ style }}__content-background {{ layout }}__content-background"></div>
<div class="hero__content-inner {{ style }}__content-inner {{ layout }}__content-inner">
{% if title %}
<h{{ heading_level }} class="hero__heading {{ style }}__heading {{ layout }}__heading">
{% if url %}
<a class="hero__link {{ style }}__link {{ layout }}__link" href="{{ url }}">{{ title }}</a>
{% else %}
{{ title }}
{% endif %}
</h{{ heading_level }}>
{% endif %}
{% if desc %}
<h{{ heading_level + 1 }} class="hero__desc {{ style }}__desc {{ layout }}__desc">{{ desc }}</h{{ heading_level + 1 }}>
{% endif %}
{# There can either be a donation form OR a call to action button. #}
{% if donate_form %}
{{ donate_form }}
{% elseif btn_text %}
<a href="{{ url }}" class="hero__btn {{ style }}__btn {{ layout }}__btn btn btn--primary">{{ btn_text }}</a>
{% endif %}
</div>
</div>
</article>
{% endblock %}
hr
This is the hr component that appears on the Donate form.
<hr>.
{{ attach_library('theme_name/hr') }}
<hr class="{{ modifier_class }}">Index List
The index list component is a 4 column list of items.
Argentina
Armenia
Bangladesh
Bolivia
Bosnia Herzegovina
Brazil
Bulgaria
Cambodia
Canada
Chile
China
Columbia
Costa Rica
Cote d' Ivoire
Dominican Republic
Egypt
El Salvador
Ethiopia
Argentina
Armenia
Bangladesh
Bolivia
Bosnia Herzegovina
Brazil
Bulgaria
Cambodia
Canada
Chile
China
Columbia
Costa Rica
Cote d' Ivoire
Dominican Republic
Egypt
El Salvador
Ethiopia
Argentina
Armenia
Bangladesh
Bolivia
Bosnia Herzegovina
Brazil
Bulgaria
Cambodia
Canada
Chile
China
Columbia
Costa Rica
Cote d' Ivoire
Dominican Republic
Egypt
El Salvador
Ethiopia
{{ attach_library('h4h_theme/index-list') }}
<section class="index-list">
{% for item in items %}
<article class="index-list__item">
<h3 class="index-list__title">{{ item.title }}</h3>
</article>
{% endfor %}
</section>
Info
This is the Info component. It displays an icon next to a link. Additional description text is optional. If no icon is specified, the info icon is used by default.
{{ attach_library('h4h_theme/info') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="info {{ modifier_class }}">
<a href="{{ url }}">
<div class="info__icon">
{{ icons.get(icon|default('info')) }}
</div>
<div class="info__label">{{ label }}</div>
</a>
{% if (description) %}
<div class="info__description">{{ description }}</div>
{% endif %}
</div>
Info (Plain)
This is the Info (Plain) component. It displays a slightly smaller label in bold. Additional description text is optional.
{{ attach_library('h4h_theme/info-plain') }}
<div class="info-plain {{ modifier_class }}">
<div class="info-plain__label">{{ label }}</div>
{% if (description) %}
<div class="info-plain__description">{{ description }}</div>
{% endif %}
</div>
Info Window
The info window component is used to show a brief summary of content. Example: used within the context of a Google map, the info window shows more details about any map marker when clicked.
{{ attach_library('h4h_theme/info-window') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div style="position: relative; height: 300px">
<section class="info-window is-active">
<button class="info-window__close">{{ icons.get('close', 'icon info-window__icon') }}</button>
<h2 class="info-window__heading">{{ heading }}</h2>
<div class="info-window__desc">{{ desc|raw }}</div>
<div class="info-window__group">
<a class="info-window__btn" href="{{ phone }}">{{ icons.get('phone', 'icon info-window__icon') }}</a>
<a class="info-window__btn" href="{{ email }}">{{ icons.get('mail', 'icon info-window__icon') }}</a>
<a class="info-window__btn" href="{{ website }}">{{ icons.get('website', 'icon info-window__icon') }}</a>
</div>
</section>
</div>
Language Selector
The language selector on subsites to switch between languages
{{ attach_library('h4h_theme/language-selector') }}
<div class="language-selector">
{% if language_version == 'English' %}
<div class="language-selector__language language-selector__language--first language-selector__language--selected">
English
</div>
<div class="language-selector__language">
<a href={{ alternate_language_link }}>Español</a>
</div>
{% else %}
<div class="language-selector__language language-selector__language--first">
<a href={{ alternate_language_link }}>English</a>
</div>
<div class="language-selector__language language-selector__language--selected">
Español
</div>
{% endif %}
</div>
Listing
The listing component is used to display search results for affiliates or Restores. It's not used within the main site search results.
Pickens County HFH Clemson, SC
PO Box 412
Clemson, SC 29633
United States
{{ attach_library('h4h_theme/listing') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<article class="listing">
<{{ heading }} class="listing__heading">
{# If this is a Restore don't link the title to it's node. #}
{% if type == 'restore_store' %}
{{ label }}
{% else %}
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
{% endif %}
{% if city and state %}
<span class="listing__right">
{{ city }}, {{ state }}
</span>
{% endif %}
</{{ heading }}>
{% if content|render %}
<div class="listing__body">
{{ content|raw }}
<div class="listing__items">
{% if website %}
<div class="listing__item">
{{ icons.get('website', 'icon--small-website icon--green') }} {{ website }}
</div>
{% endif %}
{% if phone %}
<div class="listing__item">
{{ icons.get('phone', 'icon--small-phone icon--green') }} {{ phone }}
</div>
{% endif %}
{% if email %}
<div class="listing__item">
<a href="mailto:{{ email }}">{{ icons.get('mail', 'icon--small-mail icon--green') }} {{ email }}</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
</article>
Media Item
This component appears on stories pages and contains an image and a caption.
{{ attach_library('h4h_theme/media-item') }}
<div class="media-item">
<figure class="media-item__image">
{% if link.url is not empty %}
<a href="{{ link.url }}" aria-label="{{ link.title }}"{% if link.new_window %} target="_blank"{% endif %}>
{{ img }}
</a>
{% else %}
{{ img }}
{% endif %}
<figcaption class="media-item__caption">
{{ caption }}
</figcaption>
</figure>
</div>
Media Object
This is a combination of a title, text block and image. The image is floated to the right by default.
About Chicago Habitat for Humanity
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
About Chicago Habitat for Humanity
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
About Chicago Habitat for Humanity
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
About Chicago Habitat for Humanity
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
{{ attach_library('theme_name/media-object') }}
{# Default to h2 (heading level 2) if no heading level is supplied. #}
{% set heading_level = heading_level|default(2) %}
<div class="media-object {{ modifier_class}}">
<h{{ heading_level }} class="media-object__title">About Chicago Habitat for Humanity</h{{ heading_level }}>
<div class="media-object__image">
<img src="{{ image.url }}" alt="{{ image.alt }}" >
</div>
<div class="media-object__body"><p>{{ description }}</p></div>
</div>Messages
The messages component is mostly a duplicate of the Classy theme styled system messages. There are slight modifiers added to give more flexibility.
Error Message
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance.{{ attach_library('h4h_theme/messages') }}
{# For KSS fake the error message. #}
{% if kss == true and modifier_class == 'messages--error' %}
{% set type = 'error' %}
{% set status_headings_type = 'Error Message' %}
{% endif %}
{#
Add a modifer class in addition to the messages--plain
class to showcase the removed icon.
#}
{% if kss == true and modifier_class == 'messages--plain' %}
{% set modifier_class = modifier_class ~ ' messages--error' %}
{% endif %}
<div role="contentinfo" aria-label="{{ status_headings_type }}" class="messages {{ modifier_class }}">
{% if type == 'error' %}
<div role="alert">
{% endif %}
{% if status_headings_type %}
<h2 class="visually-hidden">{{ status_headings_type }}</h2>
{% endif %}
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message|raw }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% endif %}
{% if type == 'error' %}
</div>
{% endif %}
</div>
Modal CTA
The modal cta component present a pop up to the user. After the pop up is shown once a cookie is set ensuring that it isn't shown again.
Test this component using the button below.
This component leverages the Magnific Popup library.
{{ attach_library('h4h_theme/modal-cta') }}
<div class="modal-cta js-modal-cta mfp-hide {{ modifier_class ? modifier_class|clean_class }}">
{% block content %}
{%
include "@h4h_theme/teaser/teaser.twig" with {
title: title,
desc: desc,
heading_level: heading_level,
modifier_class: "teaser--pacific-blue",
url: url,
img: img,
btn_text: btn_text,
btn_class: 'btn--large'
} only
%}
{% endblock %}
</div>
More List
The "More List" is a sidebar that appears on the Affiliates page. It includes three elements: a thumbnail image, a list of programs and a list of events
Programs
Collegiate Challenge
Women Build
A Brush with Kindness
Events
Winter Warriors
{{ attach_library('h4h_theme/more-list') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="more-list">
<div class="more-list__image">
<img src="{{ img }}">
</div>
<div class="more-list__programs">
<h2 class="more-list__title">{{ programs.title }}</h2>
{% for item in programs.items %}
<div class="more-list__listing">
<h3 class="more-list__listing-title"><a href="{{ item.url }}">{{ item.title }}</a></h3>
<div class="more-list__listing-description">{{ item.description|raw }}</div>
</div>
{% endfor %}
<a href="{{ programs_button.url }}" class="btn btn--secondary more-list__button">{{ programs_button.title }}</a>
</div>
<div class="more-list__events">
<h2 class="more-list__title">Events</h2>
{% for item in events.items %}
<div class="more-list__listing">
<h3 class="more-list__listing-title"><a href="{{ item.url }}">{{ item.title }}</a></h3>
<div class="more-list__listing-date">{{ icons.get('calendar') }} {{ item.date }} </div>
<div class="more-list__listing-description">{{ item.description|raw }}</div>
</div>
{% endfor %}
{# Surpressing more events buttons for now. #}
{# <a href="{{ events_button.url }}" class="btn btn--secondary more-list__button">{{ events_button.title }}</a> #}
</div>
</div>
Pager
The Basic Pager contains Previous and Next buttons with a list of ennumerated pages. The Load More variant contains a single button
{{ attach_library('h4h_theme/pager') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{% if modifier_class == 'pager--load-more' %}
<ul class="js-pager__items pager--container {{ modifier_class }}">
<li class="pager__item">
<a href="{{ ajax_url }}" rel="next" class="btn btn--secondary btn--large">{{ ajax_desc }}</a>
</li>
</ul>
{% else %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<ul class="js-pager__items pager--container">
<li class="pager__item pager__item--basic pager__item--previous">
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev">{{ icons.get('arrowright') }}</a>
</li>
{% for key, item in items.pages %}
<li class="pager__item pager__item--basic {{ current == key ? ' is-active' : '' }}">
{% if current == key %}
{% set title = 'Current page'|t %}
{% else %}
{% set title = 'Go to page @key'|t({ '@key': key }) %}
{% endif %}
<a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
<span class="visually-hidden">
{{ current == key ? 'Current page'|t : 'Page'|t }}
</span>
{{- key -}}
</a>
</li>
{% endfor %}
<li class="pager__item pager__item--basic pager__item--next">
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"}}>{{ icons.get('arrowright') }}</a>
</li>
</ul>
</nav>
{% endif %}
Professional Profile
The professional profile gives the name, title and a description of an individual. A vcard syntax has been used where appropriate. By default the image is displayed to the left (photo-left). The image provided needs to be a 1:1 ratio.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
Excepteur sint obcaecat cupiditat non proident culpa. Phasellus laoreet lorem vel dolor tempus vehicula. Ut enim ad minim veniam, quis nostrud exercitation. Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Idque Caesaris facere voluntate liceret: sese habere. Mercedem aut nummos unde unde extricat, amaras. Curabitur blandit tempus ardua ridiculus sed magna. Quae vero auctorem tractata ab fiducia dicuntur.
{{ attach_library('h4h_theme/professional-profile') }}
{% set align = modifier_class ? modifier_class : 'photo-left' %}
{% set read_more = description_full ? ' read-more' : null %}
{% set extra_class = align ~ read_more %}
<div class="professional-profile vcard {{ extra_class }}">
{% if photo %}
<div class="professional-profile__aside">
<div class="professional-profile__photo photo">{{ photo }}</div>
</div>
{% endif %}
<div class="professional-profile__content">
<div class="professional-profile__name fn">{{ fn }}</div>
<div class="professional-profile__title title">{{ title }}</div>
<div id="professional-profile__desc-{{ id }}">
{{ description }}
{% if read_more %}
<button id="button-expand" data-target="#professional-profile__desc-{{ id }}" class="professional__btn btn btn--secondary" data-toggle-class="expanded" aria-label="Read more about {{ fn }}">
{{ "Read more"|t }}
</button>
<div class="professional-profile__desc--full">
{{ description_full }}
<button id="button-collapse" data-target="#professional-profile__desc-{{ id }}" class="professional__btn btn btn--secondary" data-toggle-class="expanded" aria-label="Read less about {{ fn }}">
{{ "Read less"|t}}
</button>
</div>
{% endif %}
</div>
</div>
</div>
Promo
This is the Promo component which appears in two places on the home page. It has two configurations, one that is nearly square and one that is shorter and rectangular.
{{ attach_library('h4h_theme/promo') }}
{# Default to h2 (heading level 2) if no heading level is supplied. #}
{% set heading_level = heading_level|default(2) %}
<article class="promo {{ modifier_class }}">
<div class="promo__img">
<a class="promo__img-link" href="{{ url }}">{{ img }}</a>
</div>
<div class="promo__gradient"></div>
<div class="promo__content">
<h{{ heading_level }} class="promo__heading">
<a class="promo__link" href="{{ url }}">{{ title }}</a>
</h{{ heading_level }}>
<a href="{{ url }}" class="promo__btn btn btn--primary">{{ btn_text }}</a>
</div>
</article>
Donate Donate
Get involved Get involved
Subscribe Subscribe
{{ attach_library('h4h_theme/promo-grid') }}
<section class="promo-grid">
<div class="promo-grid__item">
<div class="promo-grid__nested">
{% block nested %}
{%
include "@h4h_theme/form-cta/form-cta.twig" with {
items: forms.donate
} only
%}
{%
include "@h4h_theme/form-cta/form-cta.twig" with {
items: forms.getinvolved
} only
%}
{% endblock %}
</div>
</div>
<div class="promo-grid__bottom">
{% block bottom_1 %}
{%
include "@h4h_theme/promo/promo.twig" with {
title: promos.0.title,
btn_text: promos.0.btn_text,
url: promos.0.url,
img: promos.0.img
} only
%}
{% endblock %}
</div>
<div class="promo-grid__bottom promo--grid-short">
{% block bottom_2 %}
{%
include "@h4h_theme/promo/promo.twig" with {
title: promos.1.title,
btn_text: promos.1.btn_text,
url: promos.1.url,
img: promos.1.img,
modifier_class: 'promo--short'
} only
%}
{% endblock %}
</div>
<div class="promo-grid__item">
{% block last %}
{%
include "@h4h_theme/form-cta/form-cta.twig" with {
items: forms.subscribe
} only
%}
{% endblock %}
</div>
</section>
Promotional Ribbon
The promotional ribbon is used to drive end users to donate. It will be part of a Google Optimize A/B test
Requires:
dist/js/slick-carousel/vendors/slick.min.jsdist/js/promo-ribbon.bundle.js
Make your GivingTuesday gift today to help a family build a home and a future!
Give Now{{ attach_library('h4h_theme/promo-ribbon') }}
{{ attach_library('h4h_theme/optimize-ribbon-test') }}
<div class="ribbon-cta">
<div class="ribbon-cta__content-container">
<p class="ribbon-cta__content">Make your <strong>GivingTuesday</strong> gift today to help a family build a home and a future!</p>
<a href="https://secure.habitat.org/site/Donation2?df_id=4973&keyword=ribbon-homepage" class="ribbon-cta__donate-btn btn btn--secondary">Give Now</a>
</div>
<div class="ribbon-cta__close-container">
<button title="Close" type="button" class="ribbon_cta__close">
<svg xmlns="http://www.w3.org/2000/svg" class="ribbon_cta__icon" width="24" height="24" viewBox="0 0 17.5 17.5">
<title>Close</title>
<path d="M12.82,11.09a.69.69,0,0,0-.21-.5l-2-2,2-2a.69.69,0,0,0,.21-.5.7.7,0,0,0-.21-.51l-1-1a.7.7,0,0,0-.51-.21.69.69,0,0,0-.5.21l-2,2-2-2a.69.69,0,0,0-.5-.21.7.7,0,0,0-.51.21l-1,1a.7.7,0,0,0-.21.51.69.69,0,0,0,.21.5l2,2-2,2a.69.69,0,0,0-.21.5.7.7,0,0,0,.21.51l1,1a.7.7,0,0,0,.51.21.69.69,0,0,0,.5-.21l2-2,2,2a.69.69,0,0,0,.5.21.7.7,0,0,0,.51-.21l1-1a.7.7,0,0,0,.21-.51Zm4.32-2.52A8.38,8.38,0,0,1,16,12.87,8.55,8.55,0,0,1,12.87,16a8.37,8.37,0,0,1-4.3,1.15A8.39,8.39,0,0,1,4.27,16a8.53,8.53,0,0,1-3.12-3.12A8.39,8.39,0,0,1,0,8.57a8.39,8.39,0,0,1,1.15-4.3A8.53,8.53,0,0,1,4.27,1.15,8.39,8.39,0,0,1,8.57,0a8.37,8.37,0,0,1,4.3,1.15A8.55,8.55,0,0,1,16,4.27a8.37,8.37,0,0,1,1.15,4.3Z"></path>
</svg>
</button>
</div>
</div>Section Grid
The Section Grid is made up of the following components:
Stories
Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.
<section class="section-grid">
{%
include "@h4h_theme/section-title/section-title.twig" with {
title: section.title,
desc: section.desc,
heading_level: section.heading_level
} only
%}
<div class="l-grid l-grid--space-between">
{% for item in items %}
{# The first and every 4th item need to expand the full width of the grid. #}
{% if (loop.index - 1) is divisibleby(3) %}
{%
set gridClass = ' l-grid__col'
%}
{% else %}
{%
set gridClass = ' l-grid__col l-grid__col-half'
%}
{% endif %}
{%
include "@h4h_theme/teaser/teaser.twig" with {
title: item.title,
desc: item.desc,
heading_level: item.heading_level,
url: item.url,
img: item.img,
btn_text: item.btn_text,
modifier_class: item.modifier_class ~ gridClass
} only
%}
{% endfor %}
</div>
<ul class="js-pager__items pager--container pager--load-more">
<li class="pager__item">
<a href="#" rel="next" class="btn btn--secondary btn--large">See More Stories</a>
</li>
</ul>
</section>
Section Title
The section title component is used to denote a new section and can be used within multiple components.
Section Title component
This Is a Subtitle
Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.
Section Title component
This Is a Subtitle
Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.
Section Title component
Section Title component
Section Title component
{{ attach_library('h4h_theme/section-title') }}
{# Default to h2 (heading level 2) if no heading level is supplied. #}
{% set heading_level = heading_level|default(2) %}
<div class="section-title {{ modifier_class }}">
<h{{ heading_level }} class="section-title__heading">{{ title }}</h{{ heading_level }}>
{% if modifier_class != "section-title--alt1" and modifier_class != "section-title--alt2" and modifier_class != "section-title--alt3" %}
{% if subtitle %}
<h{{ heading_level + 1 }} class="section-title__sub">{{ subtitle }}</h{{ heading_level + 1 }}>
{% endif %}
{% if desc %}
<p class="section-title__desc">{{ desc }}</p>
{% endif %}
{% endif %}
</div>
Side Carousel
The side carousel component is an offset carousel with information on the left and the carousel on the right.
Requires:
dist/js/slick-carousel/vendors/slick.min.jssrc/components/slick-carousel/vendors/slick.cssdist/js/side-carousel.bundle.js
Habitat ReStore locations
Habitat for Humanity ReStores are nonprofit home improvement stores and donation centers that sell new and gently used furniture, appliances, home accessories, building materials and more to the public at a fraction of the retail price.
{{ attach_library('h4h_theme/side-carousel') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="side-carousel">
<div class="side-carousel__left">
<h2 class="side-carousel__heading">{{ heading }}</h2>
<p class="side-carousel__desc">{{ desc }}</p>
</div>
<div class="side-carousel__right js-side-carousel">
{% for item in items %}
<article class="side-carousel__item">
{{ icons.get('map', 'side-carousel__map') }}
<div class="side-carousel__main">
<h3 class="side-carousel__title">{{ item.title }}</h3>
<div class="side-carousel__details">
<p>{{ item.street }}</p>
<p>{{ item.city }}, {{ item.state }} {{ item.zip }}</p>
<p>{{ item.phone }}</p>
</div>
{% if item.cta.link %}
<a class="side-carousel__cta" href="{{ item.cta.link }}">{{ item.cta.text }} {{ icons.get('arrowright', 'side-carousel__arrow') }}</a>
{% endif %}
</div>
</article>
{% endfor %}
</div>
</section>
Site Logo
This is the site logo. It's usually used within the header.
{{ attach_library('h4h_theme/site-logo') }}
<div class="site-logo {{ class }}">
<a href="{{ link }}" rel="home" class="site-logo__link active">
{%- if espanol == true or modifier_class == 'Spanish' %}
{%- include '@h4h_theme/site-logo/hfhlogo-es.svg' -%}
{% else %}
{%- include '@h4h_theme/site-logo/hfhlogo.svg' -%}
{% endif -%}
</a>
</div>
Site Search
The site search is how the user searches throughout the site.
{% import '@h4h_theme/icons/icons.twig' as icons %}
<form class="site-search">
<div class="site-search__group">
<label class="visually-hidden" for="site-search-input">{{ label }}</label>
<input class="site-search__input" placeholder="{{ label }}" required id="site-search-input" type="text" name="site-search-input">
</div>
<button class="site-search__btn btn" type="submit">{{ icons.get('search', 'icon site-search__icon') }}<span class="visually-hidden">Search</span></button>
</form>
Slideshow
The slideshow component is used within the stories to display multiple images with captions.
By default the list of items is displayed as a slideshow, clicking the list view button converts the slideshow to a list.
Requires:
dist/js/slick-carousel/vendors/slick.min.jssrc/components/slick-carousel/vendors/slick.cssdist/js/slideshow.bundle.js
{{ attach_library('h4h_theme/slideshow') }}
{% if guestbook == true %}
{{ attach_library('h4h_theme/quote-slideshow') }}
{% set guestbook_slider_class = ' guestbook' %}
{% else %}
{% set guestbook_slider_class = '' %}
{% endif %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="slideshow{% if full_width == true %} full-width{% endif %}{{ guestbook_slider_class }}">
{# Create a separate div for navigation #}
<div class="slideshow__nav">
{# Slide Count #}
<div class="slideshow__count">
<div class="slideshow__count-wrapper">
<span class="js-slideshow-countnow">1</span>
<span class="slideshow__slash">/</span>
<span class="js-slideshow-counttotal">3</span>
</div>
</div>
{# Play/Pause #}
<div class="slideshow__play-pause">
<button class="slideshow__btn slideshow__play">
{{ source('@h4h_theme/slideshow/assets/icon-play.svg') }}
</button>
<button class="slideshow__btn slideshow__pause">
{{ source('@h4h_theme/slideshow/assets/icon-pause.svg') }}
</button>
</div>
{# Next/Previous #}
<button type="button" class="slideshow__btn slideshow__prev">
{{ source('@h4h_theme/slideshow/assets/icon-previous.svg') }}
</button>
<button type="button" class="slideshow__btn slideshow__next">
{{ source('@h4h_theme/slideshow/assets/icon-next.svg') }}
</button>
{# Button toggle for slideshow view. #}
<button class="slideshow__toggle js-slideshow-toggle">
<span class="slideshow__off">{{ source('@h4h_theme/slideshow/assets/icon-list.svg') }}<span class="slideshow__list-text"> {{ button.off_text }}</span></span>
<span class="slideshow__on">{{ source('@h4h_theme/slideshow/assets/icon-slides.svg') }} {{ button.on_text }}</span>
</button>
</div>
<div class="slideshow__slides">
{# Actual Slides with images. #}
<div class="js-slideshow">
{% for slide in slides %}
{% set slide_src = ( full_width == true ? slide.fullwidth : slide.img ) %}
<div class="slideshow__slide">
<div class="slideshow__intrinsic">
{% if guestbook == true %}
<div class="slideshow__quote">
{%
include '@h4h_theme/blockquote/blockquote.twig' with {
quote: slide.quote,
credit: slide.cite,
show_twitter: "false",
modifier_class: "blockquote--color-white-on-blue"
} only
%}
</div>
{% else %}
<div class="slideshow__img">
<img alt="" data-lazy="{{ slide_src }}" />
</div>
{% endif %}
</div>
{% if guestbook != true and slide.caption is not empty %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{#
Caption slides. This are hidden when the slideshow is destroyed.
Instead the captions are displayed directly under each image
using the slideshow__slides markup above.
#}
<div class="js-slideshow-captions slideshow__caption-slides">
{% for slide in slides %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endfor %}
</div>
</section>
Slideshow
The slideshow component is used within the stories to display multiple images with captions.
By default the list of items is displayed as a slideshow, clicking the list view button converts the slideshow to a list.
Requires:
dist/js/slick-carousel/vendors/slick.min.jssrc/components/slick-carousel/vendors/slick.cssdist/js/slideshow.bundle.js
{{ attach_library('h4h_theme/slideshow') }}
{% if guestbook == true %}
{{ attach_library('h4h_theme/quote-slideshow') }}
{% set guestbook_slider_class = ' guestbook' %}
{% else %}
{% set guestbook_slider_class = '' %}
{% endif %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="slideshow{% if full_width == true %} full-width{% endif %}{{ guestbook_slider_class }}">
{# Create a separate div for navigation #}
<div class="slideshow__nav">
{# Slide Count #}
<div class="slideshow__count">
<div class="slideshow__count-wrapper">
<span class="js-slideshow-countnow">1</span>
<span class="slideshow__slash">/</span>
<span class="js-slideshow-counttotal">3</span>
</div>
</div>
{# Play/Pause #}
<div class="slideshow__play-pause">
<button class="slideshow__btn slideshow__play">
{{ source('@h4h_theme/slideshow/assets/icon-play.svg') }}
</button>
<button class="slideshow__btn slideshow__pause">
{{ source('@h4h_theme/slideshow/assets/icon-pause.svg') }}
</button>
</div>
{# Next/Previous #}
<button type="button" class="slideshow__btn slideshow__prev">
{{ source('@h4h_theme/slideshow/assets/icon-previous.svg') }}
</button>
<button type="button" class="slideshow__btn slideshow__next">
{{ source('@h4h_theme/slideshow/assets/icon-next.svg') }}
</button>
{# Button toggle for slideshow view. #}
<button class="slideshow__toggle js-slideshow-toggle">
<span class="slideshow__off">{{ source('@h4h_theme/slideshow/assets/icon-list.svg') }}<span class="slideshow__list-text"> {{ button.off_text }}</span></span>
<span class="slideshow__on">{{ source('@h4h_theme/slideshow/assets/icon-slides.svg') }} {{ button.on_text }}</span>
</button>
</div>
<div class="slideshow__slides">
{# Actual Slides with images. #}
<div class="js-slideshow">
{% for slide in slides %}
{% set slide_src = ( full_width == true ? slide.fullwidth : slide.img ) %}
<div class="slideshow__slide">
<div class="slideshow__intrinsic">
{% if guestbook == true %}
<div class="slideshow__quote">
{%
include '@h4h_theme/blockquote/blockquote.twig' with {
quote: slide.quote,
credit: slide.cite,
show_twitter: "false",
modifier_class: "blockquote--color-white-on-blue"
} only
%}
</div>
{% else %}
<div class="slideshow__img">
<img alt="" data-lazy="{{ slide_src }}" />
</div>
{% endif %}
</div>
{% if guestbook != true and slide.caption is not empty %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{#
Caption slides. This are hidden when the slideshow is destroyed.
Instead the captions are displayed directly under each image
using the slideshow__slides markup above.
#}
<div class="js-slideshow-captions slideshow__caption-slides">
{% for slide in slides %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endfor %}
</div>
</section>
Spacer
The spacer component is used to insert extra padding between components. There are modifiers that give this component varying padding sizes.
{{ attach_library('h4h_theme/spacer') }}
{#
Add special kss styles to show how much space
is added.
#}
{% if kss_styles %}
<div style="{{ kss_styles }}">
{% endif %}
<section class="spacer {{ modifier_class }}">
</section>
{% if kss_styles %}
</div>
{% endif %}Story
The Story component is made up of the several blocks of text. It uses the Offset two-column layout and uses the following components:
Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Sed posuere consectetur est at lobortis.
- Sed posuere consectetur est at lobortis.
- Sed posuere consectetur est at lobortis.
Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment.— Herbert Marcuse
Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
{{ attach_library('h4h_theme/story') }}
<div class="story l-offset-2">
<div class="l-offset-2__left-column">
<div class="story__byline l-offset-2__inner">
{{ byline }}
</div>
<div class="story__lede l-offset-2__inner">
{{ lede }}
</div>
<div class="story__main-body l-offset-2__inner">
{{ main_body_1 }}
</div>
<div class="l-offset-2__inner--left">
{%
include "@h4h_theme/media-item/media-item.twig" with {
img: img,
caption: caption
} only
%}
</div>
<div class="story__main-body l-offset-2__inner">
{{ main_body_2 }}
</div>
<div class="l-offset-2__inner--left">
{%
include "@h4h_theme/blockquote/blockquote.twig" with {
quote: quote,
credit: credit
} only
%}
</div>
<div class="story__main-body l-offset-2__inner">
{{ main_body_3 }}
</div>
</div>
<div class="l-offset-2__right-column">
{%
include "@h4h_theme/article-meta/article-meta.twig" with {
share: {
title: share_this.title,
items: share_this.items
},
more_stories: more_stories,
learn_more: learn_more
} only
%}
</div>
</div>
{{ attach_library('h4h_theme/svg-map') }}
<section class="svg-map {{ modifier_class }}">
<div class="svg-map__item {{ className }}" id="{{ id }}"></div>
</section>
Table Display
The Table display is used to display lists in tabular form.
Show trips from:
| Location | Trip Dates | Project Type |
|---|---|---|
| Argentina | Trip date: Nov 4-13, 2016 |
|
| Argentina | Trip date: May 19-28, 2017 |
|
| Brazil | Trip date: Dec 28, 2016 - Jan 5, 2017 |
|
| Cambodia | Trip date: Nov 4-13, 2016 |
|
| Chile | Trip date: Apr 15, 2017 |
|
| El Salvador | Trip date: Dec 4, 2016 |
|
| Kenya | Trip date: Nov 4 - 13, 2016 |
|
| Philippines | Trip date: Nov 12 - 26, 2016 |
|
| Thailand | Trip date: Jan 19 - 28, 2017 |
|
| Zambia | Trip date: Nov 12 - 26, 2016 |
{{ attach_library('h4h_theme/table-display') }}
<div class="table-display">
{% block filters %}
{% include '@h4h_theme/table-filters/table-filters.twig' %}
{% endblock %}
{% block table %}
<table class="table-display__table" cellpadding="0" cellspacing="0">
<thead class="table-display__head">
<tr class="table-display__row table-display__row--head">
{% for item in table_head.items %}
{%
include '@h4h_theme/table-display/table-display-head/table-display-head.twig' with {
url: item.url,
description: item.description,
active: item.active
}
%}
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in table.items %}
{%
include '@h4h_theme/table-display/table-display-body/table-display-body.twig' with {
description: item.description,
type: item.type,
date: item.date
}
%}
{% endfor %}
</tbody>
</table>
{% endblock %}
</div>
Table Filters
The Table filters are included above the table display.
Show trips from:
<div class="table-filters">
<h3 class="table-filters--header">Show trips from:</h3>
<form class="table-filters__form">
<div class="form-control__item">
<label class="form-control__label" for="table-filters-1">
<input class="form-control__el" type="radio" name="trips" value="All world countries" id="table-filters-1" tabindex="1">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
All world countries
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-2">
<input class="form-control__el" type="radio" name="trips" value="Africa & the Middle East" id="table-filters-2" tabindex="2">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Africa & the Middle East
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-3">
<input class="form-control__el" type="radio" name="trips" value="Europe & Central Asia" id="table-filters-3" tabindex="3">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Europe & Central Asia
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-4">
<input class="form-control__el" type="radio" name="trips" value="Asia & the Pacific" id="table-filters-4" tabindex="4">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Asia & the Pacific
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-5">
<input class="form-control__el" type="radio" name="trips" value="Latin America & the Caribbean" id="table-filters-5" tabindex="5">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Latin America & the Caribbean
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-6">
<input class="form-control__el" type="radio" name="trips" value="Canada" id="table-filters-6" tabindex="6">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
Canada
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="table-filters-7">
<input class="form-control__el" type="radio" name="trips" value="United States" id="table-filters-7">
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc">
United States
</div>
</label>
</div>
</form>
</div>
Tabs
The tabs component can be used to display an unordered list as links or as a way to show and hide content.
Stand alone tab styling can be used without JS or any tab content.
However, in order for tabs and tab content to work, JS must be added.
Add the class js-tabs to the wrapper if you'd like that functionality.
Requires: dist/js/tabs.bundle.js
Optional Title
Tab Body Zip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body State
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body Country
Consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Optional Title
Tab Body Zip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body State
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
Tab Body Country
Consectetur adipiscing elit. Cras tristique purus ante, ac pulvinar augue luctus eu. Donec erat ex, dictum ac libero eget, vestibulum commodo ipsum. Praesent erat libero, porttitor eget iaculis vel, rutrum sed elit. ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lobortis ipsum, vitae iaculis odio. Donec elementum metus et orci convallis, a fermentum eros efficitur. Duis ligula leo, ornare vel justo vel, sagittis eleifend sem.
{{ attach_library('h4h_theme/tabs') }}
<section class="tabs {{ modifier_class }} js-tabs">
{% if title %}
{% set heading_level = heading_level|default(2) %}
<h{{ heading_level }} class="section-title__heading">{{ title }}</h{{ heading_level }}>
{% endif %}
<ul class="tabs__list">
{% for tab in tabs %}
<li class="tabs__item {{ tab.classes }}">
<a class="tabs__link" href="{{ tab.link }}">{{ tab.text }}</a>
</li>
{% endfor %}
</ul>
{% if (tabs_content) %}
<div class="tabs__panel-wrapper">
{% for content in tabs_content %}
<section id="{{ content.id }}" class="tabs__panel {{ content.classes }}">
{{ content.body }}
</section>
{% endfor %}
</div>
{% endif %}
</section>
Tool Tip
The tool tip component provides a pop up tool tip modal when clicked.
By default this tool tip is offset. To center it on the container use
the .tool-tip--center modifier class.
Requires:
dist/js/toggle-class/toggle-class.bundle.js
If you'd like to use the credit card styling you'll also need the media object.
{{ attach_library('h4h_theme/tool-tip') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{#
Set some dummy selector_id's for KSS so multiple instances of the
tool tip can be shown.
#}
{% if kss %}
{% if modifier_class == 'tool-tip--center' %}
{% set selector_id = 'ccv-code-example-1' %}
{% else %}
{% set selector_id = 'ccv-code-example-2' %}
{% endif %}
{% endif %}
<a href="#{{ selector_id }}" data-toggle-class="is-visible" data-target="#{{ selector_id }}" title="{{ label }}" class="tool-tip {{ modifier_class }}">
{{ icons.get('question', 'tool-tip__icon') }}
{#
To showcase how the tool-tip--center modifier is best used,
if KSS is showing the `tool-tip--center` modifier, hide the label.
#}
{% if kss and modifier_class == 'tool-tip--center' %}
{% else %}
<span class="tool-tip__label">{{ label }}</span>
{% endif %}
<div id="{{ selector_id }}" class="tool-tip__body">
{{ icons.get('close', 'tool-tip__close') }}
{% if kss %}
<p>We user your security code (CVV code) to verify your credit card.</p>
<div class="media-object media-object--no-wrap media-object--small">
<div class="media-object__image">
<img src="../../dist/assets/cc-cvv.svg" alt="CVV Code" />
</div>
<div class="media-object__body">
<p><small><strong>Visa, MasterCard, Discover:</strong></small><br><small>Look for a 3-digit number on the back of your card.</small></p>
</div>
</div>
<div class="media-object media-object--no-wrap media-object--small">
<div class="media-object__image">
<img src="../../dist/assets/cc-cvv-amex.svg" alt="CVV Code American Express" />
</div>
<div class="media-object__body">
<p><small><strong>American Express:</strong></small><br><small>Look for a 4-digit code on the front of your card, above the account number.</small></p>
</div>
</div>
{% else %}
{{ body|raw }}
{% endif %}
</div>
</a>
Trip Icon
The trip icon component provides icons for the different types of Global Village trips.
Usage:
Each icon can also be referenced by it's taxonomy term id.
EX: trip-icon--blitz-build or trip-icon--19
trip-icon--large enlarges the default icon size.
trip-icon--shrinking provides a icon that shrinks in size for smaller devices..
{{ attach_library('h4h_theme/trip-icon') }}
<span class="{{ modifier_class }}"></span>Video
The video component contains a preview image that when clicked, is removed and a video is inserted in it's place.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/video.bundle.js
{{ attach_library('h4h_theme/video') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<figure class="video {{ modifier_class }}">
<div class="video__img js-video">
<a class="video__link js-video-play" href="{{ video.external_url }}">
{{ icons.get('play', 'icon video__icon') }}
{{ img }}
</a>
<div class="video__iframe-container js-video-iframe" data-iframe-src="{{ video.url }}"></div>
</div>
{% if caption %}
<figcaption class="video__caption">
{{ caption }}
</figcaption>
{% endif %}
</figure>
Mobile Bar
The mobile bar controls the menu on smaller viewport widths. Only shown for smaller devices. Resize the browser to see the component.
{{ attach_library('h4h_theme/mobile-bar') }}
{{ attach_library('h4h_theme/donate') }}
{% set donate_url = donate_fallback.link %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{# Allow parent components to modify the togglers data target selector. #}
{% set data_target = data_target|default('.js-m-dropdown') %}
<ul class="mobile-bar {{ modifier_class }}">
<li class="mobile-bar__item">
<a
data-toggle-class="menu-is-visible"
data-target="{{ data_target }}"
href="#header-m-dropdown" class="btn mobile-bar__btn mobile-bar__btn--bars">{{ icons.get(icon_name|default('bars'), 'icon mobile-bar__icon') }}<span class="mobile-bar__text">{{ menu_bar_text|default('Menu') }}</span></a>
</li>
{# Don't show additional menu items if this is using the basic style. #}
{% if modifier_class != 'mobile-bar--basic' %}
<li class="mobile-bar__item"><a
data-toggle-class="search-is-visible"
data-target="{{ data_target }}"
href="#header-m-dropdown" class="btn mobile-bar__btn mobile-bar__btn--search">{{ icons.get('search', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Search</span></a>
</li>
<li class="mobile-bar__item mobile-bar__item--donate">
{% if donate_menu.items is empty %}
{# Non-NA pages always use the "fallback", which is populated by the Area
Editions's link options. #}
<a href="{{ donate_url }}" class="btn mobile-bar__btn mobile-bar__btn--heart">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></a>
{% else %}
{# Fallback for no JS #}
<a href="{{ donate_url }}" class="btn btn--no-js mobile-bar__btn mobile-bar__btn--heart">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></a>
{# Button used to toggle menu visibility #}
<button class="btn mobile-bar__donate-btn mobile-bar__btn mobile-bar__btn--heart" id="mobile-donate-button" aria-label="donate toggle button" aria-pressed="false">{{ icons.get('heart', 'icon mobile-bar__icon') }}<span class="mobile-bar__text">Donate</span></button>
<ul class="donate-menu__list donate-menu__list--mobile" id="mobile-donate-dropdown" aria-expanded="false" aria-label="donate menu items">
{% for item in donate_menu.items %}
<li class="donate-menu__item js-donate-menu__item" role="menuitem">
<a class="donate-menu__link js-donate-menu__link" href="{{ item.link }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
</ul>