3Components
Generally, we like to create components for content that is used more than once.
3.1Collection Carousel
The collection carousel is used to display groups of things like corps members, listings, and organizations. Each card can be a different type, but the collection can be only navy color.
This component uses the text header component for its intro.
Collection Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div id="first">
<section>
<div class="row">
<div class="columns small-10 large-8 small-centered">
<div class="cms__text-intro">
<h3 class="heading--medium text-center">Collection Headline</h3>
<h4 class="subheader color-deep-medium-navy">This is an optional subheader, it should be around 100 characters. You can align it left or center.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="carousel js-carousel flex-slider" id="first">
<a class="flex-card" href="#first-0">
<div class="flex-card__inner">
<div class="flex-card__wrapper">
<noscript>
<div class="flex-card__background-image grayscale" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__background-image grayscale lazyload" data-bg="https://placehold.it/400x480"></div>
<div class="flex-card__background-gradient"></div>
<div class="flex-card__overlay" style="background-color: #33475C;"></div>
<div class="flex-card__text-wrapper">
<h3 class="flex-card__title">Card Headline</h3>
<p class="flex-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex-card__link">
<div class="flex-card__link-image mr1" style="background-image: url(https://placehold.it/40x20);"></div>
<span class="flex-card__link-text prh">Explore Something</span>
<svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
</div>
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-1">
<div class="flex-card__inner">
<div class="flex-card__wrapper">
<noscript>
<div class="flex-card__background-image grayscale" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__background-image grayscale lazyload" data-bg="https://placehold.it/400x480"></div>
<div class="flex-card__background-gradient"></div>
<div class="flex-card__overlay" style="background-color: #33475C;"></div>
<div class="flex-card__text-wrapper">
<h3 class="flex-card__title">Card Headline</h3>
<p class="flex-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex-card__link">
<div class="flex-card__link-image mr1" style="background-image: url(https://placehold.it/40x20);"></div>
<span class="flex-card__link-text prh">Explore Something</span>
<svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
</div>
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-2">
<div class="flex-card__inner">
<div class="flex-card__wrapper">
<noscript>
<div class="flex-card__background-image grayscale" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__background-image grayscale lazyload" data-bg="https://placehold.it/400x480"></div>
<div class="flex-card__background-gradient"></div>
<div class="flex-card__overlay" style="background-color: #33475C;"></div>
<div class="flex-card__text-wrapper">
<h3 class="flex-card__title">Card Headline</h3>
<p class="flex-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex-card__link">
<div class="flex-card__link-image mr1" style="background-image: url(https://placehold.it/40x20);"></div>
<span class="flex-card__link-text prh">Explore Something</span>
<svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
</div>
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-3">
<div class="flex-card__inner">
<div class="flex-card__wrapper">
<noscript>
<div class="flex-card__background-image grayscale" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__background-image grayscale lazyload" data-bg="https://placehold.it/400x480"></div>
<div class="flex-card__background-gradient"></div>
<div class="flex-card__overlay" style="background-color: #33475C;"></div>
<div class="flex-card__text-wrapper">
<h3 class="flex-card__title">Card Headline</h3>
<p class="flex-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex-card__link">
<div class="flex-card__link-image mr1" style="background-image: url(https://placehold.it/40x20);"></div>
<span class="flex-card__link-text prh">Explore Something</span>
<svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
</div>
</div>
</div>
</div>
</a>
</div>
</section>
</div>
3.2Call to Action (CTA) Block
The CTA component consists of a background image, heading, content, and button. The CTA component mimics the font and spacing of the text component by using the same classes but it doesn't directly import it because of layout reasons.
CTA Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
While there is no “perfect” time or age at which to do a service year, here are some popular times. No matter when you decide to do your service year, the experience will transform your life and the community you serve. Meet some of our alums to learn how their service year impacted their lives and career choices. Still not convinced? Have unanswered questions? Make sure you’re logged into ask an alum.
<div class="cta">
<div class="cta__image" style="background-image: url(https://placehold.it/1300x900)">
<div class="cta__wrapper">
<h3 class="heading--medium text-center color-white">CTA Headline</h3>
<h4 class="subheader color-white text-left">
This is an optional subheader, it should be around 100 characters. You can align it left or center.
</h4>
<p class="color-white cta__content">
While there is no “perfect” time or age at which to do a service year, here are some popular times. No matter when you decide to do your service year, the experience will transform your life and the community you serve. Meet some of our alums to learn how their service year impacted their lives and career choices. Still not convinced? Have unanswered questions? Make sure you’re logged into ask an alum.
</p>
<br />
<div class="text-center">
<a href="#" class="button button--primary text-center">Join Now</a>
</div>
</div>
</div>
</div>
3.3Featured Profile
The featured profile component contains a feature type, a heading, body text, an optional view profile button and an image.
It can feature:
- An organization
- A position
- A listing
- A network
- A corps member
The content is always offset to the right of the image. The content can be Medium Red (#E3744F) or Navy (#33475c).
Featured Organization
Example Headline
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
View ProfileFeatured Organization
Example Headline
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
View Profile
<div class="mb2">
<section class="row side-by-side side-by-side--inline-right">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #33475c">
<div>
<h4 class="heading--micro color-white">Featured Organization</h4>
<h3 class="side-by-side__heading">Example Headline</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
<a href="#" class="button button--secondary mt1 mb0">View Profile</a>
</div>
</div>
</div>
</section>
</div>
<div class="mb2">
<section class="row side-by-side side-by-side--inline-right">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #e57854">
<div>
<h4 class="heading--micro color-white">Featured Organization</h4>
<h3 class="side-by-side__heading">Example Headline</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
<a href="#" class="button button--secondary mt1 mb0">View Profile</a>
</div>
</div>
</div>
</section>
</div>
3.4Header Component
The header component has to contain a Headline or Sub-headline, can contain Label. Headline or Sub-headline is obligatory, the rest fields are optional and any combination of the 3 may be used. The font size and weight will automatically adjust depending on which fields are displayed. It can contain an optional search bar or optional action button. Either an image or video from vimeo may be used as the background.
The header component has the class .hero__overlay which applies an overlay of navy (#33475C) with 60% opacity on the background image. This overlay is intended to enhance text visibility.
Label, Headline, Subheadline:
- Label - Normal
- Headline - Large
- Subheadline - Small (unbolded)
Headline, Subheadline:
- Headline - Large
- Subheadline - Small (unbolded)
Label, Subheadline:
- Label - Normal
- Subheadline - Large (bold)
Label, Headline:
- Label - Normal
- Headline - Large
Headline:
- Headline - Large
Subheadline:
- Subheadline - Large (bold)
Label:
- Label - Normal
This is a headline.
This is a subheadline.
This is a headline.
This is a subheadline.
<section class="header">
<header class="hero hero--header hero--last-paradise lazyloaded" data-bg="/styleguide/images/backgrounds/pick_axe_brian.jpeg" style="background-image: url('/styleguide/images/backgrounds/pick_axe_brian.jpeg');">
<div class="hero__overlay"></div>
<div class="hero__content antialiased text-center">
<div class="row small-collapse">
<div class="columns small-11 small-centered medium-10 large-9">
<h1 class="hero__heading mb0 pb0">This is a headline.</h1>
<p class="hero__subheading hero__subheading--no-shadow">This is a subheadline.</p>
<div class="discovery-bar">
<div class="discovery-bar__inner">
<div class="discovery-bar__heading show-for-small-only">Find Opportunities <span class="discovery-bar__dismiss js-dismiss-discovery">×</span></div>
<input id="id_type" name="type" type="hidden" value="listings">
<input id="id_per_page" name="per_page" type="hidden">
<input class="js-lat" id="id_latitude" name="latitude" type="hidden">
<input class="js-lng" id="id_longitude" name="longitude" type="hidden">
<input id="id_distance" name="distance" type="hidden">
<input id="id_location" name="location" type="hidden">
<div class="discovery-bar__input">
<label>What are you interested in?</label>
<select id="id_focusareas" name="focusareas">
<option value="" selected="selected">Choose Your Focus Area</option>
<option value="aging">Aging</option>
<option value="animals">Animals</option>
<option value="arts-culture">Arts & Culture</option>
</select>
</div>
<div class="discovery-bar__input">
<label>Where do you want to go?</label>
<div class="discovery-bar-input__location geo-select">
<input type="text" placeholder="Any Location">
<svg style="top:38%" class="svg-icon geo-select__icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
</div>
</div>
<div class="js-places-response"></div>
<div class="discovery-bar__submit">
<button class="button">Find your opportunity</button>
</div>
</div>
</div>
<div class="hide-for-medium text-center">
<button class="button mt1 mb0 font-weight-bold js-show-discovery">Find your opportunity</button>
</div>
</div>
</div>
</div>
</header>
</section>
<section class="header mt2">
<header class="hero hero--header hero--last-paradise lazyloaded" data-bg="/styleguide/images/backgrounds/pick_axe_brian.jpeg" style="background-image: url('/styleguide/images/backgrounds/pick_axe_brian.jpeg');">
<div class="hero__overlay"></div>
<div class="hero__content antialiased text-center">
<div class="row small-collapse">
<div class="columns small-11 small-centered medium-10 large-9">
<h1 class="hero__heading mb0 pb0">This is a headline.</h1>
<p class="hero__subheading hero__subheading-- hero__subheading--no-shadow">This is a subheadline.</p>
</div>
</div>
<a href="" class="button hero__action-button">Action Button</a>
</div>
</header>
</section>
3.5Info Carousel
The information carousel is used to display generic content in cards with supplementary content displayed in a modal when a card is clicked.
This component uses the text header component for it's intro.
The cards on the carousel display differently when viewed on mobile and desktop.
The margins around cards in the carousel are less on mobile than on desktop so that the next and previous cards are visible.
The opacity of next and previous cards for mobile is 75% and for desktop it is 50%.
There is no hover state for the cards when viewed on mobile.
Information Carousel Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div id="first">
<section>
<div class="row">
<div class="columns">
<h2>Information Carousel Headline</h2>
<h4 class="subheader color-deep-medium-navy">This is an optional subheader, it should be around 100 characters. You can align it left or center.</h4>
<p class="mb2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="info-carousel js-carousel flex-slider" id="first" data-single-slide-carousel>
<a class="flex-card" href="#first-0">
<div class="flex-card__inner">
<noscript>
<div class="flex-card__header" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<div class="flex-card__detail">
<h3 class="flex-card__title">First card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex-card__link">
<span class="link--primary">Read More</span>
</p>
<div class="show-for-sr" aria-hidden="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-1">
<div class="flex-card__inner">
<noscript>
<div class="flex-card__header" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<div class="flex-card__detail">
<h3 class="flex-card__title">second card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex-card__link">
<span class="link--primary">Read More</span>
</p>
<div class="show-for-sr" aria-hidden="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-2">
<div class="flex-card__inner">
<noscript>
<div class="flex-card__header" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<div class="flex-card__detail">
<h3 class="flex-card__title">third card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex-card__link">
<span class="link--primary">Read More</span>
</p>
<div class="show-for-sr" aria-hidden="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</a>
<a class="flex-card" href="#first-3">
<div class="flex-card__inner">
<noscript>
<div class="flex-card__header" style="background-image: url(https://placehold.it/640x480)"></div>
</noscript>
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<div class="flex-card__detail">
<h3 class="flex-card__title">fourth card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex-card__link">
<span class="link--primary">Read More</span>
</p>
<div class="show-for-sr" aria-hidden="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</a>
</div>
<script type="text/x-underscore-template" id="first-modal-template">
<div class="info-carousel-modal">
</div>
</script>
<script type="text/x-underscore-template" id="first-0-template">
<div class="flex-card flex-card--full-bleed flex-card--scroll mb0">
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<button class="bbm-modal__close js-cancel" aria-label="close modal" type="button">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
</button>
<div class="flex-card__detail bbm-modal__section">
<h2 class="flex-card__title">First card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</script>
<script type="text/x-underscore-template" id="first-1-template">
<div class="flex-card flex-card--full-bleed flex-card--scroll mb0">
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<button class="bbm-modal__close js-cancel" aria-label="close modal" type="button">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
</button>
<div class="flex-card__detail bbm-modal__section">
<h2 class="flex-card__title">First card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</script>
<script type="text/x-underscore-template" id="first-2-template">
<div class="flex-card flex-card--full-bleed flex-card--scroll mb0">
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<button class="bbm-modal__close js-cancel" aria-label="close modal" type="button">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
</button>
<div class="flex-card__detail bbm-modal__section">
<h2 class="flex-card__title">First card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</script>
<script type="text/x-underscore-template" id="first-3-template">
<div class="flex-card flex-card--full-bleed flex-card--scroll mb0">
<div class="flex-card__header lazyload" data-bg="https://placehold.it/640x480"></div>
<button class="bbm-modal__close js-cancel" aria-label="close modal" type="button">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
</button>
<div class="flex-card__detail bbm-modal__section">
<h2 class="flex-card__title">First card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</script>
</section>
<div id="first-modal"></div>
3.6Listing Map
Displays information about the different locations available for serving in a Service Year.
This component uses the text header component for its intro
but adds the .color-white class to explicitly overwrite the text color.
Listing Map Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
United States
US Territories
Puerto Rico
US Virgin Islands
Guam
<section class="listing-map f-smoothOn">
<div class="row">
<div class="columns small-10 large-8 small-centered">
<div class="cms__text-intro">
<h2 class="heading--medium color-white text-center">Listing Map Headline</h2>
<h4 class="subheading color-deep-medium-navy">This is an optional subheader, it should be around 100 characters. You can align it left or center.</h4>
<p class="color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="row">
<div class="columns medium-5 large-4">
<div class="listing-filter js-listing-map-filter">
<div class="listing-filter__input-wrap">
<input class="listing-filter__input" placeholder="Search" type="text">
<button class="listing-filter__input-clear" style="display: none;">
<svg class="svg-icon svg-icon--white svg-icon--small" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
<span class="show-for-sr">Clear</span>
</button>
<svg class="svg-icon listing-filter__input-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--search"></use></svg>
</div>
<div class="listing-filter__locations" style="overflow-y: hidden;">
<div class="listing-filter__location">
<span class="listing-filter__name">Alabama</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=AL&type=listings">4 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Alaska</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=AK&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">American Samoa</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=AS&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Arizona</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=AZ&type=listings">10 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Arkansas</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=AR&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">California</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=CA&type=listings">11 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Colorado</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=CO&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Connecticut</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=CT&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Dakota</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=DK&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Delaware</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=DE&type=listings">3 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">District of Columbia</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=DC&type=listings">47 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Florida</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=FL&type=listings">4 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Georgia</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=GA&type=listings">4 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Guam</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=GU&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Hawaii</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=HI&type=listings">9 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Idaho</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=ID&type=listings">12 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Illinois</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=IL&type=listings">3 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Indiana</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=IN&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Iowa</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=IA&type=listings">3 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Kansas</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=KS&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Kentucky</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=KY&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Louisiana</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=LA&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Maine</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=ME&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Maryland</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MD&type=listings">7 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Massachusetts</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MA&type=listings">12 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Michigan</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MI&type=listings">9 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Minnesota</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MN&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Mississippi</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MS&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Missouri</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MO&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Montana</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MT&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Nebraska</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NE&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Nevada</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NV&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">New Hampshire</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NH&type=listings">9 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">New Jersey</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NJ&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">New Mexico</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NM&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">New York</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NY&type=listings">13 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">North Carolina</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=NC&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">North Dakota</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=ND&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Northern Mariana Isl...</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=MP&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Ohio</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=OH&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Oklahoma</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=OK&type=listings">3 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Oregon</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=OR&type=listings">9 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Orleans</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=OL&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Pennsylvania</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=PA&type=listings">5 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Philippine Islands</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=PI&type=listings">0 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Puerto Rico</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=PR&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Rhode Island</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=RI&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">South Carolina</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=SC&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">South Dakota</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=SD&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Tennessee</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=TN&type=listings">3 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Texas</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=TX&type=listings">4 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Utah</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=UT&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Vermont</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=VT&type=listings">5 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Virgin Islands</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=VI&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Virginia</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=VA&type=listings">6 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Washington</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=WA&type=listings">2 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">West Virginia</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=WV&type=listings">1 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Wisconsin</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=WI&type=listings">9 listings</a>
</span>
</div>
<div class="listing-filter__location">
<span class="listing-filter__name">Wyoming</span>
<span class="listing-filter__listings">
<a class="link--secondary right" href="/search/?q=WY&type=listings">2 listings</a>
</span>
</div>
</div>
</div>
</div>
<div class="columns medium-7 large-8">
<div class="listing-map__map">
<h3 class="listing-map__type heading--small">United States</h3>
<img class="mb2" src="https://placehold.it/1500x1500" alt="">
<div class="row">
<div class="columns">
<h3 class="listing-map__type heading--small">US Territories</h3>
</div>
<div class="columns medium-4">
<p class="listing-map__territory">Puerto Rico</p>
<img class="listing-map__territory-img" src="https://placehold.it/280x184" alt="">
</div>
<div class="columns medium-4">
<p class="listing-map__territory">US Virgin Islands</p>
<img class="listing-map__territory-img" src="https://placehold.it/280x184" alt="">
</div>
<div class="columns medium-4 end">
<p class="listing-map__territory">Guam</p>
<img class="listing-map__territory-img" src="https://placehold.it/280x184" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
3.7Side by Side
The side by side component contains a heading, body text, and an image. The content has the ability to be offset. The content can be Medium Red (#E3744F) or Navy (#33475c).
Inline Left style
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
Inline Right style
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
Offset Left style
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
Offset Right style
The duration of the application process varies between programs — some organizations are quick and accept applicants in a matter of a few weeks, while others can take up to several months.
<div class="mb2">
<section class="row side-by-side side-by-side--inline-left">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #33475c">
<h3 class="side-by-side__heading">Inline Left style</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
</div>
</div>
</section>
</div>
<div class="mb2">
<section class="row side-by-side side-by-side--inline-right">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #e57854">
<h3 class="side-by-side__heading">Inline Right style</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
</div>
</div>
</section>
</div>
<div class="mb2">
<section class="row side-by-side side-by-side--offset-left">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #e57854">
<h3 class="side-by-side__heading">Offset Left style</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
</div>
</div>
</section>
</div>
<div class="mb2">
<section class="row side-by-side side-by-side--offset-right">
<div class="side-by-side__image" style="background-image: url(https://placehold.it/1300x900)"></div>
<div class="side-by-side__wrapper small-12 small-centered medium-6 medium-uncentered large-6 large-uncentered">
<div class="side-by-side__content" style="background-color: #33475c">
<h3 class="side-by-side__heading">Offset Right style</h3>
<p>The duration of the application process varies between programs — some organizations are quick and accept
applicants in a matter of a few weeks, while others can take up to several months.</p>
</div>
</div>
</section>
</div>
3.8Single Photo Component
This component displays a photo that spans the full width of the grid.
<section class="single-photo">
<div class="row">
<div class="columns small-12">
<img data-src="https://placehold.it/1920x900" class="lazyload single-photo__image">
<noscript>
<img src="https://placehold.it/1920x900" class="single-photo__image">
</noscript>
</div>
</div>
</section>
3.9Step Component
The step component is used to display a summary of a workflow with images and text describing them.
This component uses the text header component for its intro.
Step Component Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
<section class="step">
<div class="row">
<div class="columns small-10 large-8 small-centered">
<div class="cms__text-intro">
<h3 class="heading--medium text-center">Step Component Headline</h3>
<h4 class="subheader color-deep-medium-navy">This is an optional subheader, it should be around 100 characters. You can align it left or center</h4>
<p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing</em> elit, sed do eiusmod tempor <a href="https://google.com">incididunt ut labore</a> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="row">
<div class="columns small-10 small-centered text-center">
<div class="row step__wrapper">
<div class="columns medium-4">
<div class="step-item">
<img class="step-item__image" src="https://placehold.it/400x400" alt="">
<h3 class="heading--micro step-item__title">Lorem ipsum dolor</h3>
<p><strong>Lorem ipsum</strong> dolor sit amet,<em> consectetur adipiscing</em> elit, <a href="https://google.com">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div class="columns medium-4">
<div class="step-item">
<img class="step-item__image" src="https://placehold.it/400x400" alt="">
<h3 class="heading--micro step-item__title">Lorem ipsum dolor</h3>
<p><strong>Lorem ipsum</strong> dolor sit amet,<em> consectetur adipiscing</em> elit, <a href="https://google.com">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div class="columns medium-4">
<div class="step-item">
<img class="step-item__image" src="https://placehold.it/400x400" alt="">
<h3 class="heading--micro step-item__title">Lorem ipsum dolor</h3>
<p><strong>Lorem ipsum</strong> dolor sit amet,<em> consectetur adipiscing</em> elit, <a href="https://google.com">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
</div>
</div>
</section>
3.10Story Carousel
The story carousel is used to display user testimonial content in slides with associated imagery/video.
Story Carousel Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<section class="story-carousel js-story-carousel" data-id="test-story">
<div class="row">
<div class="columns small-10 large-8 small-centered">
<div class="cms__text-intro">
<h3 class="heading--medium text-center">Story Carousel Headline</h3>
<h4 class="subheader color-deep-medium-navy">This is an optional subheader, it should be around 100
characters. You can align it left or center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="row hide-for-no-js">
<div class="columns">
<div class="avatar-slider">
<div class="avatar-slider__inner glide glide--slider glide--horizontal" id="js-avatars-test-story">
<div class="glide__wrapper">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<div class="glide__slide" data-index="0">
<noscript>
<div class="avatar-slider__avatar cover"
style="background-image: url(https://placehold.it/200x200)">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</noscript>
<div class="avatar-slider__avatar cover lazyload"
data-bg="https://placehold.it/200x200" data-glide-dir="=0"
data-glide-trigger="#js-avatars-test-story #js-stories-test-story"
role="button">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</div>
<div class="glide__slide active" data-index="1">
<noscript>
<div class="avatar-slider__avatar cover"
style="background-image: url(https://placehold.it/200x200)">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</noscript>
<div class="avatar-slider__avatar cover lazyload"
data-bg="https://placehold.it/200x200" data-glide-dir="=1"
data-glide-trigger="#js-avatars-test-story #js-stories-test-story"
role="button">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</div>
<div class="glide__slide" data-index="2">
<noscript>
<div class="avatar-slider__avatar cover"
style="background-image: url(https://placehold.it/200x200)">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</noscript>
<div class="avatar-slider__avatar cover lazyload"
data-bg="https://placehold.it/200x200" data-glide-dir="=2"
data-glide-trigger="#js-avatars-test-story #js-stories-test-story"
role="button">
<span class="show-for-sr">Corey Benjamin</span>
</div>
</div>
</div>
</div>
</div>
<div class="glide__arrows">
<button class="glide__arrow prev glide__arrow--left" data-glide-dir="<">
<svg class="svg-icon svg-icon--white" role="presentation" aria-labelledby="title">
<use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-left"></use>
</svg>
<span class="show-for-sr">Previous</span>
</button>
<button class="glide__arrow next glide__arrow--right" data-glide-dir=">">
<svg class="svg-icon svg-icon--white" role="presentation" aria-labelledby="title">
<use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
</svg>
<span class="show-for-sr">Next</span>
</button>
</div>
</div>
<div class="avatar-slider__decor">
<div class="avatar-slider__indicator"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="columns medium-8 medium-centered large-11">
<div class="story-slider glide mb0 glide--slider glide--horizontal" id="js-stories-test-story">
<div class="glide__wrapper">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<div class="glide__slide" data-index="0">
<div class="row story-slider__vcenter">
<div class="columns large-6">
<div class="story-slider__text">
<div class="text-center large-text-left">
<p class="story-slider__title mb0">
Corey Benjamin
</p>
<p>Public Allies 2014-15</p>
</div>
<blockquote class="story-slider__pullquote">
<p>“<em>I am helping to prepare kids for college and a career, and that
literally starts from cradle to career or college.</em>”</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="columns large-6">
<div class="story-slider__media media-border">
<div class="story-slider__media-inner flex-video widescreen mb0 pt0">
<video class=" lazyload" data-poster="https://placehold.it/852x480"
preload="auto">
<source
data-src="https://player.vimeo.com/external/182139654.hd.mp4?s=fcebd5e05a9f667ca59cde23b9a3fa685136b0bf&profile_id=174"
type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
<button class="story-slider__play js-play">
<span class="show-for-sr">Play</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="glide__slide active" data-index="1">
<div class="row story-slider__vcenter">
<div class="columns large-6">
<div class="story-slider__text">
<div class="text-center large-text-left">
<p class="story-slider__title mb0">
Corey Benjamin
</p>
<p>Public Allies 2014-15</p>
</div>
<blockquote class="story-slider__pullquote">
<p>“I am helping to prepare kids for college and a career, and that
literally starts from cradle to career or college.”</p>
</blockquote>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </em></p>
</div>
</div>
<div class="columns large-6">
<div class="story-slider__media media-border">
<div class="story-slider__media-inner flex-video widescreen mb0 pt0">
<video class=" lazyload" data-poster="https://placehold.it/852x480"
preload="auto">
<source
data-src="https://player.vimeo.com/external/182139654.hd.mp4?s=fcebd5e05a9f667ca59cde23b9a3fa685136b0bf&profile_id=174"
type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
<button class="story-slider__play js-play">
<span class="show-for-sr">Play</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="glide__slide" data-index="2">
<div class="row story-slider__vcenter">
<div class="columns large-6">
<div class="story-slider__text">
<div class="text-center large-text-left">
<p class="story-slider__title mb0">
Corey Benjamin
</p>
<p>Public Allies 2014-15</p>
</div>
<blockquote class="story-slider__pullquote">
<p>“I am helping to prepare kids for college and a career, and that
literally starts from cradle to career or college.”</p>
</blockquote>
<p><a href="http://isl.co">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a><br><br></p>
<ul>
<li>List</li>
</ul>
<ol>
<li>List</li>
<li>
<blockquote>Quote</blockquote>
</li>
<li>Code</li>
<li>Big Text</li>
</ol>
<p></p>
</div>
</div>
<div class="columns large-6">
<div class="story-slider__media media-border">
<div class="story-slider__media-inner flex-video widescreen mb0 pt0">
<video class="lazyload" data-poster="https://placehold.it/852x480"
preload="none">
<source
data-src="https://player.vimeo.com/external/182139654.hd.mp4?s=fcebd5e05a9f667ca59cde23b9a3fa685136b0bf&profile_id=174"
type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
<button class="story-slider__play js-play">
<span class="show-for-sr">Play</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
3.11Text Block
This component is used to display text on a page or within another component. It can contain a headline, subheader and body copy. It can contain one, two or all three types of text.
The header is styled by applying .heading--medium
and it's font is Avenir Next with a font weight of 700.
The subheader is styled by applying .subheader and
it's font is Avenir Next with a font weight of 400.
The header's text alignment is always centered. The subheader's text alignment is configurable in the CMS. The paragraph's text alignment is always left.
Text Block Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facillimum id quidem est, inquam. Quae cum essent dicta, discessimus. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. An quod ita callida est, ut optime possit architectari voluptates? Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset.
<section class="text-block cms__component">
<div class="row">
<div class="columns small-10 large-8 small-centered">
<h3 class="heading--medium text-center">
Text Block Headline
</h3>
<h4 class="subheader color-deep-medium-navy">
This is an optional subheader, it should be around 100 characters. You can align it left or center.
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facillimum id quidem est, inquam. Quae cum essent dicta, discessimus. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. An quod ita callida est, ut optime possit architectari voluptates? Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset.</p>
</div>
</div>
</section>
3.12Video
The video is used to display one or multiple videos on a page. It can contain a combination of youtube and vimeo videos.
It has 3 iterations:
- A simple full width (within the grid) video with an on overlay
- A side by side video that has the video either on the left or right side and a headline and a paragraph on the other side
- A video galllery that allows for multiple videos. It shows thumbnails for each video and allows users to select the one they want to see.
The rules for these 3 versions are as such:
- If there's a single video with headline & subheadline, the single wide view is rendered
- If there's a single video with a paragraph of text & headline, the side by side version of the video is displayed
- If there are multiple videos, the gallery version is displayed
This component uses the text header component for its intro; but only for the gallery variant!! The other video variants don't have an intro.
First Video Head
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulsi recurrant? Nam si amitti vita beata potest, beata esse non potest.
Video headline
This is an optional subheader, it should be around 100 characters. You can align it left or center
Watch our inspirational videos now about hosting corps members.
First Video Head
Inspirational video about hosting corps members through Service Year.
Second Video Head
Inspirational video about hosting corps members through Service Year.
Third Video Subtitle
Inspirational video about hosting corps members through Service Year.
First Video Head
Inspirational video about hosting corps members through Service Year.
<div class="relative">
<section class="js-video cms__component video video--full clearfix">
<div class="relative clearfix">
<div data-plyr-provider="vimeo" data-plyr-embed-id="195526942" class="js-player"></div>
<div class="video__overlay">
<div class="video__poster" style="background-image: url('/media/cms/video/0.jpg')" aria-hidden="true"></div>
<h1 class="video__headline">First Video Head</h1>
<h2 class="video__subtitle"><div>Inspirational video about hosting corps members through Service Year.</div></h2>
<button class="video__play js-play-video" aria-label="Play Video">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--play"></use></svg>
</button>
</div>
</div>
</section>
<br>
<section class="js-video video cms__component video--side-by-side video--left clearfix">
<div class="columns small-12">
<div class="row collapse">
<div class="columns small-12 medium-4 medium-push-8">
<div class="video__side">
<h1 class="video__headline">First Video Head</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulsi recurrant? Nam si amitti vita beata potest, beata esse non potest.</div>
</div>
</div>
<div class="columns small-12 medium-8 medium-pull-4">
<div class="relative">
<div data-plyr-provider="vimeo" data-plyr-embed-id="195526942" class="js-player"></div>
<div class="video__overlay">
<div class="video__poster" style="background-image: url('/media/cms/video/0.jpg')" aria-hidden="true"></div>
<button class="video__play js-play-video" aria-label="Play Video">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--play"></use></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="js-video video cms__component video--gallery clearfix">
<div class="row">
<div class="small-10 large-8 small-centered columns">
<div class="cms__text-intro">
<h3 class="heading--medium text-center">Video headline</h3>
<h4 class="subheader color-deep-medium-navy">
This is an optional subheader, it should be around 100 characters. You can align it left or center
</h4>
<p>Watch our inspirational videos now about hosting corps members.</p>
</div>
</div>
</div>
<div class="columns small-12">
<div class="relative clearfix">
<div data-plyr-provider="vimeo" data-plyr-embed-id="195526942" class="js-player"></div>
<div class="video__overlay">
<div class="video__poster js-video-poster" style="background-image: url('/media/cms/video/0.jpg')" aria-hidden="true"></div>
<h2 class="video__headline js-overlay-headline">First Video Head</h2>
<div class="video__subtitle js-overlay-subtitle"><div>Inspirational video about hosting corps members through Service Year.</div></div>
<button class="video__play js-play-video" aria-label="Play Video">
<svg class="svg-icon svg-icon--white" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--play"></use></svg>
</button>
</div>
</div>
<div class="video__strip video__strip--equal clearfix">
<a href="#" class="video-thumbnail js-change-video video-thumbnail--current" data-service="vimeo" data-video-id="195526942" data-video-poster="/media/cms/video/0.jpg">
<div class="video-thumbnail__image lazyload hide-for-no-js" data-bg="/media/cms/video/0.jpg"></div>
<noscript>
<div class="video-thumbnail__image" style="background-image: url('/media/cms/video/0.jpg')"></div>
</noscript>
<div class="show-for-medium js-video-info">
<h2 class="video-thumbnail__headline">First Video Head</h2>
<div>Inspirational video about hosting corps members through Service Year.</div>
</div>
</a>
<a href="#" class="video-thumbnail js-change-video " data-service="youtube" data-video-id="5lWkZ-JaEOc" data-video-poster="/media/cms/video/0_1.jpg">
<div class="video-thumbnail__image lazyload hide-for-no-js" data-bg="/media/cms/video/0_1.jpg"></div>
<noscript>
<div class="video-thumbnail__image" style="background-image: url('/media/cms/video/0_1.jpg')"></div>
</noscript>
<div class="show-for-medium js-video-info">
<h2 class="video-thumbnail__headline">Second Video Head</h2>
<div>Inspirational video about hosting corps members through Service Year.</div>
</div>
</a>
<a href="#" class="video-thumbnail js-change-video " data-service="youtube" data-video-id="3qscwv9SJY4" data-video-poster="/media/cms/video/0_2.jpg">
<div class="video-thumbnail__image lazyload hide-for-no-js" data-bg="/media/cms/video/0_2.jpg"></div>
<noscript>
<div class="video-thumbnail__image" style="background-image: url('/media/cms/video/0_2.jpg')"></div>
</noscript>
<div class="show-for-medium js-video-info">
<h2 class="video-thumbnail__headline">Third Video Subtitle</h2>
<div>Inspirational video about hosting corps members through Service Year.</div>
</div>
</a>
</div>
<div class="video__info show-for-small-only">
<h1 class="video-thumbnail__headline js-mobile-headline">First Video Head</h1>
<div class="js-mobile-subtitle">
<div>Inspirational video about hosting corps members through Service Year.</div>
</div>
</div>
</div>
</section>
</div>
3.13Gallery
The gallery component contains a heading, body text, and a many-to-many field of organizations.
The gallery pulls the organization logos from the database.
On hover, logos pause animation and a tooltip is shown.
This component uses the text header component for its intro
Gallery Headline
This is an optional subheader, it should be around 100 characters. You can align it left or center.
You’ve may have heard about some of the most well-known organizations that host service years — Habitat for Humanity, Teach for America, YouthBuild, and City Year to name a few. There are hundreds of additional organizations as well that host service year opportunities and are looking for people like you to help power their organizations and make an impact.
<section class="gallery">
<div class="row">
<div class="columns small-10 medium-8 small-centered">
<div class="cms__text-intro">
<h3 class="heading--medium text-center">Gallery Headline</h3>
<h4 class="subheader color-deep-medium-navy">This is an optional subheader, it should be around 100 characters. You can align it left or center.</h4>
<p>You’ve may have heard about some of the most well-known organizations that host service years — Habitat for Humanity, Teach for America, YouthBuild, and City Year to name a few. There are hundreds of additional organizations as well that host service year opportunities and are looking for people like you to help power their organizations and make an impact.</p>
</div>
</div>
</div>
<div class="js-gallery">
<div class="gallery__outer">
<div class="gallery__inner">
<div class="gallery__slider">
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 1" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 1, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 2" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 2, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 3" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 3, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 4" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 4, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 5" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 5, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 6" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 6, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 7" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 7, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 8" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 8, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 9" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 9, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 10" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 10, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 11" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 11, Washington, D.C.
</span>
</a>
<a class="lazyload gallery__item" href="#" target="_blank" data-bg="https://placehold.it/200x200" data-name="Item 12" data-location="Washington, D.C.">
<span class="show-for-sr">
Item 12, Washington, D.C.
</span>
</a>
</div>
</div>
</div>
<div class="gallery__popover" aria-hidden="true">
</div>
</div>
<script type="text/x-underscore-template" id="js-gallery-tooltip-template">
<span class="sy-tooltip">
<span class="tooltip__content">
<span class="tooltip__title"><%= name %></span>
<span class="tooltip__body">
{% inline_svg_sprite 'pointer' extra_classes='geo-select__icon svg-icon--deep-medium-navy' role='presentation' %}
<%= location %>
</span>
</span>
</span>
</script>
</section>