Menu

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-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-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
    • PMS 302U
    • 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
    • PMS 446U
    • 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-minim

layout-crotchet

layout-crotchet

layout-crotchet

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

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-minim-staccato

layout-minim-staccato

layout-minim-staccato

layout-crotchet-staccato

layout-crotchet-staccato

layout-crotchet-staccato

layout-crotchet-staccato

layout-crotchet-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-breve

layout-minim

layout-minim

layout-breve

layout-crotchet

layout-crotchet

layout-crotchet

layout-breve

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

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

layout-minim

layout-minim

layout-semibreve

layout-crotchet

layout-crotchet

layout-crotchet

layout-semibreve

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

layout-quaver

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

layout-grid-crotchet

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. 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.
  • Note about this field

slab-gray

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. 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.
  • Note about this field

slab-dark-gray

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. 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.
  • Note about this field

slab-red

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. 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.
  • Note about this field

slab-medium-red

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. 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.
  • Note about this field

slab-blue

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. 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.
  • Note about this field

slab-dark-blue

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. 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.
  • Note about this field

Elements

Forms

button-default # <button>Button</button> <button type="submit">Submit button</button> <a href="#" class="button">Link button</a> <input type="button" value="Input button"> <input type="submit" value="Input submit button">
Usage: 
Link button
button-size-l # <button class="button-l">Button</button> <button type="submit" class="button-l">Submit button</button> <a href="#" class="button-l">Link button</a> <input type="button" value="Input button" class="button-l"> <input type="submit" value="Input submit button" class="button-l">
Usage: 
Link button
button-size-s # <button class="button-s">Button</button> <button type="submit" class="button-s">Submit button</button> <a href="#" class="button-s">Link button</a> <input type="button" value="Input button" class="button-s"> <input type="submit" value="Input submit button" class="button-s">
Usage: 
Link button
button-style-alternative # <button class="button-alternative">Button</button> <button type="submit" class="button-alternative">Submit button</button> <a href="#" class="button-alternative">Link button</a> <input type="button" value="Input button" class="button-alternative"> <input type="submit" value="Input submit button" class="button-alternative">
Usage: 
Link button
button-style-bold # <button class="button-bold">Button</button> <button type="submit" class="button-bold">Submit button</button> <a href="#" class="button-bold">Link button</a> <input type="button" value="Input button" class="button-bold"> <input type="submit" value="Input submit button" class="button-bold">
Usage: 
Link button
button-style-disabled # <button disabled>Button</button> <button type="submit" disabled>Submit button</button> <a href="#" class="button-disabled">Link button</a> <input type="button" value="Input button" disabled> <input type="submit" value="Input submit button" disabled>
Usage: For form buttons, use the attribute "disabled". For links styled as buttons, use both the classes "button" and "button-disabled".
Link button
button-style-invert # <button class="button-invert">Button</button> <button type="submit" class="button-invert">Submit button</button> <a href="#" class="button-invert">Link button</a> <input type="button" value="Input button" class="button-invert"> <input type="submit" value="Input submit button" class="button-invert">
Usage: 
Link button
button-style-neutral # <button class="button-neutral">Button</button> <button type="submit" class="button-neutral">Submit button</button> <a href="#" class="button-neutral">Link button</a> <input type="button" value="Input button" class="button-neutral"> <input type="submit" value="Input submit button" class="button-neutral">
Usage: 
Link button
button-style-prominent # <button class="button-prominent">Button</button> <button type="submit" class="button-prominent">Submit button</button> <a href="#" class="button-prominent">Link button</a> <input type="button" value="Input button" class="button-prominent"> <input type="submit" value="Input submit button" class="button-prominent">
Usage: 
Link button
button-style-subtle # <button class="button-subtle">Button</button> <button type="submit" class="button-subtle">Submit button</button> <a href="#" class="button-subtle">Link button</a> <input type="button" value="Input button" class="button-subtle"> <input type="submit" value="Input submit button" class="button-subtle">
Usage: 
Link button
button-type-group # <div class="button-group"> <input type="submit" class="primary-button" value="Post comment"/> <input type="button" class="button" value="Preview"/> <a class="button button-unstyled" href="#">Cancel</a> </div>
Usage: 
button-type-progress-alternative # <button class="button-alternative button-progress">Button</button> <button type="submit" class="button-alternative button-progress">Submit button</button> <a href="#" class="button-alternative button-progress">Link button</a> <input type="button" class="button-alternative button-progress" value="Input button"> <input type="submit" class="button-alternative button-progress" value="Input submit button">
Usage: 
Link button
button-type-progress-bold # <button class="button-bold button-progress">Button</button> <button type="submit" class="button-bold button-progress">Submit button</button> <a href="#" class="button-bold button-progress">Link button</a> <input type="button" class="button-bold button-progress" value="Input button"> <input type="submit" class="button-bold button-progress" value="Input submit button">
Usage: 
Link button
button-type-progress-default # <button class="button-progress">Button</button> <button type="submit" class="button-progress">Submit button</button> <a href="#" class="button-progress">Link button</a> <input type="button" class="button-progress" value="Input button"> <input type="submit" class="button-progress" value="Input submit button">
Usage: 
Link button
button-type-progress-neutral # <button class="button-neutral button-progress">Button</button> <button type="submit" class="button-neutral button-progress">Submit button</button> <a href="#" class="button-neutral button-progress">Link button</a> <input type="button" class="button-neutral button-progress" value="Input button"> <input type="submit" class="button-neutral button-progress" value="Input submit button">
Usage: 
Link button
button-type-progress-prominent # <button class="button-prominent button-progress">Button</button> <button type="submit" class="button-prominent button-progress">Submit button</button> <a href="#" class="button-prominent button-progress">Link button</a> <input type="button" class="button-prominent button-progress" value="Input button"> <input type="submit" class="button-prominent button-progress" value="Input submit button">
Usage: 
Link button
button-type-progress-subtle # <button class="button-subtle button-progress">Button</button> <button type="submit" class="button-subtle button-progress">Submit button</button> <a href="#" class="button-subtle button-progress">Link button</a> <input type="button" class="button-subtle button-progress" value="Input button"> <input type="submit" class="button-subtle button-progress" value="Input submit button">
Usage: 
Link button
fieldset.select-checkboxes-captions # <form class="spotlight"> <fieldset class="select field"> <legend>Checkboxes with captions <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="checkbox11"><input id="checkbox11" name="checkbox" type="checkbox" checked/> Choice A</label> <small class="note">Note about this option</small> </li> <li> <label for="checkbox21"><input id="checkbox21" name="checkbox" type="checkbox"/> Choice B</label> <small class="note">Note about this option</small> </li> <li> <label for="checkbox31"><input id="checkbox31" name="checkbox" type="checkbox"/> Choice C</label> <small class="note">Note about this option</small> </li> </ul> </fieldset> </form>
Usage: 
Checkboxes with captions *
  • Note about this option
  • Note about this option
  • Note about this option
fieldset.select-checkboxes # <form class="spotlight"> <fieldset class="select field"> <legend>Checkboxes <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="checkbox10"><input id="checkbox10" name="checkbox" type="checkbox" checked/> Choice A</label> </li> <li> <label for="checkbox20"><input id="checkbox20" name="checkbox" type="checkbox"/> Choice B</label> </li> <li> <label for="checkbox30"><input id="checkbox30" name="checkbox" type="checkbox"/> Choice C</label> </li> </ul> <small class="note">Note about these options</small> </fieldset> </form>
Usage: 
Checkboxes *
Note about these options
fieldset.select-radios # <form class="spotlight"> <fieldset class="select field"> <legend>Radios <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="radio1"><input id="radio1" name="radio" type="radio" checked/> Option 1</label> </li> <li> <label for="radio2"><input id="radio2" name="radio" type="radio"/> Option 2</label> </li> <li> <label for="radio3"><input id="radio3" name="radio" type="radio"/> Option 3</label> </li> </ul> <small class="note">Note about these options</small> </fieldset> </form>
Usage: 
Radios *
Note about these options
form-fieldset # <form> <fieldset> <legend>Legend</legend> <p><small class="note">Required fields are marked <abbr title="Required">*</abbr></small></p> </fieldset> </form>
Usage: 
Legend

Required fields are marked *

form-input.checkbox # <p> <label for="checkbox" class="check"><input id="checkbox" type="checkbox" class="checkbox" required/>Single checkbox</label> <small class="note">Note about this field</small> <p>
Usage: 

Note about this field

form-input.email # <p> <label for="email">Email Address <abbr title="Required">*</abbr></label> <input id="email" class="input" type="email" placeholder="you@example.com" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

form-input.password # <p> <label for="password">Password <abbr title="Required">*</abbr></label> <input id="password" class="input" type="password" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

form-input.text # <p> <label for="text">Text Input <abbr title="Required">*</abbr></label> <input id="text" class="input" type="text" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

form-input.url # <p> <label for="url">Web Address <abbr title="Required">*</abbr></label> <input id="url" class="input" type="url" placeholder="http://example.com" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

form-inputs-combined # <p> <label for="combined">Combined Input</label> <span class="combined"> <input id="combined" class="input" type="text"/><!-- --><input type="button" class="button" value="Input Button"/> </span> </p>
Usage: 

form-options.checkboxes-captions # <form> <fieldset> <legend>Checkbox <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label> <small class="note">Note about these option</small> </li> <li> <label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label> <small class="note">Note about these option</small> </li> <li> <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label> <small class="note">Note about these option</small> </li> </ul> </fieldset> </form>
Usage: 
Checkbox *
  • Note about these option
  • Note about these option
  • Note about these option
form-options.checkboxes # <fieldset> <legend>Checkbox <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label> </li> <li> <label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label> </li> <li> <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label> </li> </ul> <small class="note">Note about these options</small> </fieldset>
Usage: 
Checkbox *
Note about these options
form-options.radios # <form> <fieldset> <legend>Radio <abbr title="Required">*</abbr></legend> <ul class="list-form"> <li> <label for="radio1" class="check"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"/>Option 1</label> </li> <li> <label for="radio2" class="check"><input id="radio2" name="radio" type="radio" class="radio"/>Option 2</label> </li> <li> <label for="radio3" class="check"><input id="radio3" name="radio" type="radio" class="radio"/>Option 3</label> </li> </ul> <small class="note">Note about these options</small> </fieldset> </form>
Usage: 
Radio *
Note about these options
form-select # <p> <label for="select">Select your State <abbr title="Required">*</abbr></label> <select id="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> <small class="note">Note about this selection</small> </p>
Usage: 

Note about this selection

form-signup # <form> <ul class="list-form"> <li class="form-field"> <input id="text" class="input" type="email" placeholder="email" /> <small class="note">Note about this field</small> </li> <li class="form-field"> <input id="text" class="input" type="text" placeholder="first name" /> </li> <li class="form-field"> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </li> </ul> </form>
Usage: 
  • Note about this field
form-textarea # <p> <label for="textarea">Textarea <abbr title="Required">*</abbr></label> <textarea id="textarea" class="input" rows="8" cols="32" required></textarea> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

input-checkbox-disabled # <p> <label for="checkbox"><input id="checkbox" type="checkbox" disabled/> Disabled checkbox</label> <small class="note">Note about this field</small> <p>
Usage: 

Note about this field

input-checkbox # <p class="field"> <label for="checkbox"><input id="checkbox" type="checkbox"/> Checkbox</label> <small class="note">Note about this field</small> <p>
Usage: 

Note about this field

input-email # <p class="field"> <label for="email">Email address <abbr title="Required">*</abbr></label> <input id="email" type="email" placeholder="you@example.com" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

input-password # <p class="field"> <label for="password">Password <abbr title="Required">*</abbr></label> <input id="password" type="password" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

input-text-disabled # <p> <label for="text-disabled">Disabled text</label> <input id="text-disabled" type="text" disabled/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

input-text # <p class="field"> <label for="text">Text <abbr title="Required">*</abbr></label> <input id="text" type="text" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

input-url # <p class="field"> <label for="url">Web address <abbr title="Required">*</abbr></label> <input id="url" type="url" placeholder="http://example.com" required/> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

select-disabled # <p> <label for="select-disabled">Disabled select <abbr title="Required">*</abbr></label> <select id="select-disabled" disabled> <optgroup label="Option Group A"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </optgroup> <optgroup label="Option Group B"> <option>Option Four</option> <option>Option Five</option> <option>Option Six</option> </optgroup> </select> <small class="note">Note about this selection</small> </p>
Usage: 

Note about this selection

select-multiple-disabled # <p> <label for="select-multiple-disabled">Disabled multiple select <abbr title="Required">*</abbr></label> <select id="select-multiple-disabled" multiple disabled> <optgroup label="Option Group A"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </optgroup> <optgroup label="Option Group B"> <option>Option Four</option> <option>Option Five</option> <option>Option Six</option> </optgroup> </select> <small class="note">Note about this selection</small> </p>
Usage: 

Note about this selection

select-multiple # <p class="field"> <label for="select-multiple">Multiple select <abbr title="Required">*</abbr></label> <select id="select-multiple" multiple> <optgroup label="Option Group A"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </optgroup> <optgroup label="Option Group B"> <option>Option Four</option> <option>Option Five</option> <option>Option Six</option> </optgroup> </select> <small class="note">Note about this selection</small> </p>
Usage: 

Note about this selection

select # <p class="field"> <label for="select">Select <abbr title="Required">*</abbr></label> <select id="select"> <optgroup label="Option Group A"> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> </optgroup> <optgroup label="Option Group B"> <option>Option Four</option> <option>Option Five</option> <option>Option Six</option> </optgroup> </select> <small class="note">Note about this selection</small> </p>
Usage: 

Note about this selection

textarea-disabled # <p> <label for="textarea">Disabled textarea</label> <textarea id="textarea" rows="8" cols="32" disabled></textarea> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

textarea # <p class="field"> <label for="textarea">Textarea <abbr title="Required">*</abbr></label> <textarea id="textarea" rows="8" cols="32" required></textarea> <small class="note">Note about this field</small> </p>
Usage: 

Note about this field

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

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: 
  1. Browse the applications we've listed.
  2. 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.
  3. 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: 
The Code for America team
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: 
The Code for America team
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
  1. #betaNYC, a Code for America Brigade for NYC: 1,281 Members
  2. Code for America Philly: 488 Members
  3. Code for Boston: 427 Members
  4. Code for Seattle: 379 Members
  5. Code for San Francisco - Civic Hack Night: 336 Members
  6. Code for DC: 218 Members
  7. OpenOakland: The Code for America Brigade in Oakland: 200 Members
  8. Colorado Code for Communities: 173 Members
  9. Code for Los Angeles: 149 Members
  10. Arlington Code Shop: 148 Members
hr # <hr/>
Usage: 

kbd # <p>To take a screenshot on your Mac, press <kbd>&#8984; Cmd</kbd> + <kbd>&#8679; 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.

Global

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

block-dark-gray

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.

block-red

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.

block-medium-red

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.

block-blue

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.

block-dark-blue

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.

block-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.
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: 
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.
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
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:
caption # <p class="note">Your email address will not be published.</p><!--/.caption-->
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

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

  • Please enter a valid email address
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: 
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: 
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: 
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: 
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.
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
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>

A map of America
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: 

In San Francisco

One third of HSA clients are unneccessarily cut from food benefits. Four fellows built Promptly offering SMS notifications to keep families fed.

Learn more about what we do
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.

People, not data

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

  • 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

  • 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

  • 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

  • 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: 
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: 
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
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

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.