Have a suggestion? Submit it as an issue on the Github repo!

Questions? Contact us at styleguide@codeforamerica.org.

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

Slab Layout

This is an example slab, it's used to section out content, especially on marketing pages. Inside of slabs, use the grid component to lay things out. Almost everything on this page is laid out using slabs and grids.

Grid Layout #

This is an example grid. Every element on the page should be within a grid element.

The grid allows you to size things from 1/12 to 1/1. Shift classes allow you to create empty spaces to the left of the grid item.

Grid items default to full width on mobile. More complex grid behaviors or nested grids should be created using the neat mixins.

<div class="grid">
  <div class="grid__item width-one-third">
    <p>This is an example grid. Every element on the page should be within a grid element.</p>
  </div>
  <div class="grid__item width-one-third">
    <p>The grid allows you to size things from 1/12 to 1/1. Shift classes allow you to create empty spaces to the left of the grid item.</p>
  </div>
  <div class="grid__item width-one-third">
    <p>Grid items default to full width on mobile. More complex grid behaviors or nested grids should be created using the neat mixins.</p>
  </div>
</div>

Card #

This is an example card. It's used to highlight and focus content. This may or may not be used for forms.

<div class="card">
  <p>This is an example card. It's used to highlight and focus content. This may or may not be used for forms.</p>
</div>

Notice #

This is an example notice. It's a great way to provide additional information on a certain issue.

This is an example warning notice. It's a great way to highlight potential issues.

<div class="notice">
  <p>This is an example notice. It's a great way to provide additional information on a certain issue.</p>
</div>

<div class="notice--warning">
  <p>This is an example warning notice. It's a great way to highlight <strong>potential issues</strong>.</p>
</div>

Colors #

Current

Deprecated

<div>Current</div>
<p>
  <div class="color color--green"></div>
  <div class="color color--green-light"></div>
  <div class="color color--grey"></div>
  <div class="color color--grey-light"></div>
  <div class="color color--grey-dark"></div>
  <div class="color color--grey-darkest"></div>
  <div class="color color--magenta"></div>
  <div class="color color--magenta-light"></div>
  <div class="color color--magenta-dark"></div>
  <div class="color color--red"></div>
  <div class="color color--red-light"></div>
  <div class="color color--teal"></div>
  <div class="color color--teal-light"></div>
  <div class="color color--teal-dark"></div>
  <div class="color color--yellow"></div>
  <div class="color color--yellow-light"></div>
  <div class="color color--background"></div>
</p>

<div>Deprecated</div>
<p>
  <div class="color color--tan"></div>
  <div class="color color--orange"></div>
</p>

Icons #

<i class="icon-add"></i>
<i class="icon-add_a_photo"></i>
<i class="icon-add_circle"></i>
<i class="icon-control_point"></i>
<i class="icon-arrow_back"></i>
<i class="icon-arrow_downward"></i>
<i class="icon-arrow_drop_down"></i>
<i class="icon-arrow_drop_up"></i>
<i class="icon-arrow_forward"></i>
<i class="icon-arrow_upward"></i>
<i class="icon-call_made"></i>
<i class="icon-call_received"></i>
<i class="icon-cancel"></i>
<i class="icon-check"></i>
<i class="icon-check_box"></i>
<i class="icon-check_box_outline_blank"></i>
<i class="icon-check_circle"></i>
<i class="icon-navigate_before"></i>
<i class="icon-navigate_next"></i>
<i class="icon-close"></i>
<i class="icon-mode_edit"></i>
<i class="icon-delete"></i>
<i class="icon-delete_forever"></i>
<i class="icon-done"></i>
<i class="icon-done_all"></i>
<i class="icon-time_to_leave"></i>
<i class="icon-markunread"></i>
<i class="icon-expand_less"></i>
<i class="icon-favorite"></i>
<i class="icon-favorite_border"></i>
<i class="icon-get_app"></i>
<i class="icon-file_upload"></i>
<i class="icon-help"></i>
<i class="icon-help_outline"></i>
<i class="icon-highlight_off"></i>
<i class="icon-photo"></i>
<i class="icon-info"></i>
<i class="icon-info_outline"></i>
<i class="icon-insert_comment"></i>
<i class="icon-tag_faces"></i>
<i class="icon-keyboard_arrow_down"></i>
<i class="icon-keyboard_arrow_left"></i>
<i class="icon-keyboard_arrow_right"></i>
<i class="icon-keyboard_arrow_up"></i>
<i class="icon-keyboard_backspace"></i>
<i class="icon-language"></i>
<i class="icon-room"></i>
<i class="icon-lock_open"></i>
<i class="icon-lock_outline"></i>
<i class="icon-mood_bad"></i>
<i class="icon-move_to_inbox"></i>
<i class="icon-no_encryption"></i>
<i class="icon-notifications"></i>
<i class="icon-notifications_active"></i>
<i class="icon-notifications_off"></i>
<i class="icon-people"></i>
<i class="icon-group_add"></i>
<i class="icon-person"></i>
<i class="icon-person_add"></i>
<i class="icon-phone_in_talk"></i>
<i class="icon-phone_iphone"></i>
<i class="icon-visibility"></i>
<i class="icon-replay"></i>
<i class="icon-report"></i>
<i class="icon-warning"></i>
<i class="icon-sentiment_dissatisfied"></i>
<i class="icon-sentiment_neutral"></i>
<i class="icon-sentiment_satisfied"></i>
<i class="icon-sentiment_very_dissatisfied"></i>
<i class="icon-sentiment_very_satisfied"></i>
<i class="icon-settings"></i>
<i class="icon-star_border"></i>
<i class="icon-stars"></i>
<i class="icon-thumb_down"></i>
<i class="icon-thumb_up"></i>
<i class="icon-timer"></i>
<i class="icon-translate"></i>
<i class="icon-vertical_align_bottom"></i>
<i class="icon-vertical_align_top"></i>
<i class="icon-watch_later"></i>
<i class="icon-zoom_in"></i>
<i class="icon-zoom_out"></i>

Typography #

Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.

Heading Level 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia harum fugit saepe, laudantium sit iure nihil alias voluptatibus neque sed perferendis ad quod maiores, fugiat tenetur. Adipisci modi cum at.

Heading Level 4

This is what link text looks like. This is what link text looks like. This is what link text looks like.

This is what subtle link text looks like

This is what small text looks like. Used for legalize, small links, etc.

This is what help text looks like. It's used to provide supporting information.

This is what error text looks like.

  • Unstyled list item 1
  • Unstyled list item 2
  • Unstyled list item 3
  • Padded list item 1
  • Padded list item 2
  • Padded list item 3
  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3
  1. Numbered list item 1
  2. Numbered list item 2
  3. Numbered list item 3
<h1>Heading Level 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.</p>
<h2>Heading Level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.</p>
<h3>Heading Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia harum fugit saepe, laudantium sit iure nihil alias voluptatibus neque sed perferendis ad quod maiores, fugiat tenetur. Adipisci modi cum at.</p>
<h4>Heading Level 4</h4>
<p><a href="#">This is what link text looks like. This is what link text looks like. This is what link text looks like.</a></p>
<p><a href="#" class="link--subtle">This is what subtle link text looks like</a></p>
<p class="text--small">This is what small text looks like. Used for legalize, small links, etc.</p>
<p class="text--help">This is what help text looks like. It's used to provide supporting information.</p>
<p class="text--error">This is what error text looks like.</p>
<ul>
  <li>Unstyled list item 1</li>
  <li>Unstyled list item 2</li>
  <li>Unstyled list item 3</li>
</ul>
<ul class="list--padded">
  <li>Padded list item 1</li>
  <li>Padded list item 2</li>
  <li>Padded list item 3</li>
</ul>
<ul class="list--bulleted">
  <li>Bulleted list item 1</li>
  <li>Bulleted list item 2</li>
  <li>Bulleted list item 3</li>
</ul>
<ol class="list--numbered">
  <li>Numbered list item 1</li>
  <li>Numbered list item 2</li>
  <li>Numbered list item 3</li>
</ol>

Spacing #

A div with no margin

A div with small bottom margin

A div with medium bottom margin

A div with large bottom margin

A div with huge bottom margin

A div with tiny top margin

A div with small top margin

A div with med top margin

A div with large top margin

A div with huge top margin
<div class="box-wrapper">
  <div class="box with-no-padding">A div with no margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box with-padding-small">A div with small bottom margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box with-padding-med">A div with medium bottom margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box with-padding-large">A div with large bottom margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box with-padding-huge">A div with huge bottom margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box nudge--tiny">A div with tiny top margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box nudge--small">A div with small top margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box nudge--med">A div with med top margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box nudge--large">A div with large top margin</div>
</div><br/>
<div class="box-wrapper">
  <div class="box nudge--huge">A div with huge top margin</div>
</div>

Labels #

Beta Featured New Green In Progress Error

<p>
  <%= render 'components/atoms/label', text: 'Beta' %>
  <%= render 'components/atoms/label', text: 'Featured', variant: 'magenta' %>
  <%= render 'components/atoms/label', text: 'New', variant: 'teal' %>
  <%= render 'components/atoms/label', text: 'Green', variant: 'done' %>
  <%= render 'components/atoms/label', text: 'In Progress', variant: 'orange' %>
  <%= render 'components/atoms/label', text: 'Error', variant: 'red' %>
</p

Buttons #

Small
Standard
Large
Misc
<div class="h4">Small</div>
<div>
  <button class="button button--small button--cta">CTA Button</button>
  <button class="button button--small button--cta button--disabled" disabled>Disabled CTA Button</button>
</div>
<div>
  <button class="button button--small button--primary">Primary Button</button>
  <button class="button button--small button--primary button--disabled" disabled>Disabled Primary Button</button>
</div>
<div>
  <button class="button button--small">Button</button>
  <button class="button button--small button--disabled" disabled>Disabled Button</button>
</div>
<div>
  <button class="button button--small button--danger">Danger Button</button>
  <button class="button button--small button--danger button--disabled" disabled>Disabled Danger Button</button>
</div>

<div class="h4">Standard</div>
<div>
  <button class="button button--cta">CTA Button</button>
  <button class="button button--cta button--disabled" disabled>Disabled CTA Button</button>
</div>
<div>
  <button class="button button--primary">Primary Button</button>
  <button class="button button--primary button--disabled" disabled>Disabled Primary Button</button>
</div>
<div>
  <button class="button">Button</button>
  <button class="button button--disabled" disabled>Disabled Button</button>
</div>
<div>
  <button class="button button--danger">Danger Button</button>
  <button class="button button--danger button--disabled" disabled>Disabled Danger Button</button>
</div>

<div class="h4">Large</div>
<div>
  <button class="button button--large button--cta">CTA Button</button>
  <button class="button button--large button--cta button--disabled" disabled>Disabled CTA Button</button>
</div>
<div>
  <button class="button button--large button--primary">Primary Button</button>
  <button class="button button--large button--primary button--disabled" disabled>Disabled Primary Button</button>
</div>
<div>
  <button class="button button--large">Button</button>
  <button class="button button--large button--disabled" disabled>Disabled Button</button>
</div>
<div>
  <button class="button button--large button--danger">Danger Button</button>
  <button class="button button--large button--danger button--disabled" disabled>Disabled Danger Button</button>
</div>

<div class="h4">Misc</div>
<div>
  <button class="button">Button with icon <i class="button__icon icon-arrow_forward"></i></span></button>
  <button class="button"><i class="button__icon--left icon-arrow_back"></i></span> Button with icon</button>
</div>
<div>
  <button class="button button--link">A button styled to look like a link</button>
</div>

Form Elements #

<form action="POST">
  <label class="form-question" for="example_text">Form question, usually posed as a question?</label>
  <input type="text" class="text-input" placeholder="Text input" name="example_text">
  <input type="text" class="text-input form-width--long" placeholder="Long" name="example_text">
  <input type="text" class="text-input form-width--med" placeholder="Medium" name="example_text">
  <input type="text" class="text-input form-width--short" placeholder="Short" name="example_text">
  <input type="text" class="text-input form-width--name" placeholder="Name" name="example_text">
  <input type="text" class="text-input form-width--phone" placeholder="Phone #" name="example_text">
  <input type="text" class="text-input form-width--ssn" placeholder="SSN" name="example_text">
  <input type="text" class="text-input form-width--zip" placeholder="ZIP" name="example_text">
  <label for="example_radio" class="radio-button">
    <input type="radio" name="example_radio" id="example_radio">
    Example radio button
  </label>
  <label for="example_checkbox" class="checkbox">
    <input type="checkbox" name="example_checkbox" id="example_checkbox">
    Example checkbox
  </label>
  <div class="select">
    <select class="select__element" name="example_select" id="example_select">
      <option selected disabled>Choose a selection</option>
      <option value="1">Selection 1</option>
      <option value="2">Selection 2</option>
      <option value="2">Selection 3</option>
    </select>
  </div>

  <textarea name="example_textarea" class="textarea" id="" cols="30" rows="10"></textarea>
  <div class="file-upload">
    <input type="file" id="example_file_upload" name="example_file_upload" class="file-upload__input">
    <label class="button" for="example_file_upload" class="file-upload__label">Upload documents <i class="button__icon icon-file_upload"></i></label>
  </div>
</form>

General atomic form elements have no knowledge about their size and default to full width. Form molecules and organisms or modifier classes should be used to define form element sizes and layout.

Example Pills #

Social security State disability Military BAH Child support Worker's comp Alimony Unemployment VA Benefits Pensions Monetary gifts

<%= render 'components/atoms/examples', examples: ["Social security", "State disability", "Military BAH", "Child support", "Worker's comp", "Alimony", "Unemployment", "VA Benefits", "Pensions", "Monetary gifts"] %>

Molecules

Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.

Media Box #

calfresh logo

A media box is used to juxtapose a piece of media (like an image) with a block of content. It is used when the media and content is treated holistically as one block and does not align to the grid.

calfresh logo

There are modifier classes on the media element to size the media and to present it either on the left or right.

<!--  Media box -->
<div class="media-box">
  <div class="media-box__media media--icon">
    <img src="<%= image_path 'calfresh_logo.png' %>" alt="calfresh logo">
  </div>
  <div class="media-box__content">
    <p>A media box is used to juxtapose a piece of media (like an image) with a block of content. It is used when the media and content is treated holistically as one block and does not align to the grid.</p>
  </div>
</div>

<!--  Reversed media box -->
<div class="media-box media-box--reversed">
  <div class="media-box__media media--small">
    <img src="<%= image_path 'calfresh_logo.png' %>" alt="calfresh logo">
  </div>
  <div class="media-box__content">
    <p> There are modifier classes on the media element to size the media and to present it either on the left or right.</p>
  </div>
</div>

Toolbar #

Logo for Product
Logo for Product
<!-- Wrap the right links below the logo when screen is too small -->
<div class="toolbar toolbar--wrap-when-small">
  <div class="toolbar__left">
    <b>
      <i class="icon-done_all"></i>
      Logo for Product
    </b>
  </div>
  <div class="toolbar__right">
    <a class="toolbar__item" href="#">Link One</a>
    <a class="toolbar__item" href="#">Link Two</a>
    <a class="toolbar__item" href="#">Link Three</a>
  </div>
</div>

<!-- Hide logo text when the screen is too small -->
<div class="toolbar toolbar--hide-text-when-small">
  <div class="toolbar__left">
    <b>
      <i class="icon-done_all"></i>
      <span class="toolbar__logo-text">Logo for Product</span>
    </b>
  </div>
  <div class="toolbar__right">
    <a class="toolbar__item" href="#">Link</a>
    <a class="toolbar__item" href="#">Link</a>
  </div>
</div>

Tab bar #

<div class="tab-bar">
  <a href="#" class="tab-bar__tab is-selected">Clients</a>
  <a href="#" class="tab-bar__tab">Analytics</a>
  <a href="#" class="tab-bar__tab">Team</a>
</div>

Flash messages #

Your changes have been saved.

You must be signed in to continue.

<div class="example-container">
  <div class="flash">
    <p class="flash__message">Your changes have been saved.</p>
    <a href="#" class="flash__dismiss" aria-label="Dismiss"><span class="icon icon-close"></span></a>
  </div>
</div>
<div class="example-container">
  <div class="flash flash--error">
    <p class="flash__message">You must be signed in to continue.</p>
    <a href="#" class="flash__dismiss" aria-label="Dismiss"><span class="icon icon-close"></span></a>
  </div>
</div>

Example Group #

For example:

Social security State disability Military BAH Child support Worker's comp Alimony Unemployment VA Benefits Pensions Monetary gifts

<%= render 'components/molecules/example_group', examples: ["Social security", "State disability", "Military BAH", "Child support", "Worker's comp", "Alimony", "Unemployment", "VA Benefits", "Pensions", "Monetary gifts"] %>

Progress indicator #

50% complete
<%= render 'components/molecules/progress_indicator', percent: 50 %>

Progress step bar #

Step 3 of 5: Basic Info
<!--
  A progress bar without a text label

  Required: `current_step`, `step_count` as integers
-->
<%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 2, step_count: 5 } %>


<!--
  A progress bar with a text label

  Required: `current_step`, `step_count` as integers; `step_description` (used to generate text label)
-->
<%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5, step_description: 'Step 3 of 5: Basic Info' } %>

Reveal #

Learn more about student eligibility

In order to qualify as a college student, you have to meet one of the following exemptions:

  • Work an average at least 20 hours a week
  • Approved for federal or state work study
  • Take care of a child under 12 (with exceptions)
  • Participate in an approved employment or traning program
  • Receive CalWORKs
  • Do not intend to enroll next term
<%= render('components/molecules/reveal', title: 'Learn more about student eligibility') do %>
  <p>In order to qualify as a college student, you have to meet one of the following exemptions:</p>
  <ul class="list--bulleted with-padding-med">
    <li>Work an average at least 20 hours a week</li>
    <li>Approved for federal or state work study</li>
    <li>Take care of a child under 12 (with exceptions)</li>
    <li>Participate in an approved employment or traning program</li>
    <li>Receive CalWORKs</li>
    <li>Do not intend to enroll next term</li>
  </ul>
<% end %>

Show More #

Summary

  • I have been honest on this report.
  • I have attached all required documents.
  • I understand the county may contact whomever to verify my eligibility.
  • I have read the Calfresh Program Rules and Penalties.

Details

  • I understand and certify, under penalty of perjury, that all my answers on this report are correct and complete to the best of my knowledge.
  • I understand and agree to give copies of all documents needed to complete my semi-annual report
  • I understand that in some instances, I may be asked to give consent to the County to make whatever contacts are necessary to determine eligibility
<%= render('components/molecules/show_more') do %>
  <h3>Summary</h3>
  <ul class="list--bulleted">
    <li>I have been honest on this report.</li>
    <li>I have attached all required documents.</li>
    <li>I understand the county may contact whomever to verify my eligibility.</li>
    <li>I have read the Calfresh Program Rules and Penalties.</li>
  </ul>
  <h3>Details</h3>
  <ul class="list--bulleted">
    <li>I understand and certify, under penalty of perjury, that all my answers on this report are correct and complete to the best of my knowledge.</li>
    <li>I understand and agree to give copies of all documents needed to complete my semi-annual report</li>
    <li>I understand that in some instances, I may be asked to give consent to the County to make whatever contacts are necessary to determine eligibility</li>
  </ul>
<% end %>

Summary Table #

Household size

1

Last month's income

$1000

County

Marin

<div class="summary-table">
  <div class="grid">
    <div class="grid__item width-one-third">
      <p class="summary-table__label">Household size</p>
      <p class="summary-table__value">1 <span class="icon icon-person"></span></p>
    </div>
    <div class="grid__item width-one-third">
      <p class="summary-table__label">Last month's income</p>
      <p class="summary-table__value">$1000</p>
    </div>
    <div class="grid__item width-one-third">
      <p class="summary-table__label">County</p>
      <p class="summary-table__value">Marin</p>
    </div>
  </div>
</div>

Data Table #

Applicant Birth date Confirmation #
Applicant 1 04/02/1988 AKJHSD83K
Applicant 2 04/02/1988 AKJHSD83K
Applicant 3 04/02/1988 AKJHSD83K
Applicant 4 04/02/1988 AKJHSD83K
Applicant 5 04/02/1988 AKJHSD83K
Applicant 6 04/02/1988 AKJHSD83K
<table class="data-table">
  <thead>
  <tr>
    <th>Applicant</th>
    <th>Birth date</th>
    <th>Confirmation #</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Applicant 1</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  <tr class="row--warning">
    <td>Applicant 2</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  <tr>
    <td>Applicant 3</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  <tr>
    <td>Applicant 4</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  <tr class="row--error">
    <td>Applicant 5</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  <tr>
    <td>Applicant 6</td>
    <td>04/02/1988</td>
    <td>AKJHSD83K</td>
  </tr>
  </tbody>
</table>

Searchbar #

<form class="searchbar form-width--searchbar">
  <input type="text" class="searchbar__input" placeholder="Search applicants by name or confirmation #">
  <label class="searchbar__button"><span class="icon icon-arrow_forward"></span><button type="submit"></button></label>
</form>

Text Input Group #

$
.00
<div class="text-input-group">
  <div class="text-input-group__prefix">$</div>
  <input type="text" class="text-input" placeholder="Text input with pre and post labels" name="example_text">
  <div class="text-input-group__postfix">.00</div>
</div>

Incrementer #

- +
<div class="incrementer">
  <input type="number" class="text-input form-width--short" name="incrementer" value="1" min="0" max="10">
  <span class="incrementer__subtract">-</span>
  <span class="incrementer__add">+</span>
</div>

Block Input Group #

<form action="POST">
  <radiogroup class="input-group--block">
    <label for="example_radio_block_1" class="radio-button">
      <input type="radio" name="example_radio_block_1" id="example_radio_block_1">
      Radio button 1
    </label>
    <label for="example_radio_block_2" class="radio-button">
      <input type="radio" name="example_radio_block_2" id="example_radio_block_2">
      Radio button 2
    </label>
    <label for="example_radio_block_3" class="radio-button">
      <input type="radio" name="example_radio_block_3" id="example_radio_block_3">
      Radio button 3
    </label>
  </radiogroup>
</form>

Inline Input Group #

<form action="POST">
  <radiogroup class="input-group--inline">
    <label for="example_radio_inline_1" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_1">
      1
    </label>
    <label for="example_radio_inline_2" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_2">
      2
    </label>
    <label for="example_radio_inline_3" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_3">
      3
    </label>
    <label for="example_radio_inline_4" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_4">
      4
    </label>
    <label for="example_radio_inline_5" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_5">
      5
    </label>
    <label for="example_radio_inline_6" class="radio-button">
      <input type="radio" name="example_radio_inline" id="example_radio_inline_6">
      6
    </label>
  </radiogroup>
</form>

Two-up Input Group #

<form action="POST">
  <radiogroup class="input-group--two-up">
    <label for="example_radio_two-up_1" class="radio-button">
      <input type="radio" name="example_radio_two-up" id="example_radio_two-up_1">
      Radio button 1
    </label>
    <label for="example_radio_two-up_2" class="radio-button">
      <input type="radio" name="example_radio_two-up" id="example_radio_two-up_2">
      Radio button 2
    </label>
    <label for="example_radio_two-up_3" class="radio-button">
      <input type="radio" name="example_radio_two-up" id="example_radio_two-up_3">
      Radio button 3
    </label>
    <label for="example_radio_two-up_4" class="radio-button">
      <input type="radio" name="example_radio_two-up" id="example_radio_two-up_4">
      Radio button 4
    </label>
  </radiogroup>
</form>

Form Group #

Include family members and housemates you share food with.

<form action="POST">
  <div class="form-group">
    <label class="form-question" for="example_form_question">How many people live in your household, including yourself?</label>
    <p class="text--help">Include family members and housemates you share food with.</p>
    <radiogroup class="input-group--inline">
      <label for="example_radio_inline_2_1" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_1">
        1
      </label>
      <label for="example_radio_inline_2_2" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_2">
        2
      </label>
      <label for="example_radio_inline_2_3" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_3">
        3
      </label>
      <label for="example_radio_inline_2_4" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_4">
        4
      </label>
      <label for="example_radio_inline_2_5" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_5">
        5
      </label>
      <label for="example_radio_inline_2_6" class="radio-button">
        <input type="radio" name="example_radio_inline_2" id="example_radio_inline_2_6">
        6
      </label>
    </radiogroup>
  </div>
</form>

Form Group Error State #

Include family members and housemates you share food with.

Make sure you answer this question.

<form action="POST">
  <div class="form-group form-group--error">
    <label class="form-question" for="example_form_question">How many people live in your household, including yourself?</label>
    <p class="text--help">Include family members and housemates you share food with.</p>
    <radiogroup class="input-group--inline">
      <label for="example_radio_inline_3_1" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_1">
        1
      </label>
      <label for="example_radio_inline_3_2" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_2">
        2
      </label>
      <label for="example_radio_inline_3_3" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_3">
        3
      </label>
      <label for="example_radio_inline_3_4" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_4">
        4
      </label>
      <label for="example_radio_inline_3_5" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_5">
        5
      </label>
      <label for="example_radio_inline_3_6" class="radio-button">
        <input type="radio" name="example_radio_inline_3" id="example_radio_inline_3_6">
        6
      </label>
    </radiogroup>
    <p class="text--error"><i class="icon-warning"></i> Make sure you answer this question.</p>
  </div>
</form>

Follow Up Question #

Answering no will trigger a follow-up question.

<form action="POST">
  <!-- Follow-up with a radio button -->
  <div class="question-with-follow-up">
    <div class="question-with-follow-up__question">
      <fieldset class="form-group">
        <label class="form-question" for="example_form_question">Did you have a CalFresh interview?</label>
        <p class="text--help">Answering no will trigger a follow-up question.</p>
        <radiogroup class="input-group--inline">
          <label for="example_radio_inline_4_1" class="radio-button">
            <input type="radio" name="example_radio_inline_4" id="example_radio_inline_4_1">
            Yes
          </label>
          <label for="example_radio_inline_4_2" class="radio-button">
            <input type="radio" name="example_radio_inline_4" id="example_radio_inline_4_2" data-follow-up="#interview-follow-up">
            No
          </label>
        </radiogroup>
      </fieldset>
    </div>
    <div class="question-with-follow-up__follow-up" id="interview-follow-up">
      <fieldset class="form-group">
        <label class="form-question" for="enrollment_survey_interview_follow_up">Do you know why?</label>
        <p class="text--help">Check all that apply</p>
        <radiogroup class="input-group--block">
          <label for="enrollment_survey_interview_follow_up_notified_too_late" class="radio-button">
            <input type="radio" name="enrollment_survey[interview_follow_up]" id="enrollment_survey_interview_follow_up_notified_too_late">
            Notified too late
          </label>
          <label for="enrollment_survey_interview_follow_up_never_received_call" class="radio-button">
            <input type="radio" name="enrollment_survey[interview_follow_up]" id="enrollment_survey_interview_follow_up_never_received_call">
            Never received a call
          </label>
          <label for="enrollment_survey_interview_follow_up_no_phone" class="radio-button">
            <input type="radio" name="enrollment_survey[interview_follow_up]" id="enrollment_survey_interview_follow_up_no_phone">
            Don’t have a phone
          </label>
          <label for="enrollment_survey_could_not_attend" class="radio-button">
            <input type="radio" name="enrollment_survey[interview_follow_up]" id="enrollment_survey_could_not_attend">
            Missed the interview
          </label>
        </radiogroup>
      </fieldset>
    </div>
  </div>

  <!-- Follow-up with a checkbox -->
  <div class="question-with-follow-up">
    <div class="question-with-follow-up__question">
      <fieldset class="form-group">
        <label class="checkbox">
          <input data-follow-up="#different-preferred-name-follow-up" type="checkbox" value="1" name="example_name_checkbox" id="example_name_checkbox">
          I prefer a different first name
        </label>
      </fieldset>
    </div>
    <div class="question-with-follow-up__follow-up" id="different-preferred-name-follow-up">
      <div class="form-group">
        <label for="member_preferred_first_name">
          <p class="form-question">What is your preferred first name?</p>
        </label>
        <input type="text" class="text-input" name="example_name_preferred" id="example_name_preferred">
      </div>
    </div>
  </div>
</form>

How it works: the proceeding question requires an additional class 'form-group--with-follow-up'. Any answer that triggers a follow up should contain an additional attribute 'data-follow-up' with the value being the id of the follow-up question (starting with #).

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Pagination #

<div class="pagination">
  <div class="pagination__info">
    <p class="text--help">Displaying 1-20 of 344 applicants</p>
  </div>
  <div class="pagination__buttons">
    <button class="button button--small" aria-label="Go back one page"><i class="icon icon-keyboard_arrow_left"></i></button>
    <button class="button button--small">1</button>
    <button class="button button--small pagination__selected">2</button>
    <button class="button button--small">3</button>
    <span class="pagination__ellipsis">&hellip;</span>
    <button class="button button--small">6</button>
    <button class="button button--small" aria-label="Go forward one page"><i class="icon icon-keyboard_arrow_right"></i></button>
  </div>
</div>

Steps #

Step 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Step 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Step 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-card text--centered">
  <div class="form-card__content">
    <div class="grid steps">
      <div class="grid__item width-one-third">
        <div class="emoji emoji--med emoji--pencil"></div>
        <p class=" with-no-padding"><b>Step 1</b></p>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="grid__item width-one-third">
        <div class="emoji emoji--med emoji--ok"></div>
        <p class=" with-no-padding"><b>Step 2</b></p>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="grid__item width-one-third">
        <div class="emoji emoji--med emoji--eggs"></div>
        <p class=" with-no-padding"><b>Step 3</b></p>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

Vertical Steps #

Step 1 is the first of the steps

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Step 2 comes after Step 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The last step is Step 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-card text--centered">
  <div class="form-card__content">
    <div class="vertical-steps">
      <div class="vertical-steps__step">
        <div class="emoji emoji--med emoji--pencil"></div>
        <h3><b>Step 1</b> is the first of the steps</h3>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="vertical-steps__step">
        <div class="emoji emoji--med emoji--ok"></div>
        <h3><b>Step 2</b> comes after Step 1</h3>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="vertical-steps__step">
        <div class="emoji emoji--med emoji--eggs"></div>
        <h3>The last step is <b>Step 3</b></h3>
        <p class="text--small with-padding-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

Statistics Card #

Students

8 🎓

Children

12 👶

Seniors

5 👵

<div class="grid">
  <div class="grid__item width-one-third">
    <div class="statistic-card">
      <p class="statistic-card__label">Students</p>
      <p class="statistic-card__number">8  🎓</p>
    </div>
  </div>
  <div class="grid__item width-one-third">
    <div class="statistic-card">
      <p class="statistic-card__label">Children</p>
      <p class="statistic-card__number">12 👶</p>
    </div>
  </div>
  <div class="grid__item width-one-third">
    <div class="statistic-card">
      <p class="statistic-card__label">Seniors</p>
      <p class="statistic-card__number">5 👵</p>
    </div>
  </div>
</div>

Admin Application Card #

430 - Frida Fresh

frida@example.com
(555) 555-1212
San Francisco County
Source: google
Confirm #: 30001212
06/26/2017 12:22PM

Doc upload failed (edit case note)
<div class="admin-application-card">
  <div class="admin-application-card__top">
    <div class="admin-application-card__left">
      <h3>430 - Frida Fresh</h3>

      <div class="admin-application-card__data-group">
        <div class="admin-application-card__data">
          <div>frida@example.com</div>
          <div>(555) 555-1212</div>
          <div>San Francisco County</div>
        </div>

        <div class="admin-application-card__data text--small">
          <div>Source: google</div>
          <div>Confirm #: 30001212</div>
        </div>
      </div>
    </div>

    <div class="admin-application-card__right">
      <div>06/26/2017 12:22PM</div>
    </div>
  </div>

  <hr>

  <div>Doc upload failed (edit case note)</div>
</div>

Form Card 1 #

Let’s start with some basic information.

Make sure you answer this question.

<div class="form-card">
  <header class="form-card__header">
    <h1 class="form-card__title">Let’s start with some basic information.</h1>
  </header>
  <div class="form-card__content">
    <div class="form-group form-group--error">
      <label for="first_name" class="form-question">What's your first name?</label>
      <input type="text" class="text-input form-width--name" id="first_name" placeholder="First name">
      <p class="text--error"><i class="icon-warning"></i> Make sure you answer this question.</p>

    </div>
    <div class="form-group">
      <label for="last_name" class="form-question">What's your last name?</label>
      <input type="text" class="text-input form-width--name" id="last_name" placeholder="Last name">
    </div>
  </div>
  <div class="form-card__footer">
    <button class="button button--primary">Continue <i class="icon icon-arrow_forward"></i></button>
    <button class="button">Go back <i class="icon icon-replay"></i></button>
  </div>
</div>

Form Card 2 #

Success

Great! It looks like your household will likely qualify for CalFresh.

Household size

1

Last month's income

$1000

County

Marin

<div class="form-card form-card--transition">
  <div class="form-card__header">
    <div class="illustration illustration--success">Success</div>
    <h1 class="form-card__title">Great! It looks like your household will likely qualify for CalFresh.</h1>
  </div>
  <div class="form-card__content">
    <div class="summary-table">
      <div class="grid">
        <div class="grid__item width-one-third">
          <p class="summary-table__label">Household size</p>
          <p class="summary-table__value">1 <span class="icon icon-person"></span></p>
        </div>
        <div class="grid__item width-one-third">
          <p class="summary-table__label">Last month's income</p>
          <p class="summary-table__value">$1000</p>
        </div>
        <div class="grid__item width-one-third">
          <p class="summary-table__label">County</p>
          <p class="summary-table__value">Marin</p>
        </div>
      </div>
    </div>
  </div>
  <div class="form-card__footer">
    <button class="button button--primary">Continue <i class="icon icon-arrow_forward"></i></button>
    <button class="button">Go back <i class="icon icon-replay"></i></button>
  </div>
</div>

Form Card 3 #

We suggest that you submit a copy of your ID to your county now.

You can do this later but submitting your ID now may help to speed up the application process. If you've been asked to submit any other documents, you can also do so at this point.

<div class="form-card form-card--transition">
  <div class="form-card__header">
    <h1 class="form-card__title">We suggest that you submit a copy of your ID to your county now.</h1>
  </div>
  <div class="form-card__content">
    <p>You can do this later but submitting your ID now may help to speed up the application process. If you've been asked to submit any other documents, you can also do so at this point.</p>
  </div>
  <div class="form-card__footer">
    <button class="button button--primary">Submit ID now <i class="icon icon-arrow_forward"></i></button>
    <button class="button">I'll do it later</button>
  </div>
</div>

Form Card 4 #

Rachel Wood

Account information

Your organization

SF Marin Food Bank

Your email

rachel@sfmarinfoodbank.org

Your password

**********

Change password
<div class="form-card form-card--compact">
  <div class="form-card__header">
    <h1 class="form-card__title">Rachel Wood</h1>
    <h1 class="text--help">Account information</h1>
  </div>
  <div class="form-card__content">
    <div class="summary-table summary-table--left with-padding-med">
      <p class="summary-table__label">Your organization</p>
      <p class="summary-table__value">SF Marin Food Bank</p>
    </div>

    <div class="summary-table summary-table--left with-padding-med">
      <p class="summary-table__label">Your email</p>
      <p class="summary-table__value">rachel@sfmarinfoodbank.org</p>
    </div>

    <div class="summary-table summary-table--left">
      <p class="summary-table__label">Your password</p>
      <p class="summary-table__value">**********</p>
    </div>

    <a href="#" class="button button--small">Change password</a>
  </div>
  <div class="form-card__footer">
    <button class="button button--primary">Log out</button>
  </div>
</div>