Style Guide

Templates

Website Style Guide

Using the Guide

Code for America aims to improve the relationships between citizens and government. The following logos, materials, and character of the Code for America brand were created to express the following:

Openness: That the organization is approachable, easy to understand, easy to get involved with, and welcoming to both scrutiny and participation.
Currency + Progress: We’ve attempted to showcase the latest events and stories in civic tech, while also using current conventions in web design and technology-based approaches. We also strive to show a thread of progress over time.
Optimism: We wanted to emphasize the fact that Code for America believes in the future of our communities and local governments. The idea to portray is: "We can make this better together."

This guide is intended to help anyone involved with communications for Code for America and its affiliate programs. If you have questions, submit an issue in our github repo.

Bookmark Icons

Flag Red

152x152
120x120
76x76
60x60
32x32
16x16

Flag Blue

152x152
120x120
76x76
60x60
32x32
16x16

Flag Gray

152x152
120x120
76x76
60x60
32x32
16x16

Flag Black

152x152
120x120
76x76
60x60
32x32
16x16

Flag White and Blue

152x152
120x120
76x76
60x60
32x32
16x16

Flag White and Red

152x152
120x120
76x76
60x60
32x32
16x16

Flag White and Gray

152x152
120x120
76x76
60x60
32x32
16x16

Flag White and Black

152x152
120x120
76x76
60x60
32x32
16x16

Icons

Icons are from icomoon.

icon-facebook
icon-twitter
icon-feed
icon-vimeo2
icon-lanyrd
icon-flickr
icon-mail
icon-youtube
icon-google-plus
icon-google-plus2
icon-github
icon-linkedin
icon-skype
icon-html5
icon-css3
icon-chrome
icon-firefox
icon-IE
icon-opera
icon-safari
icon-share
icon-github2
icon-user
icon-cc
icon-phone
icon-location
icon-envelop
icon-alarm
icon-print
icon-database
icon-undo
icon-redo
icon-bubble
icon-users
icon-quotes-left
icon-quotes-right
icon-key
icon-wrench
icon-cogs
icon-download2
icon-upload2
icon-earth
icon-star
icon-star2
icon-star3
icon-arrow-up
icon-arrow-right2
icon-arrow-down
icon-arrow-left
icon-arrow-up2
icon-arrow-right3
icon-arrow-down2
icon-arrow-left2
icon-new-tab
icon-embed
icon-code
icon-search
icon-bullhorn
icon-rocket
icon-checkmark
icon-tools
icon-lamp
icon-calendar
icon-twitter2
icon-grid
icon-tumblr
icon-cc2
icon-cc-by
icon-cc-nc
icon-cc-nc-eu
icon-cc-nc-jp
icon-cc-sa
icon-cc-nd
icon-cc-pd
icon-cc-share2
icon-thumbs-up
icon-thumbs-down
icon-upload3
icon-cloud

Colors

Primary Colors

- CfA Red
- PMS 193U
- C13 M94 Y69 K4
- R204 G39 B62
- #cf1b41
- $color-red
- CfA Blue
- PMS 2915M or 292C or 299U
- C70 M24 Y0 K0
- R63 G158 B216
- #399fd3
- $color-blue
- CfA Gray
- PMS Cool Gray 10
- C58 M49 Y46 K15
- R109 G110 B113
- #6D6E71
- $color-gray

Secondary Colors

- Light Blue
- PMS 297U
- C50 M15 Y7 K0
- R122 G181 B214
- #7ab5d6
- $color-light-blue
- Medium Blue
- PMS 314U
- C72 M27 Y16 K0
- R66 G152 B187
- #4298bb
- $color-medium-blue
- Dark Blue
- C81 M66 Y51 K43
- R47 G61 B74
- #004b6a
- $color-dark-blue

- Light gray
- PMS Cool Gray 1
- C9 M6 Y7 K0
- R229 G229 B229
- #e5e5e5
- $color-light-gray
- Medium gray
- PMS Cool Gray 6
- C43 M37 Y36 K1
- R153 G149 B149
- #999595
- $color-medium-gray
- Dark Gray
- C43 M37 Y36 K1
- R68 G68 B68
- #444444
- $color-dark-gray

- Medium Red
- PMS 187C
- C0 M84 Y66 K33
- R170 G28 B58
- #aa1c3a
- $color-medium-red
- Orange
- PMS 165U
- C6 M62 Y96 K0
- R232 G125 B43
- #e87d2b
- $color-orange
- Purple
- PMS 2597U
- C69 M75 Y7 K0
- R105 G87 B156
- #69579C
- $color-purple
- Teal
- PMS 3275U
- C73 M18 Y68 K3
- R0 G161 B117
- #00a175
- $color-teal
- Yellow
- PMS 109U
- C2 M10 Y80 K0
- R254 G221 B68
- #fedd44
- $color-yellow

Layout

The classnames used for layout are all prefixed with layout-. They are all derived from musical note values. This naming convention has been used because it avoids referencing the number of columns in the grid (which often only makes sense at "desktop" view).

The site uses a 9-column grid which can be split into a 1, 2, 3 or 9 column layout, and there are slight variations on these layouts.

The widest container is layout-breve.

layout-breve

layout-semibreve

layout-minim

layout-crotchet

layout-quaver

A "stacatto" is A note of shortened duration, separated from the note that may follow by silence. This has been applied to the class when the column is shorter than normal.

layout-minim-staccato

layout-crotchet-staccato

Layouts can be wrapped inside each other. For example, 2 layout-minims can be within a layout-breve to have a 2 column layout which stops growing when it hits a certain size.

layout-breve

layout-minim

layout-breve

layout-crotchet

layout-breve

layout-quaver

layout-semibreve containers have an earlier max-width applied than layout-breve. This will appear to be the same width as layout-breve unless you're viewing the site on a wide screen.

layout-semibreve

layout-minim

layout-semibreve

layout-crotchet

layout-semibreve

layout-quaver

Applying a class of layout-grid-minim to an unordered list, ordered list or wrapper div will create a grid-style layout. No classes need to be applied to the children.

layout-grid-minim

Code for America’s Fellowship is a one-year program where cutting-edge developers, designers and researchers are embedded in US cities to solve civic problems using technology. Cities who’ve worked with us have built apps that support citizen engagement, criminal justice and public health.
Code for America's network pairs government innovators, talented technologists and civic tech startups to solve community problems. Governments partners are deploying powerful apps, co-hosting regular civic hacking events, and connecting with citizens to build better interfaces to government.
Code for America's Peer Network provides targeted training, hands-on support and early access to new technology and cutting-edge data standards. Recent trainings include user interface engineering and broadband policy.
The annual Summit is when the Code for America civic innovation community gathers in person for three days of collaborating, connecting, and learning. It's a roll-up-your-sleeves kind of event that convenes innovators from dozens of local governments, civic-minded technologists, designers, community organizers, and entrepreneurs.
The Code for America Brigade program is an international network of people committed to using their voices and hands, in collaboration with local governments, to make their cities better.
The CfA Fellowship is a one year residency placing developers, designers, and researchers within local governments. Applications for the 2015 Fellowship are due July 15.

layout-grid-crotchet

Code for America’s Fellowship is a one-year program where cutting-edge developers, designers and researchers are embedded in US cities to solve civic problems using technology. Cities who’ve worked with us have built apps that support citizen engagement, criminal justice and public health.
Code for America's network pairs government innovators, talented technologists and civic tech startups to solve community problems. Governments partners are deploying powerful apps, co-hosting regular civic hacking events, and connecting with citizens to build better interfaces to government.
Code for America's Peer Network provides targeted training, hands-on support and early access to new technology and cutting-edge data standards. Recent trainings include user interface engineering and broadband policy.
The annual Summit is when the Code for America civic innovation community gathers in person for three days of collaborating, connecting, and learning. It's a roll-up-your-sleeves kind of event that convenes innovators from dozens of local governments, civic-minded technologists, designers, community organizers, and entrepreneurs.
The Code for America Brigade program is an international network of people committed to using their voices and hands, in collaboration with local governments, to make their cities better.
The CfA Fellowship is a one year residency placing developers, designers, and researchers within local governments. Applications for the 2015 Fellowship are due July 15.

For unequal column widths, use layout-minor and layout-major.

To switch the order of the columns round, use layout-major-invert and layout-minor-invert.

layout-minor

layout-major

layout-major-invert

layout-minor-invert

Slabs

For background colors, use a class of slab-colorname.

slab-teal

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-gray

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-dark-gray

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-red

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-medium-red

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-blue

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

slab-dark-blue

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Elements

Headings

h1 #

<h1>A new kind of public service</h1>

Usage:

A new kind of public service

h2 #

<h2>A new kind of public service</h2>

Usage:

A new kind of public service

h3 #

<h3>A new kind of public service</h3>

Usage:

A new kind of public service

h4 #

<h4>A new kind of public service</h4>

Usage:

A new kind of public service

h5 #

<h5>A new kind of public service</h5>

Usage:

A new kind of public service

h6 #

<h6>A new kind of public service</h6>

Usage:

A new kind of public service

heading-contrast-strong #

<h3 class="heading-contrast">For <strong>Software developers</strong></h3>

Usage:

For Software developers

heading-contrast #

<p class="heading-contrast">A new kind of public service</p>

Usage:

A new kind of public service

Links

a-rel-external #

<p>This is <a href="#" rel="external">an external link</a></p>

Usage:

This is an external link

a #

<p>This is <a href="#">an inline link</a>.</p>

Usage:

This is an inline link.

Lists

list-ordered #

<ol>
    <li>Browse the applications we've listed.</li>
    <li>When you find the app want to deploy, send us a quick note to brigade-info@codeforamerica.org to let us know which one. We'll use the information to help you get started and to report back to the community which apps people care about maintaining.</li>
    <li>Host a launch-a-thon to get your app off the ground. Use our MeetUp Everywhere.</li>
</ol>

Usage:

Browse the applications we've listed.
When you find the app want to deploy, send us a quick note to brigade-info@codeforamerica.org to let us know which one. We'll use the information to help you get started and to report back to the community which apps people care about maintaining.
Host a launch-a-thon to get your app off the ground. Use our MeetUp Everywhere.

list-unordered #

<ul>
    <li>Name</li>
    <li>Location</li>
    <li>Brigade and/or Affiliations.</li>
    <li>Something you want to get from the forum or something you want to get done.</li>
    <li>Anything else you want to add but don't write a book. There's plenty of time to get to know one another.</li>
</ul>

Usage:

Name
Location
Brigade and/or Affiliations.
Something you want to get from the forum or something you want to get done.
Anything else you want to add but don't write a book. There's plenty of time to get to know one another.

Media

audio #

<audio src="/media/audio/audio.mp3" controls></audio>

Usage:

img #

<img src="/media/images/big-data.jpg" alt="The Code for America team"/>

Usage:

video #

<video controls>
    <source src="/media/video/video.webm" type="video/webm"/>
    <source src="/media/video/video.mp4" type="video/mp4"/>
</video>

Usage:

Tables

table #

<table>
    <thead>
        <tr>
            <th colspan="2">Programs</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Fellowship</th>
            <td>$2,733,782</td>
        </tr>
        <tr>
            <th>Brigade</th>
            <td>$286,257</td>
        </tr>
        <tr>
            <th>Accelerator</th>
            <td>$280,896</td>
        </tr>
        <tr>
            <th>Civic Commons &amp; Peer Network</th>
            <td>$324,140</td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <th>Total Programs</th>
            <td>$3,625,075</td>
        </tr>
        <tr>
            <th>Administration</th>
            <td>$226,648</td>
        </tr>
        <tr>
            <th>Fundraising</th>
            <td>$153,504</td>
        </tr>
    <tfoot>
        <tr>
            <th>Total Expenses</th>
            <td>$4,005,227</td>
        </tr>
    </tfoot>
</table>

Usage:

Programs
Fellowship	$2,733,782
Brigade	$286,257
Accelerator	$280,896
Civic Commons & Peer Network	$324,140

Total Programs	$3,625,075
Administration	$226,648
Fundraising	$153,504
Total Expenses	$4,005,227

Text

abbr #

<p><abbr title="General Transit Feed Specification">GTFS</abbr> is for static data, and GTFS-realtime is an extension for real-time, geolocated data.</p>

Usage:

GTFS is for static data, and GTFS-realtime is an extension for real-time, geolocated data.

address #

<address>For more details, contact <a href="mailto:mm@example.com">Michal Migurski</a>.</address>

Usage:

For more details, contact Michal Migurski.

b #

<p>Actionable content tailored to support member needs, including <b>deployment guides</b> for CfA-vetted apps, <b>timely case studies</b>, and <b>online training</b> with renowned experts.</p>

Usage:

Actionable content tailored to support member needs, including deployment guides for CfA-vetted apps, timely case studies, and online training with renowned experts.

blockquote #

<blockquote>
    <p>The failure of the federal levee system during Hurricane Katrina changed the way I think about the world around me. I was 20-years-old, but I understood for the first time that our cities are what we make them.</p>
</blockquote>

Usage:

The failure of the federal levee system during Hurricane Katrina changed the way I think about the world around me. I was 20-years-old, but I understood for the first time that our cities are what we make them.

cite #

<p><cite>Los Angeles Times</cite>, August 26, 2013</p>

Usage:

Los Angeles Times, August 26, 2013

code-inline #

<p>This is some inline <code>code</code> in a paragraph.</p>

Usage:

This is some inline code in a paragraph.

code #

<pre class="language-css"><code>
.teaser .teaser-description {
    padding: 1em;
    border: 1px solid;
    @include border-color($color-light-gray, 1);
    border-top: none;
}
</code>
</pre>

Usage: The code is styled using a class on the code element:

* language-css for css
* language-javascript for javascript
* language-html for html


.teaser .teaser-description {
    padding: 1em;
    border: 1px solid;
    @include border-color($color-light-gray, 1);
    border-top: none;
}

del #

<p>We still have some have hats <del>and hoodies</del> left.</p>

Usage:

We still have some have hats ~~and hoodies~~ left.

details #

<details>
    <summary>What is Code for America?</summary>
    <p>Code for America is a 501(c)3 non-profit that envisions a government by the people, for the people, that works in the 21st century.</p>
</details>

Usage:

What is Code for America?

Code for America is a 501(c)3 non-profit that envisions a government by the people, for the people, that works in the 21st century.

dfn #

<p>The <dfn>Brigade network</dfn> is an ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.</p>

Usage:

The Brigade network is an ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.

dl-dfn #

<dl>
    <dt><dfn>Brigade network</dfn>,</dt>
    <dd>An ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.</dd>
    <dt><dfn>The Civic Startups program</dfn></dt>
    <dd>Offers entrepreneurs mentorship in navigating the government procurement process and building sustainable businesses. </dd>
    <dt><dfn>The Peer Network</dfn>,</dt>
    <dd>Where government officials and public servants connect to share civic tech resources, best practices and open data policies. </dd>
</dl>

Usage:

Brigade network,: An ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.
The Civic Startups program: Offers entrepreneurs mentorship in navigating the government procurement process and building sustainable businesses.
The Peer Network,: Where government officials and public servants connect to share civic tech resources, best practices and open data policies.

em #

<p>By the people, <em>for</em> the people.</p>

Usage:

By the people, for the people.

figure-blockquote #

<figure>
    <blockquote>
        <p>Startups are the most powerful possibility I can find for helping to improve those services. A lack of procurement options is at the heart of the bad technology and the inefficient business processes of many cities.</p>
    </blockquote>
    <figcaption>
         Zachary Townsend, in <cite>Why I'm mentoring for America</cite>, from the <cite>Code for America Blog</cite>, November 1st 2013
     </figcaption>
</figure>

Usage:

Startups are the most powerful possibility I can find for helping to improve those services. A lack of procurement options is at the heart of the bad technology and the inefficient business processes of many cities.

Zachary Townsend, in Why I'm mentoring for America, from the Code for America Blog, November 1st 2013

figure-img #

<figure>
    <img src="/media/images/big-data.jpg" alt=""/>
    <figcaption>
        The Code for America team
    </figcaption>
</figure>

Usage:

figure-list #

<figure>
    <figcaption>Largest Meetup Groups</figcaption>
    <ol>
        <li>#betaNYC, a Code for America Brigade for NYC: 1,281 Members</li>
        <li>Code for America Philly: 488 Members</li>
        <li>Code for Boston: 427 Members</li>
        <li>Code for Seattle: 379 Members</li>
        <li>Code for San Francisco - Civic Hack Night: 336 Members</li>
        <li>Code for DC: 218 Members</li>
        <li>OpenOakland: The Code for America Brigade in Oakland: 200 Members</li>
        <li>Colorado Code for Communities: 173 Members</li>
        <li>Code for Los Angeles: 149 Members</li>
        <li>Arlington Code Shop: 148 Members</li>
    </ol>
</figure>

Usage:

Largest Meetup Groups

#betaNYC, a Code for America Brigade for NYC: 1,281 Members
Code for America Philly: 488 Members
Code for Boston: 427 Members
Code for Seattle: 379 Members
Code for San Francisco - Civic Hack Night: 336 Members
Code for DC: 218 Members
OpenOakland: The Code for America Brigade in Oakland: 200 Members
Colorado Code for Communities: 173 Members
Code for Los Angeles: 149 Members
Arlington Code Shop: 148 Members

hr #

<hr/>

Usage:

kbd #

<p>To take a screenshot on your Mac, press <kbd>⌘ Cmd</kbd> + <kbd>⇧ Shift</kbd> + <kbd>3</kbd>.</p>

Usage:

To take a screenshot on your Mac, press ⌘ Cmd + ⇧ Shift + 3.

mark #

<p>This text is <mark>marked</mark> to show it's important.</p>

Usage:

This text is marked to show it's important.

paragraph #

<p>The success of the Fellowship is measured not in lines of code, but in sustainable, meaningful change. It's about proving that government can move at the speed of citizens, can speak the language of citizens, and can cost what citizens are willing to pay.</p>

Usage:

The success of the Fellowship is measured not in lines of code, but in sustainable, meaningful change. It's about proving that government can move at the speed of citizens, can speak the language of citizens, and can cost what citizens are willing to pay.

pre-code #

<pre><code>function panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () {
        if (closeHandler) closeHandler()
    };
}</code></pre>

Usage:

function panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () {
        if (closeHandler) closeHandler()
    };
}

small #

<p><small>Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.</small></p>

Usage:

Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.

strong #

<p>This event is in San Francisco. <strong>Watch out for bears</strong>.</p>

Usage:

This event is in San Francisco. Watch out for bears.

time #

<time datetime="2013-11-13 09:00-05:00">November 1st, 2013</time>

Usage: The format for datetime is YYYY-MM-DD HH:MM. 

In this example, there is an 8 hour time difference between UTC and the location where the post was published, so -08:00 has been added.

November 1st, 2013

Global

footer #

<div class="global-footer" id="global-footer">
    
    <div class="layout-breve layout-tight">
    
        <div class="search-global">
            <input type="search" placeholder="Search" />
        </div>
    
        <nav class="nav-footer" role="navigation">
            <ul>
                <li class="nav-tier1"><a class="nav-heading" href="#">Home</a></li>
                <li class="nav-tier1"><a class="nav-heading" href="#">About</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Who we are</a></li>
                        <li><a href="#">Programs</a></li>
                        <li><a href="#">Donors</a></li>
                        <li><a href="#">Press</a></li>
                    </ul>
                </li>
                <li class="nav-tier1"><a class="nav-heading" href="#">Fellows</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Timeline</a></li>
                        <li><a href="#">Process</a></li>
                        <li><a href="#">Apply</a></li>
                    </ul>
                </li>
                <li class="nav-tier1"><a class="nav-heading" href="#">Cities</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Kansas City, MO</a></li>
                        <li><a href="#">Kansas City, KS</a></li>
                        <li><a href="#">Las Vegas, NV</a></li>
                        <li><a href="#">Louisville, KY</a></li>
                        <li><a href="#">New York City, NY</a></li>
                        <li><a href="#">Oakland, CA</a></li>
                        <li><a href="#">San Francisco, CA</a></li>
                        <li><a href="#">San Mateo County, CA</a></li>
                        <li><a href="#">South Bend, IN</a></li>
                        <li><a href="#">Summit County, OH</a></li>
                    </ul>
                </li>
                <li class="nav-tier1"><a class="nav-heading" href="#">Donate</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Financial Contributions</a></li>
                        <li><a href="#">In-Kind Donations</a></li>
                    </ul>
                </li>
                <li class="nav-tier1"><a class="nav-heading" href="#">Social</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">YouTube</a></li>
                        <li><a href="#">RSS</a></li>
                        <li><a href="#">GitHub</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    
    </div>

</div>

<div class="global-foot">
    <div class="layout-tight layout-breve">
        <div class="global-foot-content">
            <img class="global-foot-logo" src="http://style.codeforamerica.org/media/images/logo-inversed.png" />
            <small>Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.</small>
        </div>
    </div>
</div>

Usage:

Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.

header #

<div class="global-header">
    <div class="layout-breve layout-tight">
        <a href="/templates/home.php" class="global-header-logo">
            <img src="media/images/logo.png" />
        </a>
        
        <p class="skip-to-nav"><a href="#global-footer">Menu</a></p>
        
        <nav class="nav-global-secondary" role="navigation">
            <ul>
                <li class="nav-tier1 nav-has-children">
                    <a href="/governments/index.php">Governments</a>
                    <ul class="nav-tier2">
                        <li><a href="#">Current Cities</a></li>
                        <li><a href="#">Upcoming Cities</a></li>
                        <li><a href="#">Alumni Cities</a></li>
                        <li><a href="#">Apps &amp; APIs</a></li>
                    </ul>
                </li>
                <li class="nav-tier1 nav-has-children"><a href="/citizens/index.php">Citizens</a></li>
                <li class="nav-tier1 nav-has-children"><a href="/apps/index.php">Apps</a></li>
                <li><a href="/donate/index.php" class="button">Donate</a></li>
            </ul>
        </nav>
    </div>
</div>

Usage:

Patterns

alert-failure #

<p class="alert-failure">This is a notification of a failed action or event.</p>

Usage:

This is a notification of a failed action or event.

alert-info #

<p class="alert-info">This is a notification with some information.</p>

Usage:

This is a notification with some information.

alert-success #

<p class="alert-success">This is a notification of a successful action or event.</p>

Usage:

This is a notification of a successful action or event.

alert #

<p class="alert">This is a general notification.</p>

Usage: For alerts with multiple paragraphs, apply the alert class to a wrapper div.

<div class="alert">
    <p>A paragraph</p>
    <p>Another paragraph</p>
</div>

This is a general notification.

badge-headings #

<div class="heading">
    <h2>No badge</h2>
</div>

<div class="badge-heading">
    <h2>Black badge heading (default)</h2>
</div>

<div class="badge-heading badge-github badge-blue">
    <h2>Blue badge heading</h2>
</div>

<div class="badge-heading badge-glasses badge-red">
    <h2>Red badge heading</h2>
    <h3>with a sub-heading</h3>
</div>

<div class="badge-heading badge-glasses badge-orange">
    <h2>Orange badge heading</h2>
</div>

<div class="badge-heading badge-gov badge-teal">
    <h2>Teal badge heading</h2>
</div>

<div class="badge-heading badge-gov badge-purple">
    <h2>Purple badge heading which has lots of text in it so will wrap</h2>
</div>

<div class="badge-heading badge-graph badge-gray">
    <h2>Gray badge heading</h2>
</div>

<div class="badge-heading badge-graph badge-dark-blue">
    <h2>Dark blue badge heading</h2>
</div>

Usage: Adds a badge with an icon to the left of the heading. Default is a rocket.

No badge

Black badge heading (default)

Blue badge heading

Red badge heading

with a sub-heading

Orange badge heading

Teal badge heading

Purple badge heading which has lots of text in it so will wrap

Gray badge heading

Dark blue badge heading

billboard #

<a href="#" class="billboard">
    <img class="teaser-image" src="/media/images/logo-promptly.jpg" />
    <strong class="billboard-label">Promptly</strong>
</a>

Usage:

Promptly

billboards-v1 #

<ul class="list-no-bullets layout-grid">
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-promptly.jpg" />
            <strong class="billboard-label">Promptly</strong>
        </a>
    </li>
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-civicinsight.jpg" />
            <strong class="billboard-label">Civic Insight</strong>
        </a>
    </li>
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-textmybus.jpg" />
            <strong class="billboard-label">Text my Bus</strong>
        </a>
    </li>
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-localdata.jpg" />
            <strong class="billboard-label">Localdata</strong>
        </a>
    </li>
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-promptly.jpg" />
            <strong class="billboard-label">Promptly</strong>
        </a>
    </li>
    <li class="layout-crotchet">
        <a href="#" class="billboard">
            <img src="/../media/images/logo-civicinsight.jpg" />
            <strong class="billboard-label">Civic Insight</strong>
        </a>
    </li>
</ul>

Usage:

billboards-v2 #

<ul class="layout-grid">
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-promptly.jpg" />
            Promptly
        </a>
    </li>
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-civicinsight.jpg" />
            Civic Insight
        </a>
    </li>
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-textmybus.jpg" />
            Text my Bus
        </a>
    </li>
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-localdata.jpg" />
            Localdata
        </a>
    </li>
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-promptly.jpg" />
            Promptly
        </a>
    </li>
    <li class="billboard">
        <a href="#">
            <img src="/../media/images/logo-civicinsight.jpg" />
            Civic Insight
        </a>
    </li>
</ul>

Usage:

block-array #

<div class="block-gray">
	<h3 class="text-whisper">block-gray</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="test block-dark-gray">
	<h3 class="text-whisper">block-dark-gray</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="block-red">
	<h3 class="text-whisper">block-red</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="block-medium-red">
	<h3 class="text-whisper">block-medium-red</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="block-blue">
	<h3 class="text-whisper">block-blue</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="block-dark-blue">
	<h3 class="text-whisper">block-dark-blue</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

<div class="block-teal">
	<h3 class="text-whisper">block-teal</h3>
	<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aliquam tincidunt mauris eu risus.</li>
		<li>Vestibulum auctor dapibus neque.</li>
	</ul>
</div>

Usage:

block-gray

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-dark-gray

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-red

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-medium-red

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-blue

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-dark-blue

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-teal

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

block-text #

<h4>Bring the right people at the table</h4>

<div class="layout-major-invert">
    <p>Key stakeholders, including representatives from the office of the city attorney and the procurement department, should be involved in any efforts from the beginning. Getting their buy-in and input early will help ensure you’re able to get the traction you need to create lasting change. Depending on your goals, you will likely want to involve other departmental stakeholders who have a vested interest in the procurement process.</p>
</div>

<div class="layout-minor-invert block-teal">
    <p class="icon-thumbs-up">Recommendation: Set up regular meetings (e.g. monthly) with relevant staff members and quarterly meetings in a committee structure to (1) identify shared issues in procurement, and (2) develop a collaborative vision around common goals.</p>
</div>

Usage:

Bring the right people at the table

Key stakeholders, including representatives from the office of the city attorney and the procurement department, should be involved in any efforts from the beginning. Getting their buy-in and input early will help ensure you’re able to get the traction you need to create lasting change. Depending on your goals, you will likely want to involve other departmental stakeholders who have a vested interest in the procurement process.

Recommendation: Set up regular meetings (e.g. monthly) with relevant staff members and quarterly meetings in a committee structure to (1) identify shared issues in procurement, and (2) develop a collaborative vision around common goals.

blurb #

<div class="blurb"><p><em>Code for America</em> envisions a government that works by the people, for the people, in the 21st century.</p></div>

Usage:

Code for America envisions a government that works by the people, for the people, in the 21st century.

bricks-3 #

<ul class="bricks bricks-cta bricks-3">
    
    <li class="brick badge-heading badge-blue">
        <a class="brick-link" href="/donate/">
            <h3 class="brick-heading">Donors</h3>
            <h4 class="brick-text">Help make a difference</h4>
        </a>
    </li>
    
    <li class="brick badge-heading badge-red">
        <a class="brick-link" href="/governments/">
            <h3 class="brick-heading">Governments</h3>
            <h4 class="brick-text">Solve your city's problems</h4>
        </a>
    </li>
    
    <li class="brick badge-heading badge-dark-blue">
        <a class="brick-link" href="/citizens/">
            <h3 class="brick-heading">Geeks</h3>
            <h4 class="brick-text">Use your skills for good</h4>
        </a>
    </li>
    
</ul>

Usage: Large blocks of content which can be used as calls-to-action.

bricks-4-inverted #

<div class="slab-dark-blue">

    <ul class="bricks bricks-4">
        
        <li class="brick badge-heading badge-github">
            <h3 class="text-feature">3,372</h3>
            <p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
        </li>
        
        <li class="brick badge-heading badge-github">
            <h3 class="text-feature">348</h3>
            <p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
        </li>
        
        <li class="brick badge-heading badge-github">
            <h3 class="text-feature">157</h3>
            <p class="text-whisper">Total number of <a href="#">members</a> on Github</p>
        </li>
        
        <li class="brick badge-heading">
            <h3 class="text-feature">75</h3>
            <p class="text-whisper">Total number of <a href="#">apps deployed</a> by brigades</p>
        </li>
        
    </ul>

</div>

Usage:

3,372

Civic Code Commits in December
348

Civic Code Commits in December
157

Total number of members on Github
75

Total number of apps deployed by brigades

bricks-4 #

<ul class="bricks bricks-4">
    
    <li class="brick badge-heading badge-github">
        <h3 class="text-feature">3,372</h3>
        <p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
    </li>
    
    <li class="brick badge-heading badge-github">
        <h3 class="text-feature">348</h3>
        <p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
    </li>
    
    <li class="brick badge-heading badge-github">
        <h3 class="text-feature">157</h3>
        <p class="text-whisper">Total number of <a href="#">members</a> on Github</p>
    </li>
    
    <li class="brick badge-heading">
        <h3 class="text-feature">75</h3>
        <p class="text-whisper">Total number of <a href="#">apps deployed</a> by brigades</p>
    </li>
    
</ul>

Usage: Large blocks of content which can be used as calls-to-action.

3,372

Civic Code Commits in December
348

Civic Code Commits in December
157

Total number of members on Github
75

Total number of apps deployed by brigades

calendar #

<table class="calendar">
  
  <thead class="calendar-days">
  	<tr class="calendar-header">
  	  <th class="calendar-nav" colspan="1">
  	  	<a class="calendar-month-prev" href="#"><span>Previous</span></a>
  	  	</th>
  	  	<th colspan="5">
  	  	<h2 class="calendar-heading">March 2013</h2>
  	  	</th>
  	  	<th class="calendar-nav" colspan="1">
  	  	<a class="calendar-month-next" href="#"><span>Next</span></a>
  	  	</th>
  	  </th>
  	</tr>
    <tr class="calendar-day-names">
      <th class="calendar-day-weekend">Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th class="calendar-day-weekend">Sat</th>
    </tr>
  </thead>
  <tbody>
    <tr class="calendar-week">
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr class="calendar-week">
      <td>3</td>
      <td class="calendar-has-event">4
      	<ul class="calendar-events">
      		<li class="calendar-event"><strong>2pm:</strong> An event</li>
      		<li class="calendar-event"><strong>4pm:</strong> Another event</li>
      	</ul>
      </td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr class="calendar-week">
      <td class="calendar-has-event">10
      	<ul class="calendar-events">
      		<li class="calendar-event"><strong>2pm:</strong> An event</li>
      		<li class="calendar-event"><strong>4pm:</strong> Another event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      	</ul>
      </td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td class="calendar-has-event">15
      	<ul class="calendar-events">
      		<li class="calendar-event"><strong>2pm:</strong> An event</li>
      	</ul>
      </td>
      <td>16</td>
    </tr>
    <tr class="calendar-week">
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="calendar-week">
      <td>24</td>
      <td>25</td>
      <td class="calendar-day-active">26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td class="calendar-has-event">30
      	<ul class="calendar-events">
      		<li class="calendar-event"><strong>2pm:</strong> An event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      		<li class="calendar-event"><strong>4pm:</strong> Another event</li>
      	</ul>
      </td>
    </tr>
    <tr class="calendar-week">
      <td>31</td>
      <td>1</td>
      <td>2</td>
      <td class="calendar-has-event">3
      	<ul class="calendar-events">
      		<li class="calendar-event"><strong>2pm:</strong> An event</li>
      		<li class="calendar-event"><strong>4pm:</strong> Another event</li>
      	</ul>
      </td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tfoot class="calendar-summary" colspan="7">
    	<tr><th>Next 7 days:</th>
    		<td colspan="6">
    			<ul class="calendar-summary-events">
    				<li><strong>Sunday 17th, 9am:</strong> <a href="#">A hack thing in San Francisco</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</a></li>
    				<li><strong>Monday 18th, All day:</strong> <a href="#">A thing</a></li>
    				<li><strong>Monday 18th, 3pm:</strong> <a href="#">Another thing in Maryland</a></li>
    				<li><strong>Tuesday 19th, All day:</strong> <a href="#">A thing</a></li>
    				<li><strong>Thursday 21st, 3pm:</strong> <a href="#">A hack thing in New York</a></li>
    			</ul>
    		</td>
    	</tr>
    </tfoot>
    </tbody>
  </tbody>
</table>

Usage:

Previous	March 2013	Next
24	25	26	27	28	1	2
3	4 2pm: An event 4pm: Another event	5	6	7	8	9
10 2pm: An event 4pm: Another event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.	11	12	13	14	15 2pm: An event	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30 2pm: An event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 4pm: Another event
31	1	2	3 2pm: An event 4pm: Another event	4	5	6
Next 7 days:	Sunday 17th, 9am: A hack thing in San Francisco. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Monday 18th, All day: A thing Monday 18th, 3pm: Another thing in Maryland Tuesday 19th, All day: A thing Thursday 21st, 3pm: A hack thing in New York

caption #

<p class="note">Your email address will not be published.</p>

Usage:

Your email address will not be published.

chimney-invert #

<section class="slab-red">
        
    <div class="layout-chimney-invert">
    
        <div class="layout-minim">

            <p>Over 200 local officials, startups and NGOs discuss data standards, current events and civic tech on a focused, moderated email list.</p>
            
            <h3 class="h4">Titles of some active members include:</h3>
            
            <ul class="isolate">
                <li>Chief Innovation Officer, City of KC, Missouri</li>
            	<li>Deputy Chief of Staff, City of Houston</li>
            	<li>Director of Research and Technology, Urban Strategies Council</li>
            </ul>
            
            <h3 class="h4">Ready to Level Up?</h3>
            
            <p>Code for America's Peer Network helps you innovate by providing targeted training, hands-on support and early access to new technology. Recent trainings include user interface engineering and broadband Policy</p>
            
            <a href="#" class="button button-prominent">Request an invite</a>
    
        </div>
            
        <div class="layout-minim slab-medium-red chimney">
                
            <h3>Join the conversation</h3>
            
            <form>
            
                <ul class="list-form">
                    
                    <li class="form-field">
                        <label for="invitee-name">Your Name</label>
                    	<input id="invitee-name" class="input" type="text" />
                    </li>
                    
                    <li class="form-field">
                        <label for="donor-address-line1">Your preferred title</label>
                    	<input id="donor-address-line1" class="input" type="text" />
                    </li>
                    
                    <li class="form-field">
                        <label for="invitee-title">Address Line 2</label>
                    	<input id="invitee-title" class="input" type="text" />
                    </li>
                    
                    <li class="form-field-group">
                        <div class="form-field">
                            <label for="donor-address-city">City</label>
                        	<input id="donor-address-city" class="input" type="text" />
                        </div>
                        <div class="form-field">
                            <label for="donor-address-state">State</label>
                        	<select id="donor-address-state">
                        	    <option>USA</option>
                        	    <option>USA</option>
                        	    <option>USA</option>
                        	</select>
                        </div>
                    </li>
                    
                    <li class="form-field">
                        <label for="donor-email">Email</label>
                    	<input id="donor-email" class="input" type="email" />
                    </li>
                                                
                    <a href="#" class="button">Join now</a>
                    
                </ul>
            
            </form>
            
        </div>
            
    </div>

</section>

Usage:

Over 200 local officials, startups and NGOs discuss data standards, current events and civic tech on a focused, moderated email list.

Titles of some active members include:

Chief Innovation Officer, City of KC, Missouri
Deputy Chief of Staff, City of Houston
Director of Research and Technology, Urban Strategies Council

Ready to Level Up?

Code for America's Peer Network helps you innovate by providing targeted training, hands-on support and early access to new technology. Recent trainings include user interface engineering and broadband Policy

Request an invite

Join the conversation

Your Name
Your preferred title
Address Line 2
City

State
Email

Join now

chimney #

<section class="slab-red">

    <div class="layout-chimney">
        
        	<div class="layout-minim-staccato slab-medium-red chimney">
            
            	<div class="chimney-body">
        
                <h3>Why I Code for America</h3>
                <div class="h-card profile">
                    <h4 class="p-name profile-name">Richa Agarwal</h4>
                    <img class="u-photo profile-photo" src="/media/images/avatar-tiffani-bell.png" />
                    <p class="p-role profile-role">2012 Fellow</p>
                    <p class="p-note profile-note">Co-creator of <a class="p-org profile-org" href="#">Recordtrac</a></p>
                </div>
                <a href="#" class="button button-prominent">Meet more civic hackers</a>
            	
            	</div>
            	
            </div>
            
            <div class="layout-minim-staccato">
            
	            <h3 class="h4">What's happening?</h3>
	            
	            <ul class="list-no-bullets list-icons">
	                <li class="icon-calendar"><a href="#">Nov 19: Bike Hack NYU Rudin</a> 
	                	<a class="text-whisper" href="#">More events</a>
	                </li>
	                <li class="icon-github2"><a href="#">Hack request: Add SMS to Ohana API</a> 
	                	<a class="text-whisper" href="#">More hack requests</a>
	                </li>
	                <li class="icon-lamp"><a href="#">Feb 22-24: Code Across America</a> 
	                	<a class="text-whisper" href="#">More national projects</a>
	                </li>
	                <li class="icon-youtube"><a href="#">Video: Civic Engagement &amp; Design</a> 
	                	<a class="text-whisper" href="#">More CFA videos</a>
	                </li>
	                <li class="icon-tools"><a href="#">Publish and Curate Open Data</a>
	                	<a class="text-whisper" href="#">More organizing</a>
	                </li>
	            </ul>
	         
	        </div>
        
    </div>
    

</section>

Usage: The chimney pattern splits content into 2 columns, with one of the columns more prominent than the other. To flip the order of the columns, use the chimney-invert pattern.

Why I Code for America

Richa Agarwal

2012 Fellow

Co-creator of Recordtrac

Meet more civic hackers

What's happening?

fade-toggle #

<div class="fade fade-toggle" id="fade">
    <nav class="list-credits" role="navigation">
        <ul class="fade-content" id="fade-content">
            <li><a href="#">New York</a></li>
            <li><a href="#">Philadelphia</a></li>
            <li><a href="#">Boston</a></li>
            <li><a href="#">Seattle</a></li>
            <li><a href="#">San Francisco</a></li>
            <li><a href="#">DC</a></li>
            <li><a href="#">Oakland</a></li>
            <li><a href="#">Chicago</a></li>
            <li><a href="#">International</a></li>
            <li><a href="#">Tampa</a></li>
            <li><a href="#">Tulsa</a></li>
            <li><a href="#">Chattanooga</a></li>
            <li><a href="#">Austin</a></li>
            <li><a href="#">Colorado</a></li>
            <li><a href="#">Lexington</a></li>
            <li><a href="#">Salt Lake</a></li>
            <li><a href="#">San Diego</a></li>
            <li><a href="#">Cincinnati</a></li>
            <li><a href="#">Whitewater</a></li>
            <li><a href="#">Raleigh</a></li>
            <li><a href="#">Orlando</a></li>
            <li><a href="#">Maine</a></li>
            <li><a href="#">Kansas City</a></li>
            <li><a href="#">Las Vegas</a></li>
            <li><a href="#">Durham</a></li>
            <li><a href="#">Hawaii</a></li>
            <li><a href="#">Detroit</a></li>
            <li><a href="#">New York</a></li>
            <li><a href="#">Philadelphia</a></li>
            <li><a href="#">Boston</a></li>
            <li><a href="#">Seattle</a></li>
            <li><a href="#">San Francisco</a></li>
            <li><a href="#">DC</a></li>
            <li><a href="#">Oakland</a></li>
            <li><a href="#">Chicago</a></li>
            <li><a href="#">International</a></li>
            <li><a href="#">Tampa</a></li>
            <li><a href="#">Tulsa</a></li>
            <li><a href="#">Chattanooga</a></li>
            <li><a href="#">Austin</a></li>
            <li><a href="#">Colorado</a></li>
            <li><a href="#">Lexington</a></li>
            <li><a href="#">Salt Lake</a></li>
            <li><a href="#">San Diego</a></li>
            <li><a href="#">Cincinnati</a></li>
            <li><a href="#">Whitewater</a></li>
            <li><a href="#">Raleigh</a></li>
            <li><a href="#">Orlando</a></li>
            <li><a href="#">Maine</a></li>
            <li><a href="#">Kansas City</a></li>
            <li><a href="#">Las Vegas</a></li>
            <li><a href="#">Durham</a></li>
            <li><a href="#">Hawaii</a></li>
            <li><a href="#">Detroit</a></li>
        </ul>
    </nav>
</div>
<p class="isolate text-whisper"><a href="#" class="fade-activate" id="fade-activate">See all cities</a></p>

Usage:

See all cities

fade #

<div class="fade">
    <nav class="list-credits" role="navigation">
        <ul class="fade-content">
            <li><a href="#">New York</a></li>
            <li><a href="#">Philadelphia</a></li>
            <li><a href="#">Boston</a></li>
            <li><a href="#">Seattle</a></li>
            <li><a href="#">San Francisco</a></li>
            <li><a href="#">DC</a></li>
            <li><a href="#">Oakland</a></li>
            <li><a href="#">Chicago</a></li>
            <li><a href="#">International</a></li>
            <li><a href="#">Tampa</a></li>
            <li><a href="#">Tulsa</a></li>
            <li><a href="#">Chattanooga</a></li>
            <li><a href="#">Austin</a></li>
            <li><a href="#">Colorado</a></li>
            <li><a href="#">Lexington</a></li>
            <li><a href="#">Salt Lake</a></li>
            <li><a href="#">San Diego</a></li>
            <li><a href="#">Cincinnati</a></li>
            <li><a href="#">Whitewater</a></li>
            <li><a href="#">Raleigh</a></li>
            <li><a href="#">Orlando</a></li>
            <li><a href="#">Maine</a></li>
            <li><a href="#">Kansas City</a></li>
            <li><a href="#">Las Vegas</a></li>
            <li><a href="#">Durham</a></li>
            <li><a href="#">Hawaii</a></li>
            <li><a href="#">Detroit</a></li>
        </ul>
    </nav>
</div>
<p class="isolate text-whisper"><a href="#" class="fade-activate">See all cities</a></p>

Usage: Creates a show/hide toggle for very long lists

form-donate #

<form class="spotlight">
    
    <h3>Donate now</h3>
    
    <ul class="list-form">
        
        <li class="form-field">
            <label for="donor-first-name">First Name</label>
        	<input id="donor-first-name" class="input" type="text" />
        </li>
        
        <li class="form-field">
            <label for="donor-last-name">Last Name</label>
        	<input id="donor-last-name" class="input" type="text" />
        </li>
        
        <li class="form-field">
            <label for="donor-address-line1">Address Line 1</label>
        	<input id="donor-address-line1" class="input" type="text" />
        </li>
        
        <li class="form-field">
            <label for="donor-address-line2">Address Line 2</label>
        	<input id="donor-address-line2" class="input" type="text" />
        </li>
        
        <li class="form-field">
            <label for="donor-address-city">City</label>
        	<input id="donor-address-city" class="input" type="text" />
        </li>
        
        <li class="form-field-group">
            <div class="form-field">
                <label for="donor-address-state">State</label>
            	<select id="donor-address-state">
            	    <option>Alabama</option>
            	    <option>Alaska</option>
            	    <option>Arizona</option>
            	    <option>Arkansas</option>
            	    <option>American Samoa</option>
            	    <option>California</option>
            	    <option>Colorado</option>
            	    <option>Connecticut</option>
            	    <option>Delaware</option>
            	    <option>District of Columbia</option>
            	    <option>Florida</option>
            	    <option>Georgia</option>
            	    <option>Guam</option>
            	    <option>Hawaii</option>
            	    <option>Idaho</option>
            	    <option>Illinois</option>
            	    <option>Indiana</option>
            	    <option>Iowa</option>
            	    <option>Kansas</option>
            	    <option>Kentucky</option>
            	    <option>Louisiana</option>
            	    <option>Maine</option>
            	    <option>Maryland</option>
            	    <option>Massachusetts</option>
            	    <option>Michigan</option>
            	    <option>Minnesota</option>
            	    <option>Mississippi</option>
            	    <option>Missouri</option>
            	    <option>Montana</option>
            	    <option>Nebraska</option>
            	    <option>Nevada</option>
            	    <option>New Hampshire</option>
            	    <option>New Jersey</option>
            	    <option>New Mexico</option>
            	    <option>New York</option>
            	    <option>North Carolina</option>
            	    <option>North Dakota</option>
            	    <option>Northern Mariana Islands</option>
            	    <option>Ohio</option>
            	    <option>Oklahoma</option>
            	    <option>Oregon</option>
            	    <option>Pennsylvania</option>
            	    <option>Puerto Rico</option>
            	    <option>Rhode Island</option>
            	    <option>South Carolina</option>
            	    <option>South Dakota</option>
            	    <option>Tennessee</option>
            	    <option>Texas</option>
            	    <option>United States Virgin Islands</option>
            	    <option>Utah</option>
            	    <option>Vermont</option>
            	    <option>Virginia</option>
            	    <option>Washington</option>
            	    <option>West Virginia</option>
            	    <option>Wisconsin</option>
            	    <option>Wyoming</option>
            	</select>
            </div>
            <div class="form-field">
                <label for="donor-address-zip">Zip</label>
                <input id="donor-address-zip" class="input" type="text"  />
            </div>
        </li>
        
        <li class="form-field">
            <label for="donor-email">Email</label>
        	<input id="donor-email" class="input invalid" type="email" />
        	<span class="note text-invalid">Please enter a valid email address</span>
        </li>
        
        <li class="form-field">
            <label for="donor-phone">Phone Number</label>
        	<input id="donor-phone" class="input" type="tel" pattern="\d*" />
        </li>
        
        <li class="form-field">
            <label for="donor-donation-amount">How much would you like to donate?</label>
            <input id="donor-donation-amount" class="input" />
        </li>
        
        <li class="form-field">
            <label for="donor-card-number">Card Number</label>
        	<input id="donor-card-number" class="input" />
        </li>
        
        <li class="form-field">
            <label for="donor-card-number">Card Expiry</label>
            <input id="donor-card-expiry" name="expiry" type="month" required>
        </li>
        
        <li class="form-field">
            <label for="donor-inspiration">What inspired your contribution?</label>
            <textarea></textarea>
        </li>
        
        <button class="button-prominent button-l">Process my contribution</button>
        
    </ul>
</form>

Usage:

Donate now

First Name
Last Name
Address Line 1
Address Line 2
City
State

Zip
Email Please enter a valid email address
Phone Number
How much would you like to donate?
Card Number
Card Expiry
What inspired your contribution?

highlight-with-avatar #

<div class="slab-blue">
    <div class="layout-semibreve">
        <div class="highlight highlight-with-avatar">
            <img class="highlight-avatar" src="/../media/images/sf-seal.png"/>
            <p>The City of Denver recently enlisted the 2014 Code for America fellows to work alongside city staff and shape government services.</p>
        </div><!-- .highlight -->
    </div><!-- .layout-semibreve -->
</div><!-- .slab-blue -->

Usage:

The City of Denver recently enlisted the 2014 Code for America fellows to work alongside city staff and shape government services.

highlight-with-blockquote #

<section class="slab-blue">
    <div class="layout-semibreve">
        <div class="highlight highlight-with-avatar">
            <img class="highlight-avatar" src="/media/images/sf-seal.png"/>
            <blockquote>
                <p>Finding little wins that you can discover along the way, moments when people can come together and solve some small issue — that’s critical to the experience of innovation.</p>
            </blockquote>
            <p class="attribute">Nigel Jacob, Co-Director <a href="#">Boston’s Office of New Urban Mechanics</a></p>
        </div>
    </div>
</section>

Usage:

Finding little wins that you can discover along the way, moments when people can come together and solve some small issue — that’s critical to the experience of innovation.

Nigel Jacob, Co-Director Boston’s Office of New Urban Mechanics

lede #

<p class="lede">A <strong>lede</strong>, or <strong>lead</strong>, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word <em>need</em>.</p><!--/.lede-->

Usage: Content preceding the main body of a page or article, giving the reader the main idea of the following content.

A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.

list-credits #

<h4>We're collaborating with</h4>
<nav class="list-credits" role="navigation">
    <ul>
        <li><a href="#">New York</a></li>
        <li><a href="#">Philadelphia</a></li>
        <li><a href="#">Boston</a></li>
        <li><a href="#">Seattle</a></li>
        <li><a href="#">San Francisco</a></li>
        <li><a href="#">DC</a></li>
        <li><a href="#">Oakland</a></li>
        <li><a href="#">Chicago</a></li>
        <li><a href="#">International</a></li>
        <li><a href="#">Tampa</a></li>
        <li><a href="#">Tulsa</a></li>
        <li><a href="#">Chattanooga</a></li>
        <li><a href="#">Austin</a></li>
        <li><a href="#">Colorado</a></li>
        <li><a href="#">Lexington</a></li>
        <li><a href="#">Salt Lake</a></li>
        <li><a href="#">San Diego</a></li>
        <li><a href="#">Cincinnati</a></li>
        <li><a href="#">Whitewater</a></li>
        <li><a href="#">Raleigh</a></li>
        <li><a href="#">Orlando</a></li>
        <li><a href="#">Maine</a></li>
        <li><a href="#">Kansas City</a></li>
        <li><a href="#">Las Vegas</a></li>
        <li><a href="#">Durham</a></li>
        <li><a href="#">Hawaii</a></li>
        <li><a href="#">Detroit</a></li>
    </ul>
</nav>
<p class="isolate text-whisper"><a href="#">See all cities</a></p>

Usage:

We're collaborating with

See all cities

list-gappy #

<ul class="list-gappy">
    <li>New York</li>
    <li>Philadelphia</li>
    <li>Boston</li>
    <li>Seattle</li>
    <li>San Francisco</li>
    <li>DC</li>
    <li>Oakland</li>
    <li>Chicago</li>
    <li>International</li>
</ul>

Usage: Gives list items more vertical space.

New York
Philadelphia
Boston
Seattle
San Francisco
DC
Oakland
Chicago
International

list-icons #

<ul class="list-no-bullets list-icons">
    <li class="icon-calendar"><a href="#">Nov 19: Bike Hack NYU Rudin</a> 
    	<a class="text-whisper" href="#">More events</a>
    </li>
    <li class="icon-github2"><a href="#">Hack request: Add SMS to Ohana API</a> 
    	<a class="text-whisper" href="#">More hack requests</a>
    </li>
    <li class="icon-lamp"><a href="#">Feb 22-24: Code Across America</a> 
    	<a class="text-whisper" href="#">More national projects</a>
    </li>
    <li class="icon-youtube"><a href="#">Video: Civic Engagement &amp; Design</a> 
    	<a class="text-whisper" href="#">More CFA videos</a>
    </li>
    <li class="icon-tools"><a href="#">Publish and Curate Open Data</a>
    	<a class="text-whisper" href="#">More organizing</a>
    </li>
</ul>

Usage:

list-inline-buttons #

<ul class="list-inline list-no-bullets layout-centered"> 
    <li><a href="#outcomes" class="button">Outcomes and Apps</a></li>
    <li><a href="#timing" class="button">See the Timeline</a></li>
    <li><a href="/cities/fellowship-apply" class="button button-prominent">Enlist the Fellows</a></li>
</ul>

Usage:

Outcomes and Apps
See the Timeline
Enlist the Fellows

list-logos-hierachy-greyscale #

<ul class="list-logos-primary muted">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
</ul>

<ul class="list-logos-secondary muted">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<ul class="list-logos-tertiary muted">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<p class="layout-centered"><a href="#">More&hellip;</a></p>

Usage:

More…

list-logos-hierachy #

<ul class="list-logos-primary">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
</ul>

<ul class="list-logos-secondary">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<ul class="list-logos-tertiary">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<p class="layout-centered"><a href="#">More&hellip;</a></p>

Usage:

More…

list-logos-muted #

<ul class="list-logos muted">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<p class="layout-centered"><a href="#">More&hellip;</a></p>

Usage: Adding the class of "muted" makes the images black-and-white.

More…

list-logos #

<ul class="list-logos">
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
    <li><a href="#"><img src="/../media/images/duff.png"/></a></li>
    <li><a href="#"><img src="/../media/images/bluth-company.png"/></a></li>
    <li><a href="#"><img src="/../media/images/dunder-mifflin.png"/></a></li>
</ul>

<p class="layout-centered"><a href="#">More&hellip;</a></p>

Usage: For displaying a list of logos horizontally

More…

list-no-bullets #

<ul class="list-no-bullets">
    <li>New York</li>
    <li>Philadelphia</li>
    <li>Boston</li>
    <li>Seattle</li>
    <li>San Francisco</li>
    <li>DC</li>
    <li>Oakland</li>
    <li>Chicago</li>
    <li>International</li>
</ul>

Usage:

New York
Philadelphia
Boston
Seattle
San Francisco
DC
Oakland
Chicago
International

list-ruled #

<ul class="list-ruled">
    <li>New York</li>
    <li>Philadelphia</li>
    <li>Boston</li>
    <li>Seattle</li>
    <li>San Francisco</li>
    <li>DC</li>
    <li>Oakland</li>
    <li>Chicago</li>
    <li>International</li>
</ul>

Usage:

New York
Philadelphia
Boston
Seattle
San Francisco
DC
Oakland
Chicago
International

logos #

<ul class="layout-grid">
    <li class="layout-crotchet"><img src="/media/images/logo-black.png" title="Code for America"/> Black</li>
    <li class="layout-crotchet"><img src="/media/images/logo-colored.png" title="Code for America"/> Color</li>
    <li class="layout-crotchet"><img src="/media/images/logo-inverted.png" title="Code for America"/> Inverted</li>
</ul>

Usage:

Black
Color
Inverted

map #

<div class="slab-blue map-xl">
    <img src="media/images/map.png" alt="A map of America" />
</div>

Usage: An image is used here because the interactive version has reached its API limit.

Maps use the Mapbox service. To create a map, log into Mapbox and use the following settings:

Settings
* Streets: Disabled
* Buildings: Disabled
* Areas: Disabled
* Water: #3e9bd0
* Land: #d5d5d5

Replace the image with the embed code, which should look something like this (MAPID being your map ID):

<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v3/MAPID/mm/index.html?secure=1#4/34.49/-91.05'></iframe>

masthead-l #

<div class="masthead masthead-l">
    <div class="masthead-hero">
    	<div class="masthead-image" 
    		style="background-image: url('/media/images/masthead/masthead-3.jpg')">
    	</div>
    </div>
    <header class="layout-semibreve masthead-header" role="banner">
        <nav class="nav-breadcrumbs" role="navigation">
            <ul>
                <li><a href="/home/index.php">Home</a></li>
                <li>Blog</li>
            </ul>
        </nav>
        <h1 class="page-title" >Title</h1>
    </header>
</div>

Usage:

masthead-s #

<div class="masthead masthead-s">
    <div class="masthead-hero">
    	<div class="masthead-image" 
    		style="background-image: url('/media/images/masthead/masthead-3.jpg')">
    	</div>
    </div>
    <header class="layout-semibreve masthead-header" role="banner">
        <nav class="nav-breadcrumbs" role="navigation">
            <ul>
                <li><a href="/home/index.php">Home</a></li>
                <li>Blog</li>
            </ul>
        </nav>
        <h1 class="page-title" >Title</h1>
    </header>
</div>

Usage:

masthead-xl #

<div class="masthead masthead-xl">
    <header class="layout-semibreve masthead-header">
        <h1 class="page-title" >In San Francisco</h1>
        <p>One third of HSA clients are unneccessarily cut from food benefits. Four fellows built <a href="#">Promptly</a> offering SMS notifications to keep families fed.</p>
        <a class="text-whisper button-invert" href="/about/index.php">Learn more about what we do</a>
    </header>
</div>

Usage:

nav-articles #

<nav class="nav-articles" role="navigation">
    <ul>
        <li><a href="#" rel="prev">Previous</a></li>
        <li><a class="icon-grid" href="#">All articles</a></li>
        <li><a href="#" rel="next">Next</a></li>
    </ul>
</nav><!--/.nav-articles-->

Usage:

nav-horizontal #

<nav role="navigation" class="nav nav-horizontal">
    <ul class="list">
        <li><a href="#">Lorem link</a></li>
        <li><a href="#" class="is-active">Active link</a></li>
        <li><a href="#">Ipsum link</a></li>
        <li><a href="#">Dolor link</a></li>
    </ul>
</nav><!--/.nav-h-->

Usage:

nav-page #

<nav role="navigation" class="nav nav-page">
    <ul class="list">
        <li><a href="#" rel="prev">Previous</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#" class="is-active">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#" rel="next">Next</a></li>
    </ul>
</nav><!--/.nav-page-->

Usage:

nav-tabs #

<nav class="nav-tabs" role="navigation">
	<ul class="layout-semibreve layout-tight">
        <li class="nav-tab state-active"><a class="nav-tab-link" href="#">News</a></li>
        <li class="nav-tab"><a class="nav-tab-link" href="#">Cities</a></li>
        <li class="nav-tab"><a class="nav-tab-link" href="#">Startups</a></li>
        <li class="nav-tab"><a class="nav-tab-link" href="#">Civic Hacking</a></li>
    </ul>
</nav>

Usage:

nav-tags #

<nav class="nav-tags" role="navigation">
    <h3 class="h4">Explore by tag</h3>
    <ul>
    	<li class="state-active"><a href="#">Open Data</a></li>
    	<li><a href="#">Citizen Centered Design</a></li>
    	<li><a href="#">Data Driven Decision Making</a></li>
    	<li><a href="#">Community as Capacity</a></li>
    	<li><a href="#">Creating space for risk</a></li>
    	<li><a href="#">Sharing across cities</a></li>
    	<li><a href="#">Open Data</a></li>
    </ul>
</nav>

Usage:

nav-vertical #

<nav role="navigation" class="nav nav-vertical">
    <ul class="list">
        <li><a href="#">Lorem link</a></li>
        <li><a href="#" class="is-active">Active link</a></li>
        <li><a href="#">Ipsum link</a></li>
        <li><a href="#">Dolor link</a></li>
    </ul>
</nav><!--/.nav-v-->

Usage:

nav #

<nav role="navigation" class="nav">
    <ul class="list">
        <li><a href="#">Lorem link</a></li>
        <li><a href="#" class="is-active">Active link</a></li>
        <li><a href="#">Ipsum link</a></li>
        <li><a href="#">Dolor link</a></li>
    </ul>
</nav><!--/.nav-->

Usage:

post-preview #

<article class="post-preview">
    
    <header class="post-header isolate">
        <time class="post-date insulate text-whisper" datetime="2013-11-01T20:00+00:00">November 1st 2013</time>
        <h2 class="post-title"><a href="#">People, not data</a></h2>
    </header>
    
    <div class="post-author">
        <h2 class="text-whisper layout-tight">Written by</h2>
        <div class="h-card">
            <h3 class="p-name profile-name text-prominent">Zachary Townsend</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-zachary-townsend.jpg" />
        </div>
    </div><!-- .post-author -->
    
    <div class="post-body">
    
        <div class="post-content">
            <p>This is San Francisco’s main Food Stamps office. People call it twelve-thirty-five, as in 1235 Mission Street. The first time I went was on Thursday, February 7, 2013</p>
        </div>
    </div><!-- .post-body -->
    
    <a class="post-link" href="/about/">Read this post</a>

</article><!-- .post -->

Usage: Shows a teaser of a blog post with an abstract/excerpt and author information.

November 1st 2013

People, not data

Written by

Zachary Townsend

This is San Francisco’s main Food Stamps office. People call it twelve-thirty-five, as in 1235 Mission Street. The first time I went was on Thursday, February 7, 2013

Read this post

profile-small-v2 #

<ul class="profiles layout-grid-crotchet">

    <li>
        <h3>Cyd Harrell</h3>
        <img src="/../media/images/avatar-cyd-harrell.jpg" />
        <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. <a href="#">Before its acquisition in June 2012</a>, she was VP of UX Research at Bolt Peters in San Francisco. </p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://cydharrell.com/">Website</a></li>
            <li><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
            <li><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
        </ul>
    </li>
    
    <li>
        <h3>Michal Migurski</h3>
        <img src="/../media/images/avatar-michal-migurski.jpg" />
        <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://mike.teczno.com/">Website</a></li>
            <li><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
            <li><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
            <li><a href="https://github.com/migurski">GitHub</a></li>
            <li><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
        </ul>
    </li>

    <li>
        <h3>Dana Oshiro</h3>
        <img src="/../media/images/avatar-dana-oshiro.jpg" />
        <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
            <li><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
            <li><a href="http://facebook.com/danaoshiro">Facebook</a></li>
            <li><a href="https://github.com/danaoshiro">Github</a></li>
        </ul>
    </li>
    
    <li>
        <h3>Cyd Harrell</h3>
        <img src="/../media/images/avatar-cyd-harrell.jpg" />
        <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. <a href="#">Before its acquisition in June 2012</a>, she was VP of UX Research at Bolt Peters in San Francisco. </p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://cydharrell.com/">Website</a></li>
            <li><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
            <li><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
        </ul>
    </li>
    
    <li>
        <h3>Michal Migurski</h3>
        <img src="/../media/images/avatar-michal-migurski.jpg" />
        <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://mike.teczno.com/">Website</a></li>
            <li><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
            <li><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
            <li><a href="https://github.com/migurski">GitHub</a></li>
            <li><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
        </ul>
    </li>

    <li>
        <h3>Dana Oshiro</h3>
        <img src="/../media/images/avatar-dana-oshiro.jpg" />
        <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
            <li><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
            <li><a href="http://facebook.com/danaoshiro">Facebook</a></li>
            <li><a href="https://github.com/danaoshiro">Github</a></li>
        </ul>
    </li>

</ul>

Usage: For the profile to be styled correctly, the structure of the HTML must be a heading followed by an image, then a paragraph (can be more than one), a more link (optional), and an unordered list with links.

The links will be style automatically with the correct icon depending on the url. For any that aren't pre-defined, the default globe icon will be used.

Cyd Harrell

Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.
More
Michal Migurski

Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.
More
- Website
- @michalmigurski
- LinkedIn
- GitHub
- Flickr
Dana Oshiro

Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.
More
- @danaoshiro
- LinkedIn
- Facebook
- Github
Cyd Harrell

Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.
More
Michal Migurski

Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.
More
- Website
- @michalmigurski
- LinkedIn
- GitHub
- Flickr
Dana Oshiro

Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.
More
- @danaoshiro
- LinkedIn
- Facebook
- Github

profile-small #

<ul class="layout-grid">

    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Cyd Harrell</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-cyd-harrell.jpg" />
            <div class="p-note profile-note">
                <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco. </p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://cydharrell.com/">Website</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
                </ul>    
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>
    
    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Michal Migurski</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-michal-migurski.jpg" />
            <div class="p-note profile-note">
                <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://mike.teczno.com/">Website</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
                    <li class="social-github"><a href="https://github.com/migurski">GitHub</a></li>
                    <li class="social-flickr"><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
                </ul>     
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>

    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Dana Oshiro</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-dana-oshiro.jpg" />
            <div class="p-note profile-note">
                <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-twitter"><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
                    <li class="social-linkedin"><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
                    <li class="social-facebook"><a href="http://facebook.com/danaoshiro">Facebook</a></li>
                    <li class="social-github"><a href="https://github.com/danaoshiro">Github</a></li>
                </ul>      
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>


    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Michal Migurski</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-michal-migurski.jpg" />
            <div class="p-note profile-note">
                <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://mike.teczno.com/">Website</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
                    <li class="social-github"><a href="https://github.com/migurski">GitHub</a></li>
                    <li class="social-flickr"><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
                </ul>     
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>

    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Dana Oshiro</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-dana-oshiro.jpg" />
            <div class="p-note profile-note">
                <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-twitter"><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
                    <li class="social-linkedin"><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
                    <li class="social-facebook"><a href="http://facebook.com/danaoshiro">Facebook</a></li>
                    <li class="social-github"><a href="https://github.com/danaoshiro">Github</a></li>
                </ul>      
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>
    
    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Cyd Harrell</h3>
            <img class="u-photo profile-photo" src="/../media/images/avatar-cyd-harrell.jpg" />
            <div class="p-note profile-note">
                <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco. </p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://cydharrell.com/">Website</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
                </ul>    
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>



</ul>

Usage:

Cyd Harrell
Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.

More
Michal Migurski
Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.

More
- Website
- @michalmigurski
- LinkedIn
- GitHub
- Flickr
Dana Oshiro
Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.

More
- @danaoshiro
- LinkedIn
- Facebook
- Github
Michal Migurski
Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.

More
- Website
- @michalmigurski
- LinkedIn
- GitHub
- Flickr
Dana Oshiro
Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.

More
- @danaoshiro
- LinkedIn
- Facebook
- Github
Cyd Harrell
Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.

More

search-global #

<!-- This form is in 2 different places on the main site template, so make sure IDs are unique each time it is used -->
<form class="search-global" id="search-global" role="search">
    <input type="search" id="search-global-input" class="search-global-input" autocomplete="off" placeholder="Search" name="search-global" />
    <!-- consider applying autofocus="autofocus" to input -->
    <button class="search-global-submit" id="search-global-submit" value="Search" type="submit" name="search-global">Search</button>
</form>

Usage:

stat #

<p class="stat"><strong class="stat-heading">Companies<span class="hidden">:</span></strong> <span class="stat-figure">7</span> </p>

<p class="stat"><strong class="stat-heading">Applicants<span class="hidden">:</span></strong> <span class="stat-figure">235</span> </p>

Usage:

Companies: 7

Applicants: 235

teasers-apps #

<ul class="teasers">
	<li class="layout-crotchet">
	    <article class="teaser teaser-app">
	        <header class="teaser-header">
	            <a href="promptly/">
	                <h1 class="teaser-title">Promptly</h1>
	            </a>
	        </header>
	        <div class="teaser-body">
	            <p>Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.</p>
	            
	            <h2 class="text-whisper">Environment</h2>
	            <p>Ruby on Rails with Ohana API backend</p>
	            
	            <h2 class="text-whisper">Redeploy</h2>
	            <p>Programming and design skills</p>
	            
	            <p><a href="promptly/">Learn more about this app</a></p>
	        </div>
	        <footer class="teaser-footer">
	            <a href="promptly/" class="teaser-masthead">
	                <img class="teaser-image" src="/../media/images/logo-promptly.jpg" />
	            </a>
	        </footer>
	    </article>
	</li>
    <li class="layout-crotchet">
        <article class="teaser teaser-app">
            <header class="teaser-header">
                <a href="promptly/">
                    <h1 class="teaser-title">Civic Insight</h1>
                </a>
            </header>
            <div class="teaser-body">
                <p>Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.</p>
                
                <h2 class="text-whisper">Environment</h2>
                <p>Ruby on Rails with Ohana API backend</p>
                
                <h2 class="text-whisper">Redeploy</h2>
                <p>Programming and design skills</p>
                
                <p><a href="promptly/">Learn more about this app</a></p>
            </div>
            <footer class="teaser-footer">
                <a href="promptly/" class="teaser-masthead">
                    <img class="teaser-image" src="/../media/images/logo-civicinsight.jpg" />
                </a>
            </footer>
        </article>
    </li>
    <li class="layout-crotchet">
        <article class="teaser teaser-app">
            <header class="teaser-header">
                <a href="promptly/">
                    <h1 class="teaser-title">TextMyBus</h1>
                </a>
            </header>
            <div class="teaser-body">
                <p>TextMyBus provides a simple text messaging service to relay real time transit information to riders.</p>
                
                <h2 class="text-whisper">Environment</h2>
                <p>Ruby on Rails with Ohana API backend</p>
                
                <h2 class="text-whisper">Redeploy</h2>
                <p>Programming and design skills</p>
                
                <p><a href="promptly/">Learn more about this app</a></p>
            </div>
            <footer class="teaser-footer">
                <a href="promptly/" class="teaser-masthead">
                    <img class="teaser-image" src="/../media/images/logo-textmybus.jpg" />
                </a>
            </footer>
        </article>
    </li>
    <li class="layout-crotchet">
        <article class="teaser teaser-app">
            <header class="teaser-header">
                <a href="promptly/">
                    <h1 class="teaser-title">Localdata</h1>
                </a>
            </header>
            <div class="teaser-body">
                <p>Localdata is a digital toolkit that allows organizers and canvassers to collect and manage place-based data.</p>
                
                <h2 class="text-whisper">Environment</h2>
                <p>Ruby on Rails with Ohana API backend</p>
                
                <h2 class="text-whisper">Redeploy</h2>
                <p>Programming and design skills</p>
                
                <p><a href="promptly/">Learn more about this app</a></p>
            </div>
            <footer class="teaser-footer">
                <a href="promptly/" class="teaser-masthead">
                    <img class="teaser-image" src="/../media/images/logo-localdata.jpg" />
                </a>
            </footer>
        </article>
    </li>
    <li class="layout-crotchet">
        <article class="teaser teaser-app">
            <header class="teaser-header">
                <a href="promptly/">
                    <h1 class="teaser-title">Promptly</h1>
                </a>
            </header>
            <div class="teaser-body">
                <p>Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.</p>
                
                <h2 class="text-whisper">Environment</h2>
                <p>Ruby on Rails with Ohana API backend</p>
                
                <h2 class="text-whisper">Redeploy</h2>
                <p>Programming and design skills</p>
                
                <p><a href="promptly/">Learn more about this app</a></p>
            </div>
            <footer class="teaser-footer">
                <a href="promptly/" class="teaser-masthead">
                    <img class="teaser-image" src="/../media/images/logo-promptly.jpg" />
                </a>
            </footer>
        </article>
    </li>
    <li class="layout-crotchet">
        <article class="teaser teaser-app">
            <header class="teaser-header">
                <a href="promptly/">
                    <h1 class="teaser-title">Civic Insight</h1>
                </a>
            </header>
            <div class="teaser-body">
                <p>Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.</p>
                
                <h2 class="text-whisper">Environment</h2>
                <p>Ruby on Rails with Ohana API backend</p>
                
                <h2 class="text-whisper">Redeploy</h2>
                <p>Programming and design skills</p>
                
                <p><a href="promptly/">Learn more about this app</a></p>
            </div>
            <footer class="teaser-footer">
                <a href="promptly/" class="teaser-masthead">
                    <img class="teaser-image" src="/../media/images/logo-civicinsight.jpg" />
                </a>
            </footer>
        </article>
    </li>
</ul>

Usage:

Promptly

Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app
Civic Insight

Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app
TextMyBus

TextMyBus provides a simple text messaging service to relay real time transit information to riders.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app
Localdata

Localdata is a digital toolkit that allows organizers and canvassers to collect and manage place-based data.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app
Promptly

Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app
Civic Insight

Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.

Environment

Ruby on Rails with Ohana API backend

Redeploy

Programming and design skills

Learn more about this app

teasers-blog #

<ul class="teasers layout-grid-crotchet">
    <li>
        <a href="/posts/why-im-mentoring-for-america-by-zachary-townsend.php">
            <h3>Why I'm mentoring for America, by Zacahry Townsend</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="/posts/why-im-mentoring-for-america-by-zachary-townsend.php">
            <h3>Why I'm mentoring for America, by Zacahry Townsend</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="/posts/why-im-mentoring-for-america-by-zachary-townsend.php">
            <h3>Why I'm mentoring for America, by Zacahry Townsend</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="/posts/why-im-mentoring-for-america-by-zachary-townsend.php">
            <h3>Why I'm mentoring for America, by Zacahry Townsend</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="/posts/why-im-mentoring-for-america-by-zachary-townsend.php">
            <h3>Why I'm mentoring for America, by Zacahry Townsend</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p>
        </a>
    </li>
</ul>

Usage:

Why I'm mentoring for America, by Zacahry Townsend

Article
The Boston Globe
This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. Read more
Why I'm mentoring for America, by Zacahry Townsend

Article
The Boston Globe
This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. Read more
Why I'm mentoring for America, by Zacahry Townsend

Article
The Boston Globe
This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. Read more
Why I'm mentoring for America, by Zacahry Townsend

Article
The Boston Globe
This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. Read more
Why I'm mentoring for America, by Zacahry Townsend

Article
The Boston Globe
This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. Read more

teasers-minim #

<ul class="teasers layout-grid-minim">
    <li>
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="file.pdf">
            <h3>Open Data Barometer – Open Data Research Network</h3>
            <div>
                <span class="teaser-type-data">Open Data</span>
            </div>
        </a>
        <p>This project was supported with funding from the Open Data Institute</p>
    </li>
    <li class="teaser-video">
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <iframe width="100%" height="250" src="//www.youtube.com/embed/g5P1vJVQc-c?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
    </li>
    <li>
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
        </a>
    </li>
</ul>

Usage:

Technology team is developing smart solutions to everyday city problems

Article
The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more
Open Data Barometer – Open Data Research Network

Open Data

This project was supported with funding from the Open Data Institute
Technology team is developing smart solutions to everyday city problems

The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more
Technology team is developing smart solutions to everyday city problems

Article
The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more

teasers #

<ul class="teasers layout-grid-crotchet">
    <li>
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
        </a>
    </li>
    <li>
        <a href="file.pdf">
            <h3>Open Data Barometer – Open Data Research Network</h3>
            <div>
                <span class="teaser-type-data">Open Data</span>
            </div>
        </a>
        <p>This project was supported with funding from the Open Data Institute</p>
    </li>
    <li class="teaser-video">
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <iframe width="100%" height="250" src="//www.youtube.com/embed/g5P1vJVQc-c?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
    </li>
    <li>
        <a href="#">
            <h3>Technology team is developing smart solutions to everyday city problems</h3>
            <div>
                <img src="/../media/images/big-data.jpg" alt="" />
                <span class="teaser-type-article">Article</span>
            </div>
        </a>
        <span>The Boston Globe</span>
        <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p>
        </a>
    </li>
</ul>

Usage: Teasers must conform to this structure:

ul.teasers.layout-grid-crotchet
  li
    a
      h1/h2/h3/h4/h5/h6
      div
        img/embed/video/audio
        span.teaser-type-article
    span
    p

Technology team is developing smart solutions to everyday city problems

Article
The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more
Open Data Barometer – Open Data Research Network

Open Data

This project was supported with funding from the Open Data Institute
Technology team is developing smart solutions to everyday city problems

The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more
Technology team is developing smart solutions to everyday city problems

Article
The Boston Globe
On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams […] Read more

wodge-large #

<div class="wodge wodge-l">
    <h3 class="wodge-header">Fellowship: Ready to spend a year in civic service</h3>
    <img src="http://placehold.it/195x130" class="wodge-image" />
    <div class="wodge-text">
        <p>Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.</p>
    </div>
    <a href="#" class="button wodge-button">Find out more</a>
</div>
<div class="wodge wodge-l">
    <h3 class="wodge-header">Fellowship: Ready to spend a year in civic service</h3>
    <img src="http://placehold.it/195x130" class="wodge-image" />
    <div class="wodge-text">
        <p>Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.</p>
    </div>
    <a href="#" class="button wodge-button">Find out more</a>
</div>

Usage:

Fellowship: Ready to spend a year in civic service

Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.

Find out more

Fellowship: Ready to spend a year in civic service

Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.

Find out more

wodge-small #

<div class="wodge wodge-s">
    <img src="http://placehold.it/120x120" class="wodge-image" />
    <h3 class="wodge-header">Build capacity in your community</h3>
    <div class="wodge-button">
        <a href="#" class="button">Brigades</a>
        <a href="#" class="button">Events</a>
    </div>
    <div class="wodge-text">
        <p>Volunteer researchers, designers, developers and city officials are building better civic technology and deploying apps in more than 40 cities. See who’s hacking near you or check out an event in your city.</p>
    </div>

</div>

Usage:

Build capacity in your community

Brigades Events

Volunteer researchers, designers, developers and city officials are building better civic technology and deploying apps in more than 40 cities. See who’s hacking near you or check out an event in your city.

Previous	March 2013					Next
Sun	Mon	Tue	Wed	Thu	Fri	Sat
24	25	26	27	28	1	2
3	4 2pm: An event 4pm: Another event	5	6	7	8	9
10 2pm: An event 4pm: Another event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.	11	12	13	14	15 2pm: An event	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30 2pm: An event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 4pm: Another event
31	1	2	3 2pm: An event 4pm: Another event	4	5	6
Next 7 days:	Sunday 17th, 9am: A hack thing in San Francisco. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Monday 18th, All day: A thing Monday 18th, 3pm: Another thing in Maryland Tuesday 19th, All day: A thing Thursday 21st, 3pm: A hack thing in New York

Style Guide

Templates

Website Style Guide

Using the Guide

Bookmark Icons

Flag Red

Flag Blue

Flag Gray

Flag Black

Flag White and Blue

Flag White and Red

Flag White and Gray

Flag White and Black

Icons

Colors

Primary Colors

Secondary Colors

Layout

Slabs

slab-teal

slab-gray

slab-dark-gray

slab-red

slab-medium-red

slab-blue

slab-dark-blue

Elements

Forms

Headings

A new kind of public service

A new kind of public service

A new kind of public service

A new kind of public service

A new kind of public service

A new kind of public service

For Software developers

Links

Lists

Media

Tables

Text

Global

Patterns

No badge

Black badge heading (default)

Blue badge heading

Red badge heading

with a sub-heading

Orange badge heading

Teal badge heading

Purple badge heading which has lots of text in it so will wrap

Gray badge heading

Dark blue badge heading

block-gray

block-dark-gray

block-red

block-medium-red

block-blue

block-dark-blue

block-teal

Bring the right people at the table

Donors

Help make a difference

Governments

Solve your city's problems

Geeks

Use your skills for good

3,372

348

157

75

3,372

348

157

75

March 2013

Titles of some active members include:

Ready to Level Up?

Join the conversation

Why I Code for America