Patterns

Pattern Library and Style Guide

Colors

$blue-text #084584

$black #000000

$gray-light #F2F2F2

$white #ffffff

$blue-light #CDEAEB

$blue #51C3C8

$blue-mid #084584

$blue-dark #062F4D

$blue-overlay rgba(3,45,78,0.5)

$red #EC483F

$red-dark #791717

Top

Typography

This is a h1 tag with the xxl-sans class.

This is a h1 tag with the xl-sans bold class.

This is a h1 tag with the xl-sans class.

This is a h1 tag with the lg-sans class.

This is a h1 tag with the md-sans class.

This is a h1 tag with the sm-sans class.

This is a h1 tag with the xxl-serif class.

This is a p tag with the xl-serif class.

This is a h1 tag with the lg-serif class.

This is a h1 tag with the md-serif class.

This is a h1 tag with the sm-serif class.

Top

Parts

Publication Module

Annual Report, November, 2016

Challenge Poverty

ECS’ activities and outcomes in the fiscal year ending June 30, 2016.

View PDF Browse Stories
View Code 
<section class="publication">
  <div class="container">
    <div class="publication__entry-wrapper">
      <div class="publication__entry">
        <div class="publication__image">
          <a href="https://ecs-j2made.s3.amazonaws.com/uploads/2016/12/ECS_2016AR_101716_01.pdf">
            <img src="https://ecs-j2made.s3.amazonaws.com/uploads/2016/12/ecs_annual_report_2016-400x542.png" alt="">
          </a>
        </div>
        <div class="publication__content blue-mid">
          <h2 class="xs-sans">Annual Report, November, 2016</h2>
          <h1 class="xl-sans">Challenge Poverty</h1>
          <p class="xs-serif">ECS’ activities and outcomes in the fiscal year ending June 30, 2016.</p>
          <a href="https://ecs-j2made.s3.amazonaws.com/uploads/2016/12/ECS_2016AR_101716_01.pdf" class="btn">View PDF</a>
          <a href="//localhost:3000/publication-stories/annual-report/" class="btn btn-blue-dark">Browse Stories</a>
        </div>
      </div>
    </div>
  </div>
</section>
Top

Modules

Announcement

Announcement

Optatempostem nonet occuptium eostius sum cori rehent landitius, comnihitem arum sam eatur, quos molupti isciam quia voloreperum auda quist est andunditatem inctaecaepe vereprae nis dunt voluptae

Read More
View Code 
<section class="announcement blue-text _blue-light">
  <div class="container">
    <h2 class="sm-sans">Announcement</h2>
    <p class="lg-serif">Optatempostem nonet occuptium eostius sum cori rehent landitius, comnihitem arum sam eatur, quos molupti isciam quia voloreperum auda quist est andunditatem inctaecaepe vereprae nis dunt voluptae</p>
    <a href="#" class="btn blue-text">Read More</a>
  </div>
</section>

Full Width Split

Show your support

Share our mission, our compassion, and our success. Every dollar you donate goes directly to ECS programs.

Donate

Show your support

Share our mission, our compassion, and our success. Every dollar you donate goes directly to ECS programs.

Donate
View Code 
<!-- FW_SPLIT FLIPPED -->
<section class="fw-split flip blue-dark _blue-light check-view fade-in in-view">
  <div class="fw-split__image-wrapper">
    <div class="fw-split__image bkg-img" style="background-image: url(https://ecs-j2made.s3.amazonaws.com/uploads/2016/10/ECS.feltonville_247-1000x841.jpg)"></div>
  </div>
  <div class="fw-split__content-wrapper">
    <div class="fw-split__content">
      <h2 class="sm-sans">Show your support</h2>
      <p class="md-serif">Share our mission, our compassion, and our success. Every dollar you donate goes directly to ECS programs.</p>
      <a href="#" class="btn blue-dark">Donate</a>
    </div>
  </div>
</section>

<!-- FW_SPLIT -->
<section class="fw-split white _blue check-view fade-in in-view">
  <div class="fw-split__image-wrapper">
    <div class="fw-split__image bkg-img" style="background-image: url(https://ecs-j2made.s3.amazonaws.com/uploads/2016/10/ECS.feltonville_247-1000x841.jpg)"></div>
  </div>
  <div class="fw-split__content-wrapper">
    <div class="fw-split__content">
      <h2 class="sm-sans">Show your support</h2>
      <p class="md-serif">Share our mission, our compassion, and our success. Every dollar you donate goes directly to ECS programs.</p>
      <a href="#" class="btn white">Donate</a>
    </div>
  </div>
</section>

Description

Add the <code>.flip</code> class to flip the image/content layout.

Message Callout

We challenge systemic poverty by reducing barriers to opportunities.

We stand against social and economic injustice by building community networks of housing supports, workforce development, health and wellness, companionship, and youth enrichment.

Our Programs
View Code 
<section class="message-callout _blue-dark">
  <div class="container">
    <h1 class="blue xxl-sans"><span class="white">We challenge systemic poverty by</span> reducing barriers to opportunities.</h1>
    <p class="lg-serif white">We stand against social and economic injustice by building community networks of housing supports, workforce development, health and wellness, companionship, and youth enrichment.</p>
    <a class="btn blue" href="#">Our Programs</a>
  </div>
</section>

Featured Post Module

Stories of Success

Meet Helga: A Selfless Grandmother with a Full House

Caring for six grandchildren, Helga receives support and educational opportunities that benefit the entire family through our ECS Out of School Time (OST) Program.

Read More
View Code 
<section class="_blue-light" style="padding: 28px 0">
  <div class="container">
    <div class="post-module  featured">
      <div class="post-module__image bkg-img" style="background-image: url(https://ecs-j2made.s3.amazonaws.com/uploads/2016/11/Helga-600x600.jpg)">
      </div>
      <div class="post-module__content">
        <h3 class="post-module__category xs-sans blue">Stories of Success</h3>
        <h1 class="post-module__title xl-sans blue-mid">Meet Helga: <span>A Selfless  Grandmother with a Full House</span></h1>
        <p>Caring for six grandchildren, Helga receives support and educational opportunities that benefit the entire family through our ECS Out of School Time (OST) Program.</p>
        <a href="//localhost:3000/meet-helga-a-selfless-grandmother-with-a-full-house/" class="post-module__link btn blue">Read More</a>
      </div>
    </div>
  </div>
</section>

Post Module

Advocacy

A Triad of Volunteer Programs Served with Compassion

Read More

Announcement

ECS is Named as A Father Friendly Flagship Agency

Read More
View Code 
<section class="_blue-light" style="padding-top: 28px">
  <div class="container">
    <div class="post-module__container">
      <div class="post-module standard check-view fade-in in-view">
        <div class="post-module__image bkg-img" style="background-image: url(https://ecs-j2made.s3.amazonaws.com/uploads/2016/11/John-Missy-600x344.jpg)"></div>
        <div class="post-module__content">
          <h3 class="post-module__category xs-sans blue">Advocacy</h3>
          <h1 class="post-module__title xl-sans blue-mid">A Triad of Volunteer Programs <span>Served with Compassion</span></h1>
          <a href="http://ecs.dev/a-triad-of-volunteer-programs-served-with-compassion/" class="post-module__link btn blue">Read More</a>
        </div>
      </div>
      <div class="post-module standard check-view fade-in in-view">
        <div class="post-module__image bkg-img" style="background-image: url(https://ecs-j2made.s3.amazonaws.com/uploads/2016/11/feltonville16_122r-600x344.jpg)"></div>
        <div class="post-module__content">
          <h3 class="post-module__category xs-sans blue">Announcement</h3>
          <h1 class="post-module__title xl-sans blue-mid">ECS is Named as <span>A Father Friendly Flagship Agency</span></h1>
          <a href="http://ecs.dev/ecs-is-named-as-a-father-friendly-flagship-agency/" class="post-module__link btn blue">Read More</a>
        </div>
      </div>
    </div>
  </div>
</section>

Description

Standard post module

Top

Components

Buttons

Read More
Read More
Read More
Read More
Read More
Read More
Read More
Read More
Read More Read More
View Code 
<a class="btn" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-white" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-blue-light" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-blue" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-blue-mid" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-blue-dark" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-red" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>
<a class="btn btn-red-dark" href="#" onclick="event.preventDefault();" style="margin-bottom: 20px">Read More</a> <br/>

<a class="btn btn-blue" href="#" onclick="event.preventDefault();">Read More</a>
<a class="btn btn-blue-dark" href="#" onclick="event.preventDefault();">Read More</a>

Description

Ignore inline styles and scripts - for display here only!

Top