Article Meta

The Article Meta component is a set of social media and related links that appears on the Stories page.

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

Band

This component pulls together details of an event and displays them within a band. Use this component by leveraging twig embeds and overriding the blocks.

Home construction

Help build new homes with those in need.

March 31, 2017 - April 9, 2017

10 days

Trip cost: US$2,255

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>
Location:
Atlanta, GA.
Region:
North America
Job Position Type:
US Employment

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-sm Bumps 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.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.
  3. 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.

Blockquote

This is the Blockquote component.

The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment.
— Herbert Marcuse

Breadcrumb

Breadcrumbs appear on tertiary pages.

.breadcrumb--reversed
variant in which breadcrumbs are white on a solid bg color

Buttons

This is the button component. It provides basic styles for buttons throughout the site.

:hover
Highlights when hovering.
.btn--primary
Primary button style.
.btn--secondary
Secondary button style.
.btn--reversed
Dark background color with white text button style.
.btn--donate
Donate button style.
.btn--large
Modifier to make any button larger.
.btn--xlarge
Modifier to make buttons extra large.
.btn--centered
Modifier to make the button centered.
.is-disabled
Disable the button. The same styles will be applied if you use the disabled attribute. The disabled attribute is the preferred method.

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.

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
WebsiteA computer monitor with a mouse cursor displayed in the center www.windycityhabitat.org
PhoneA smartphone (312) 563-0296

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.js
  • dist/js/toggle-class.bundle.js
More newsletters

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.

Expandable Teaser

This is the Expandable Teaser component which appears at the top of the Donation page. It has a a title, text block, image and button.

Donation campaign heading copy.

This text will always be visible. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo ...

This text is hidden until the user clicks on the Read More button. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed ex sit amet lorem finibus pretium nec vitae nisl. Donec vitae dui ut felis convallis tristique. Cras nec lacus erat. Nulla massa odio

This text is hidden until the user clicks on the Read More button. Cras nec lacus erat. Nulla massa odio Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

test image

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.

Form CTA

This is the form-cta component which appears on the home page. This component allows the user to toggle open and closed the different elements. There are three instances of this: Donate, Subscribe and Get Local.

Requires: dist/js/toggle-class-es6.js

Donate Donate

At Habitat for Humanity International, we build. We build because we believe that everyone, everywhere, should have a healthy, affordable place to call home.

Get involved Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.

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

Once you fill out the trip application, a team leader will be in touch to tell you more about this trip and answer any question you may have.
Apply now Read the Global Village trip FAQ

Form CTA Full

There are two alternate Form CTAs: one for newsleter signup, the other for donations.

Donate

At Habitat for Humanity International, we build. We build because we believe that everyone, everywhere, should have a healthy, affordable place to call home. More than that we build communities, we build hope and we build the opportunity for families to help themselves.

Form CTA Promo

The Form CTA Promo component uses the following components:

Get involved Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.

Form CTA Single

This is an individual instance of each CTA within the form-cta component.

Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.
Get Involved
Optional secondary text that links.
.form-cta-single--apple-green
Green color variation.

Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.
Get Involved
Optional secondary text that links.
.form-cta-single--hot-orange
Orange color variation.

Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.
Get Involved
Optional secondary text that links.
.form-cta-single--stiletto-red
Red color variation.

Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.
Get Involved
Optional secondary text that links.

Google Map (Gmap)

This is a Google map. It leverages the Google Maps JavaScript API.

Usage:

  • Include the @h4h_theme/gmap/gmap.twig file 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:user@example.com",
          "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
        }
      }
    ]
  }
]

Header

The header is made up of the following components:

Microsite Header

The header for microsites is made up of the following components:

Header Plain

This is the Header Plain component that appears on donation pages.

Hero

The hero is made up of two reusable components:

It also contains an Image, a Title and a Description.

.hero--video
If the hero image is a video, overlay a play button over the image.
.hero--no-image
If the image field is empty.
.hero--donate
denotes donate form is present.
.hero--dark
Adds a dark color as the textbox background.

hr

This is the hr component that appears on the Donate form.


.hr--hot-orange
Alternate version of the hr.

.hr--mb
Margin bottom modifier to add margin below the <hr>.

Index List

The index list component is a 4 column list of items.

Argentina

Bangladesh

Bolivia

Brazil

Bulgaria

Canada

Chile

Columbia

Costa Rica

Dominican Republic

Egypt

Ethiopia

.index-list--2
Modifier to create a 2 column list of items.

Argentina

Bangladesh

Bolivia

Brazil

Bulgaria

Canada

Chile

Columbia

Costa Rica

Dominican Republic

Egypt

Ethiopia

.index-list--no-pad
Modifier to remove default padding.

Argentina

Bangladesh

Bolivia

Brazil

Bulgaria

Canada

Chile

Columbia

Costa Rica

Dominican Republic

Egypt

Ethiopia

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.

View card samples
You will be able to personalize your print card or e-card for your recipent and special occasion after your donation has been processed.

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.

Listing

The listing component is used to display search results for affiliates or Restores. It's not used within the main site search results.

Media Item

This component appears on stories pages and contains an image and a caption.

test image
Image caption Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

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

logo

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.

.media-object--left
image floated left.

About Chicago Habitat for Humanity

logo

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.

.media-object--no-wrap
text will not wrap around the image

About Chicago Habitat for Humanity

logo

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.

.media-object--small
Super small margin around the image.

About Chicago Habitat for Humanity

logo

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.

Messages

The messages component is mostly a duplicate of the Classy theme styled system messages. There are slight modifiers added to give more flexibility.

.messages--status
Status system message.
.messages--error
Error system message.
.messages--warning
Warning system message.
.messages--plain
Removes the background image if there is one. In this example the messages--warning modifier is used as well.

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.

This component leverages the Magnific Popup library.

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

Collegiate Challenge is a year-round alternative break program.

Women Build

Learn construction skills while building homes for women and children.

A Brush with Kindness

Help renovate existing homes through painting, landscaping, weatherization and minor repair projects.
See All Habitat Programs

Events

Winter Warriors

Now - March
Do you think you're tough? Like, really tough? Then prove it! Join Habitat's Chicago construction team as they brave the Chicago cold this winter. The West Pullman build site remains open to volunteers every Thursday, Friday and Saturday throughout the winter and every time you volunteer.

Pager

The Basic Pager contains Previous and Next buttons with a list of ennumerated pages. The Load More variant contains a single button

.pager--load-more
Ajax pager.

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.

.promo--short
Short version of the promo.

Promo Grid

The promo grid a container for the following components

Get involved Get involved

Find Local Affiliates, Volunteer Opportunities, Restore Locations, News, Events.

Section Grid

The Section Grid is made up of the following components:

Stories

Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.

test image

My wish

The Fourney family grows closer in their Habitat home. Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.

Read more

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--flush
Modifier that provides a margin-less, padding-less container.

Section Title component

This Is a Subtitle

Lorem Ipsum Dolor Ame Mauris Magna Elit, Moestie at Temport.

.section-title--alt1
Alternate display 1

Section Title component

.section-title--alt2
Alternate display 2

Section Title component

.section-title--alt3
Alternate display 3

Section Title component

Share

This is the Share component. It's an example.

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.js
  • src/components/slick-carousel/vendors/slick.css
  • dist/js/slideshow.bundle.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

1 / 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit

consectetur adipiscing elit.amet, consectetur adipiscing elit.

Social Bar

This is the social bar. It contains links to different social media websites.

.social-bar--dark
Modifier to make the buttons darker.

Spacer

The spacer component is used to insert extra margin between components. There are modifiers that give this component varying margin sizes.

.spacer--2x
Add double the margin added by default.
.spacer--3x
Add triple the margin added by default.

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.
test image
Image caption Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

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.

  1. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  2. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  3. 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.

SVG Map

This is a map created with a svg. It leverages the AM Charts library.

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
Trip type:
Home Construction
Argentina
Trip date:
May 19-28, 2017
Trip type:
Healthy Homes
Brazil
Trip date:
Dec 28, 2016 - Jan 5, 2017
Trip type:
Vulnerable Populations
Cambodia
Trip date:
Nov 4-13, 2016
Trip type:
Disaster Recovery
Chile
Trip date:
Apr 15, 2017
Trip type:
Community Development
El Salvador
Trip date:
Dec 4, 2016
Trip type:
Critical Home Development
Kenya
Trip date:
Nov 4 - 13, 2016
Trip type:
Women Build
Philippines
Trip date:
Nov 12 - 26, 2016
Trip type:
Green Building
Thailand
Trip date:
Jan 19 - 28, 2017
Trip type:
Advocacy
Zambia
Trip date:
Nov 12 - 26, 2016
Trip type:
Blitz Build

Table Filters

The Table filters are included above the table display.

Show trips from:

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

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.

.tabs--white
White tabs when using different bg color for component.

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.

Tags

This component appears anywhere tags are needed.

Teaser

The teaser component promotes a piece of content and provides a call to action.

Note: There's also a modifier that can be applied to the parent container. .teaser--four-colors. By default blue, green and red are alternated if there are multiple teasers side by side. The .teaser--four-colors modifier adds in $midnight-blue to the mix.

.teaser--sbs
Side by side variation of the teaser component.
.teaser--pacific-blue
$color-pacific-blue color variation.
.teaser--apple-green
$color-apple-green color variation.
.teaser--stiletto-red
$color-stiletto-red color variation.
.teaser--midnight-blue
$color-midnight-blue color variation.
.teaser--hot-orange
$color-hot-orange color variation.

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.

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..

.trip-icon--blitz-build
Blitz Build
.trip-icon--disaster-recovery
Disaster Recovery
.trip-icon--home-construction
Home Construction
.trip-icon--community-development
Community Development
.trip-icon--women-build
Women Build
.trip-icon--healthy-homes
Healthy Homes
.trip-icon--critical-home-development
Critical Home Development
.trip-icon--vulnerable-populations
Vulnerable Populations
.trip-icon--advocacy
Advocacy
.trip-icon--green-building
Green Building

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.js
  • dist/js/video.bundle.js
Image caption Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
.video--constrained
Restrict max-width to 765px.
Image caption Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.
.video--16x9
Size the container correctly for a 16:9 aspect ratio. Note: The image source must also be a 16:9 aspect ratio.
Image caption Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

Main Menu

This is the main site menu. It expands to reveal subnavigation.

Mobile Bar

The mobile bar controls the menu on smaller viewport widths. Only shown for smaller devices. Resize the browser to see the component.