Honeycrisp Design System

Honeycrisp is the official design system for products at Code for America. Use Honeycrisp for public facing products that require a welcoming and simple interface. For internal tools and products for workers, use Honeycrisp Compact.

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 # ◉

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.

Slab Layout

This is a magenta slab

HTML 
<section class="slab">
  <div class="grid">
    <div class="grid__item width-one-fourth">
      <h3>Slab Layout</h3>
    </div>
    <div class="grid__item width-three-fourths">
      <p>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.</p>
    </div>
  </div>
</section>

<section class="slab--magenta">
  <div class="grid">
    <div class="grid__item width-one-fourth">
      <h3>Slab Layout</h3>
    </div>
    <div class="grid__item width-three-fourths">
      <p>This is a magenta slab</p>
    </div>
  </div>
</section>

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.

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

Cards are used to highlight and focus content. In core app pages (e.g. pages of a form), the primary content should be inside a card. Secondary pages (e.g. the homepage, an FAQ page) don't need cards. Multiple cards can be used on one page, but consider if the content can be broken into multiple pages.

HTML 
<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 confirmations or successful actions.

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

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

Notices are a way to highlight important information by separating it from the main copy. Warning notices are good for temporary scenarios (e.g. 'Counties are receiving more applications than usual. Interview scheduling may be delayed.') Warning notices can be used outside the card for extra emphasis. Both types of notices are only effective if they're used sparingly.

HTML 
<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--success">
  <p>This is an example warning notice. It's a great way to highlight <strong>confirmations or successful actions</strong>.</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>

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

Colors # ◉

Brand Colors

#008060

teal

#EBFFFA

teal-light

#034E46

teal-dark

#A6005E

magenta

#FFEAF6

magenta-light

#66013A

magenta-dark

Greys

#F7F5F4

grey-light

#CFC5BF

grey

#5F5854

grey-dark

#121111

grey-darkest

System Colors

#EBFFEF

green-light

#00891B

green

#FCE3D9

red-light

#D13F00

red

#FFF2D1

yellow-light

#FFAE00

yellow

#C2850C

gold

HTML 
<h4>Brand Colors</h4>
<div class="color color--teal">
  <p>#008060</p>
  <p>teal</p>
</div>
<div class="color color--teal-light">
  <p>#EBFFFA</p>
  <p>teal-light</p>
</div>
<div class="color color--teal-dark">
  <p>#034E46</p>
  <p>teal-dark</p>
</div>
<div class="color color--magenta">
  <p>#A6005E</p>
  <p>magenta</p>
</div>
<div class="color color--magenta-light">
  <p>#FFEAF6</p>
  <p>magenta-light</p>
</div>
<div class="color color--magenta-dark">
  <p>#66013A</p>
  <p>magenta-dark</p>
</div>

<h4>Greys</h4>
<div class="color color--grey-light">
  <p>#F7F5F4</p>
  <p>grey-light</p>
</div>
<div class="color color--grey">
  <p>#CFC5BF</p>
  <p>grey</p>
</div>
<div class="color color--grey-dark">
  <p>#5F5854</p>
  <p>grey-dark</p>
</div>
<div class="color color--grey-darkest">
  <p>#121111</p>
  <p>grey-darkest</p>
</div>

<h4>System Colors</h4>
<div class="color color--green-light">
  <p>#EBFFEF</p>
  <p>green-light</p>
</div>
<div class="color color--green">
  <p>#00891B</p>
  <p>green</p>
</div>
<div class="color color--red-light">
  <p>#FCE3D9</p>
  <p>red-light</p>
</div>
<div class="color color--red">
  <p>#D13F00</p>
  <p>red</p>
</div>
<div class="color color--yellow-light">
  <p>#FFF2D1</p>
  <p>yellow-light</p>
</div>
<div class="color color--yellow">
  <p>#FFAE00</p>
  <p>yellow</p>
</div>
<div class="color color--gold">
  <p>#C2850C</p>
  <p>gold</p>
</div>

Icons # ◉

Icons referenced by ligature
face backup
Icons referenced by codepoint

Icons help users find and understand actions, like “upload” or “search”. In general, they should be used as a secondary visual indicator, in conjunction with text or color. Use common patterns, but don't assume they will be familiar.

Note: These are Google Material icons. The full material icon font is included; however, only a subset of the icons have a convenience class defined as shown in the example. For icons without a convenience class, you can reference them directly using a ligature or character codepoint.

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

<div class="h4">Icons referenced by ligature</div>
<i class="icon-">face</i>
<i class="icon-">backup</i>

<div class="h4">Icons referenced by codepoint</div>
<i class="icon-">&#xE87C;</i>
<i class="icon-">&#xE864;</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
  • Checkmark list item 1
  • Checkmark list item 2
  • Checkmark list item 3
  • Crossmark list item 1
  • Crossmark list item 2
  • Crossmark list item 3

Basic HTML headings include type styles. However, each type style also has dedicated class name. You can always use the dedicated class name to override any default styling (e.g., you can style an <h1> as a heading level 2 with '.heading-35'.)

HTML 
<h1 class="heading-60">Heading Level 1</h1>
<p class="text-25">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 class="heading-35">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 class="heading-25">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 class="heading-25-small">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>

<ul class="list--checkmark">
  <li>Checkmark list item 1</li>
  <li>Checkmark list item 2</li>
  <li>Checkmark list item 3</li>
</ul>

<ul class="list--crossmark">
  <li>Crossmark list item 1</li>
  <li>Crossmark list item 2</li>
  <li>Crossmark list item 3</li>
</ul>

Spacing # ◉

no margin below
5px margin below
10px margin below
15px margin below
25px margin below
35px margin below
60px margin below
95px margin below
155px margin below
250px margin below
no margin above
5px margin above
10px margin above
15px margin above
25px margin above
35px margin above
60px margin above
95px margin above
155px margin above
250px margin above
HTML 
<div class="grid">
  <div class="grid__item width-one-half">
    <div class="box-wrapper">
      <div class="spacing-below-0">
        <div class="notice">no margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-5">
        <div class="notice">5px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-10">
        <div class="notice">10px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-15">
        <div class="notice">15px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-25">
        <div class="notice">25px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-35">
        <div class="notice">35px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-60">
        <div class="notice">60px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-95">
        <div class="notice">95px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-155">
        <div class="notice">155px margin below</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-below-250">
        <div class="notice">250px margin below</div>
      </div>
    </div>
  </div>

  <div class="grid__item width-one-half">
    <div class="box-wrapper">
      <div class="spacing-above-0">
        <div class="notice">no margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-5">
        <div class="notice">5px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-10">
        <div class="notice">10px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-15">
        <div class="notice">15px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-25">
        <div class="notice">25px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-35">
        <div class="notice">35px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-60">
        <div class="notice">60px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-95">
        <div class="notice">95px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-155">
        <div class="notice">155px margin above</div>
      </div>
    </div>
    <div class="box-wrapper">
      <div class="spacing-above-250">
        <div class="notice">250px margin above</div>
      </div>
    </div>
  </div>
</div>

Labels # ◉

Beta Featured New Green In Progress Error

HTML ERB 
<p>
  
<span class="label ">Beta</span>
  
<span class="label label--magenta">Featured</span>
  
<span class="label label--teal">New</span>
  
<span class="label label--green">Green</span>
  
<span class="label label--yellow">In Progress</span>
  
<span class="label label--red">Error</span>
</p>
<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: 'green' %>
  <%= render 'components/atoms/label', text: 'In Progress', variant: 'yellow' %>
  <%= render 'components/atoms/label', text: 'Error', variant: 'red' %>
</p>

Buttons # ◉

Small
Standard
Buttons as links
Links as buttons
Linked Images (Link with Background Image)

The teal primary is your default button. White buttons are for secondary actions.

Danger buttons tell users to pause and make sure they’re certain of the action they’re about to take. It can be a way to signal that an action is discouraged (e.g. submitting a minimal application in GCF) , or irreversible (e.g. deleting a client in ClientComm).

Disabled buttons are placeholders for actions that can’t be taken at the moment. Use these rather than hiding the button if you want to show that the action exits, or if your layout requires it. Disabled buttons have a corresponding cursor state.

When using the button styled like a link, don’t use the "button" class.

For linked images, make sure to include the 'illustration' class to ensure the proper focus offset.

HTML ERB 
<div class="h4">Small</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--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>
  <button class="button">Button with icon <i class="button__icon icon-arrow_forward"></i></button>
  <button class="button"><i class="button__icon--left icon-arrow_back"></i> Button with icon</button>
</div>

<div class="h4">Buttons as links</div>
<div>
  <button class="button--link">A button styled to look like a link</button>
</div>

<div class="h4">Links as buttons</div>
<div>
  <a class="button" href="#">Link as button</a>
  <a class="button button--primary" href="#">Link as primary button</a>
</div>
<div>
  <a class="button" href="#">
    <i class="button__icon--left icon-arrow_back"></i> Button with icon
</a>  <a class="button button--danger" href="#">Danger Button</a>
</div>
<div class="h4">Linked Images (Link with Background Image)</div>
<div>
  <a href="https://getcalfresh.org" class="illustration illustration--gcf-logo">GetCalFresh</a>
</div>
<div class="h4">Small</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--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>
  <button class="button">Button with icon <i class="button__icon icon-arrow_forward"></i></button>
  <button class="button"><i class="button__icon--left icon-arrow_back"></i> Button with icon</button>
</div>

<div class="h4">Buttons as links</div>
<div>
  <button class="button--link">A button styled to look like a link</button>
</div>

<div class="h4">Links as buttons</div>
<div>
  <%= link_to 'Link as button', '#', class: 'button' %>
  <%= link_to 'Link as primary button', '#', class: 'button button--primary' %>
</div>
<div>
  <%= link_to '#', class: 'button' do %>
    <i class="button__icon--left icon-arrow_back"></i> Button with icon
  <% end %>
  <%= link_to '#', class: 'button button--danger' do %>Danger Button<% end %>
</div>
<div class="h4">Linked Images (Link with Background Image)</div>
<div>
  <a href="https://getcalfresh.org" class="illustration illustration--gcf-logo">GetCalFresh</a>
</div>

Skip link # ◉

Click here and then pres TAB

Adding the id of `skip-to-content` will hide the link until it has focus. This should be the first focusable item on your page. For more information visit a11y 101.

HTML 
<div class="h4">Click here and then pres <kbd>TAB</kbd></div>
<div>
  <a href="#content" id="skip-to-content" class="button button--small">Skip to content</a>
</div>

Form Elements # ◉

Text input fields

Masked (auto-formatted) text input fields

Other input types

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.

HTML 
<form action="POST">
  <h3>Text input fields</h3>

  <div class="form-group">
    <label class="form-question" for="apple_comment">What would you like to tell us about apples?</label>
    <input type="text" class="text-input" name="apple_comment" id="apple_comment">
  </div>

  <div class="form-group">
    <label class="form-question" for="favorite_apples">What are your favorite apples?</label>
    <input type="text" class="text-input form-width--long" name="favorite_apples" id="favorite_apples">
  </div>

  <div class="form-group">
    <label class="form-question" for="them_apples">How about them apples?</label>
    <input type="text" class="text-input form-width--med" name="them_apples" id="them_apples">
  </div>

  <div class="form-group">
    <label class="form-question" for="apple_word">What is one word to describe an apple?</label>
    <input type="text" class="text-input form-width--short" name="apple_word" id="apple_word">
  </div>

  <div class="form-group">
    <label class="form-question" for="name">What is your name?</label>
    <input type="text" class="text-input form-width--name" name="name" id="name">
  </div>

  <div class="form-group">
    <label class="form-question" for="zip">What is your ZIP code?</label>
    <input type="text" class="text-input form-width--zip" name="zip" id="zip">
  </div>

  <h3>Masked (auto-formatted) text input fields</h3>

  <div class="form-group">
    <label class="form-question" for="phone">What is your phone number?</label>
    <input type="tel" class="text-input form-width--phone phone-input" name="phone" id="phone">
  </div>


  <div class="form-group">
    <label class="form-question" for="ssn">What is your Social Security Number?</label>
    <input type="tel" class="text-input form-width--ssn ssn-input" name="ssn" id="ssn">
  </div>

  <h3>Other input types</h3>

  <div class="form-group">
    <label for="example_radio" class="radio-button">
      <input type="radio" name="example_radio" id="example_radio">
      Example radio button
    </label>
  </div>

  <div class="form-group">
    <label for="example_checkbox" class="checkbox">
      <input type="checkbox" name="example_checkbox" id="example_checkbox">
      Example checkbox
    </label>
  </div>

  <div class="form-group">
    <label for="apple_quality" class="form-question">What's your favorite apple quality?</label>
    <div class="select">
      <select class="select__element" name="apple_quality" id="apple_quality">
        <option selected disabled>Choose a selection</option>
        <option value="crisp">Crisp</option>
        <option value="sweet">Sweet</option>
        <option value="tart">Tart</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="apple_story" class="form-question">Can you tell us about the last time you ate an apple?</label>
    <textarea name="apple_story" id="apple_story" class="textarea" id="" cols="30" rows="10"></textarea>
  </div>

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

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.

HTML ERB 
<!--  Media box -->
<div class="media-box">
  <div class="media-box__media media--icon">
    <img src="/assets/calfresh_logo-955284b1aeb8db7d733b930a062910210fdc51a1bad6f6dfaad6d1032f10dae4.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="/assets/calfresh_logo-955284b1aeb8db7d733b930a062910210fdc51a1bad6f6dfaad6d1032f10dae4.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>
<!--  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
Link One Link Two Link Three
Logo for Product
Link Link
HTML 
<!-- Wrap the right links below the logo when screen is too small -->
<div class="toolbar toolbar--wrap-when-small">
  <a href="#content" id="skip-to-content" class="button button--small">Skip to content</a>
  <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 # ◉

Clients Analytics Team
HTML 
<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.

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

Progress indicator # ◉

50% complete

The progress indicator shows the user how much of a flow they have completed. It helps set time expectations, as well as giving a sense of progress. Use this if you have a flow of more than a few pages, or when users won’t be able to guess how long a flow is.

The indicator may be used alone, or in conjunction with the step bar. The indicator is the more granular of the two, ticking forward on an individual page basis.

HTML ERB 
<div class="progress-indicator">
  <div class="progress-indicator__bar" style="width:50%"></div>
  <div class="progress-indicator__percentage">50% complete</div>
</div>
<%= render 'components/molecules/progress_indicator', percent: 50 %>

Progress step bar # ◉

Step 3 of 5: Basic Info

The step bar shows users which steps they have completed, and what’s coming up. It serves a similar purpose to the progress indicator, but it deals with sections rather than individual pages. Use this if your flow has defined steps or sections. It helps users mentally prepare for the section they’re about to start.

HTML ERB 
<!--
  A progress bar without a text label

  Required: `current_step`, `step_count` as integers
-->


<div class="progress-step-bar">
  <div class="progress-step-bar__bar" aria-labelledby="progress-step-bar--2-5-label">
        <div class="progress-step-bar__step progress-step-bar__step--completed"></div>
        <div class="progress-step-bar__step progress-step-bar__step--current"></div>
        <div class="progress-step-bar__step"></div>
        <div class="progress-step-bar__step"></div>
        <div class="progress-step-bar__step"></div>
  </div>

  <div class="progress-step-bar__label sr-only" id="progress-step-bar--2-5-label">
    
  </div>
</div>



<!--
  A progress bar with a text label

  Required: `current_step`, `step_count` as integers; `step_description` (used to generate text label)
-->


<div class="progress-step-bar">
  <div class="progress-step-bar__bar" aria-labelledby="progress-step-bar--3-5-label">
        <div class="progress-step-bar__step progress-step-bar__step--completed"></div>
        <div class="progress-step-bar__step progress-step-bar__step--completed"></div>
        <div class="progress-step-bar__step progress-step-bar__step--current"></div>
        <div class="progress-step-bar__step"></div>
        <div class="progress-step-bar__step"></div>
  </div>

  <div class="progress-step-bar__label " id="progress-step-bar--3-5-label">
    Step 3 of 5: Basic Info
  </div>
</div>
<!--
  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 # ◉

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
HTML ERB 
<div class="reveal">
  <button class="reveal__button" aria-expanded="true">Learn more about student eligibility</button>
  <div class="reveal__content">
    
  <p>In order to qualify as a college student, you have to meet one of the following exemptions:</p>
  <ul class="list--bulleted">
    <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>

  </div>
</div>
<%= 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">
    <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 %>

Accordion # ◉

An accordion element allows the user to expand and hide content on a page. Multiple accordions are usually used in tandem. It is useful to break up long pages for easy scannability.

These documents are usually required to get CalFresh:

  • A copy of your ID
  • Proof of any income from the last 30 days
  • Proof of student status (for college students)

Immigrants may also be asked to provide proof of status to get benefits:

  • Copy of your green card (both sides)
  • A copy of your most recent paperwork for a U Visa, T Visa, Asylum, Refugee or Parolee status, or VAWA petition
  • Naturalized US Citizens may be asked to provide a copy of their US passport or naturalization papers
  • Important: If you are only applying for other people in your household, you don’t have to provide proof of immigration status.

These documents are optional but can increase your benefit amount:

  • Proof of housing expenses
  • Proof of child support paid
  • Proof of child/dependent care paid
  • If you are 60+ or disabled, proof of medical expenses

What if I can’t get the proof?

Tell your case worker during your CalFresh applicant interview. CalFresh will generally accept a sworn statement as a last resort if you cannot get the documents needed.

HTML 
<div class="accordion">
	<button href="#" class="accordion__button" aria-expanded="true" aria-controls="a1">What is an accordion used for?</button>
	<div class="accordion__content" id="a1">
		<p>An accordion element allows the user to expand and hide content on a page. Multiple accordions are usually used in tandem. It is useful to break up long pages for easy scannability.</p>
	</div>
</div>
<div class="accordion">
	<button href="#" class="accordion__button" aria-expanded="true" aria-controls="a2">What documents will I need to provide to get CalFresh?</button>
	<div class="accordion__content" id="a2">
		<p><b>These documents are usually required to get CalFresh:</b></p>
		<ul class="list--bulleted">
			<li>A copy of your ID</li>
			<li>Proof of any income from the last 30 days</li>
			<li>Proof of student status (for college students)</li>
		</ul>

		<p><b>Immigrants may also be asked to provide proof of status to get benefits:</b></p>
		<ul class="list--bulleted">
			<li>Copy of your green card (both sides)</li>
			<li>A copy of your most recent paperwork for a U Visa, T Visa, Asylum, Refugee or Parolee status, or VAWA petition</li>
			<li>Naturalized US Citizens may be asked to provide a copy of their US passport or naturalization papers</li>
			<li>Important: If you are only applying for other people in your household, you don’t have to provide proof of immigration status. </li>
		</ul>
		

		<p><b>These documents are optional but can increase your benefit amount:</b></p>
		<ul class="list--bulleted">
			<li>Proof of housing expenses</li>
			<li>Proof of child support paid</li>
			<li>Proof of child/dependent care paid</li>
			<li>If you are 60+ or disabled, proof of medical expenses</li>
		</ul>
		
		<p><b>What if I can’t get the proof?</b></p>
		<p>Tell your case worker during your CalFresh applicant interview. CalFresh will generally accept a sworn statement as a last resort if you cannot get the documents needed.</p>
	</div>
</div>

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
HTML ERB 
<div class="show-more show-more--long with-padding-large">
  <button class="show-more__button" aria-hidden="true">Read more</button>
  <div class="show-more__content">
    
  <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>

  </div>
</div>
<%= 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

HTML 
<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
HTML 
<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 # ◉

HTML 
<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
lbs
http://
HTML 
<div class="text-input-group spacing-below-15">
  <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>

<div class="text-input-group spacing-below-15">
  <input type="text" class="text-input" placeholder="Text input with post label" name="example_text">
  <div class="text-input-group__postfix">lbs</div>
</div>

<div class="text-input-group">
  <div class="text-input-group__prefix ">http://</div>
  <input type="text" class="text-input" placeholder="Text input with pre label" name="example_text">
</div>

Incrementer # ◉

- +
HTML 
<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 # ◉

HTML 
<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 # ◉

HTML 
<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 # ◉

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

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

HTML 
<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 # ◉

Did you have a CalFresh interview?

Answering no will trigger a follow-up question.

What are your favorite colors?

Selecting 'Other' will trigger a follow-up question.

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 #). Note: Only one follow-up question can be supplied for a checkbox set and it will look best if the last checkbox is the one that triggers it.

HTML 
<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">
        <legend class="form-question">
          Did you have a CalFresh interview?
        </legend>
        <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">
        <legend class="form-question">Do you know why?</legend>
        <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 list -->
  <div class="question-with-follow-up">
    <div class="question-with-follow-up__question">
      <fieldset class="input-group form-group">
        <legend class="form-question ">
          What are your favorite colors?
        </legend>
        <p class="text--help">Selecting 'Other' will trigger a follow-up question.</p>

        <label class="checkbox">
          <input type="checkbox" value="blue" name="form[example_blue]" id="form_example_blue" /> Blue
        </label>
        <label class="checkbox">
          <input type="checkbox" value="green" name="form[example_green]" id="form_example_green" /> Green
        </label>
        <label class="checkbox">
          <input data-follow-up="#color_survey-follow-up" type="checkbox" value="other" name="form[example_other]" id="form_example_other">
          Other
        </label>
      </fieldset>
    </div>
    <div class="question-with-follow-up__follow-up" id="color_survey-follow-up">
      <div class="form-group">
        <label for="color_survey_other_color">
          <p class="form-question">Please specify</p>
        </label>
        <input type="text" class="text-input" name="color_survey_other_color" id="color_survey_other_color">
      </div>
    </div>
  </div>
</form>

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 # ◉

HTML 
<div class="pagination">
  <div class="pagination__info">
    <p class="text--help">Displaying 1-20 of 344 applicants</p>
  </div>
  <nav class="pagination__buttons">
    <a class="button button--small" aria-label="Go back one page"><i class="icon icon-keyboard_arrow_left"></i></a>
    <a class="button button--small" aria-label="Page 1">1</a>
    <a class="button button--small pagination__selected" aria-label="Page 2 selected">2</a>
    <a class="button button--small" aria-label="Page 3">3</a>
    <span class="pagination__ellipsis">&hellip;</span>
    <a class="button button--small" aria-label="Page 6">6</a>
    <a class="button button--small" aria-label="Go forward one page"><i class="icon icon-keyboard_arrow_right"></i></a>
  </nav>
</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.

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

HTML 
<div class="form-card form-card--transition">
  <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 👵

HTML 
<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)
HTML 
<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.

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

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

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