DAHLIA Pattern Library

Form Card 

<section class="row margin-bottom--2x">
    <div class="medium-10 medium-centered columns">
        <form class="form-card margin-bottom--2x">
            <div class="row">
                <div class="medium-6 columns padding-left--2x padding-top padding-bottom">
                    <header class="margin-bottom">
                        <h3 class="t-serif gamma">Household Size</h3>
                        <p class="c-steel">Household is defined as anyone living with you in the residence, including spouse, roommates, parents and children.</p>
                    </header>

                    <div class="form-group">
                        <label class="form-label sr-only" for="people">Household Size</label>

                        <label for="people" class="sr-only">Label</label>
                        <select name="people" id="people" class="" data-width="auto">
              <option value="">Enter number of people</option>
                <option value="1">Option 1</option>
            	<option value="2">Option 2</option>
            	<option value="3">Option 3</option>
            	<option value="4">Option 4</option>
            	<option value="5">Option 5</option>
            	<option value="6">Option 6</option>
            </select> </div>

                    <div class="form-group padding-bottom--half">
                        <div class="checkbox">
                            <input id="peach-pie" type="checkbox" name="peach-pie" tab-index="1" />
                            <label for="peach-pie">Yes, this includes children under 6</label>
                            <input id="pear-pie" type="checkbox" name="pear-pie" tab-index="2" />
                            <label for="pear-pie">Yes, this includes children under 6</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label sr-only" for="children">Children</label>
                        <label for="children" class="sr-only">Label</label>
                        <select name="children" id="children" class="" data-width="auto">
              <option value="">How many children?</option>
                <option value="1">Option 1</option>
            	<option value="2">Option 2</option>
            	<option value="3">Option 3</option>
            	<option value="4">Option 4</option>
            	<option value="5">Option 5</option>
            	<option value="6">Option 6</option>
            </select> </div>

                </div>

                <div class="medium-6 columns padding-right--2x padding-top padding-bottom">

                    <header class="margin-bottom">
                        <h3 class="t-serif gamma">Household Pre-Tax Income</h3>
                        <p class="c-steel">Next add up your gross (pre-tax) household income from wages, benefits and other sources from household members.</p>
                    </header>

                    <div class="form-group">
                        <div class="form-income">
                            <label aria-label="Income" for="income" class="sr-only">Income</label>
                            <input id="income" name="income" type="text" class="form-income_input " placeholder="Total all of your income sources" />
                            <span class="label-dollar">$</span>
                        </div>
                    </div>

                    <div class="radio-group-inline ">
                    </div>
                </div>
            </div>

        </form>

        <div class="button-stack--paginate row">
            <div class="small-12 medium-6 medium-push-6 columns">
                <button class="button right primary expand-small">View Matching Properties</button>
            </div>
            <div class="small-12 medium-6 medium-pull-6 columns">
                <button class="button button-link button-lined small-text-center expand-small">Reset Filters</button>
            </div>
        </div>

        <div class="note text-center bg-vapor padding margin-top">
            <p class="t-small no-margin">If you need help calculating your total, please use this tool:
                <button class="button-link t-small">Household Income Calculator</button></p>
        </div>
    </div>
</section>
 
<section class="row margin-bottom--2x">
  <div class="medium-10 medium-centered columns">
    <form class="form-card margin-bottom--2x">
      <div class="row">
        <div class="medium-6 columns padding-left--2x padding-top padding-bottom">
          <header class="margin-bottom">
            <h3 class="t-serif gamma">Household Size</h3>
            <p class="c-steel">Household is defined as anyone living with you in the residence, including spouse, roommates, parents and children.</p>
          </header>

          <div class="form-group">
            <label class="form-label sr-only" for="people">Household Size</label>

            {{> @select name="people" placeholder="Enter number of people" options=inputs.people }}
          </div>

          <div class="form-group padding-bottom--half">
            {{> @checkbox text="Yes, this includes children under 6"}}
          </div>

          <div class="form-group">
            <label class="form-label sr-only" for="children">Children</label>
            {{> @select name="children" placeholder="How many children?" options=inputs.children }}
          </div>

        </div>

        <div class="medium-6 columns padding-right--2x padding-top padding-bottom">

          <header class="margin-bottom">
            <h3 class="t-serif gamma">Household Pre-Tax Income</h3>
            <p class="c-steel">Next add up your gross (pre-tax) household income from wages, benefits and other sources from household members.</p>
          </header>

          <div class="form-group">
            {{> @input-income }}
          </div>

          {{> @radio-group--inline }}
        </div>
      </div>

    </form>

    {{> @button-stack--paginate left="Reset Filters" l-classes="button-link button-lined small-text-center expand-small" right="View Matching Properties" r-classes="right primary expand-small"}}

    <div class="note text-center bg-vapor padding margin-top">
      <p class="t-small no-margin">If you need help calculating your total, please use this tool:
      <button class="button-link t-small">Household Income Calculator</button></p>
    </div>
  </div>
</section>
 
{
  "tables": {
    "minimum": {
      "units": [
        {
          "type": "Studio",
          "income": "2,347",
          "rent": 939
        },
        {
          "type": "1 Bedroom",
          "income": "2,685",
          "rent": "1,074"
        },
        {
          "type": "2 Bedroom",
          "income": "2,998",
          "rent": "1,199"
        }
      ]
    },
    "minimum-range": {
      "units": [
        {
          "type": "Studio",
          "income-low": "$1,347",
          "income-high": "$1,678",
          "rent-low": "$639",
          "rent-high": "$839"
        },
        {
          "type": "1 BR",
          "income-low": "$1,518",
          "income-high": "$1,958",
          "rent-low": "$759",
          "rent-high": "$979"
        },
        {
          "type": "2 BR",
          "income-low": "$2,185",
          "income-high": "$2,685",
          "rent-low": "$939",
          "rent-high": "$1,250"
        }
      ]
    },
    "minimum-sale": {
      "units": [
        {
          "type": "Studio",
          "parking": "no parking",
          "price": "$223,548",
          "hoa": "$637.15"
        },
        {
          "type": "1 BR",
          "parking": "with parking",
          "price": "$256,721",
          "hoa": "$625.46"
        }
      ]
    },
    "minimum-sro": {
      "units": [
        {
          "type": "SRO",
          "income": "1,347",
          "rent": 639
        }
      ]
    },
    "percent": {
      "units": [
        {
          "type": "Studio",
          "income": "<em>none</em>",
          "rent": "30% income"
        },
        {
          "type": "1 Bedroom",
          "income": "<em>none</em>",
          "rent": "30% income"
        }
      ]
    },
    "maximum": {
      "households": [
        {
          "size": 1,
          "month": "3,245",
          "year": "38,950"
        },
        {
          "size": 2,
          "month": "3,708",
          "year": "44,500"
        },
        {
          "size": 3,
          "month": "4,204",
          "year": "50,450"
        },
        {
          "size": 4,
          "month": "4,670",
          "year": "56,050"
        },
        {
          "size": 5,
          "month": "5,045",
          "year": "60,550"
        },
        {
          "size": 6,
          "month": "5,416",
          "year": "65,000"
        }
      ]
    },
    "maximum-ami": {
      "households": [
        {
          "size": 1,
          "month": "30,245",
          "year": "38,950"
        },
        {
          "size": 2,
          "month": "30,708",
          "year": "44,500"
        },
        {
          "size": 3,
          "month": "40,204",
          "year": "50,450"
        },
        {
          "size": 4,
          "month": "40,670",
          "year": "56,050"
        },
        {
          "size": 5,
          "month": "50,045",
          "year": "60,550"
        },
        {
          "size": 6,
          "month": "50,416",
          "year": "65,000"
        }
      ]
    },
    "minimum-flex": [
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "1 <small>unit</small>"
      },
      {
        "type": "1 Bedroom",
        "income": "$2,685<small>/month</small>",
        "rent": "$1,074<small>/month</small>",
        "availability": "2 <small>units</small>"
      },
      {
        "type": "2 Bedroom",
        "income": "$2,998<small>/month</small>",
        "rent": "$1,199<small>/month</small>",
        "availability": "9 <small>units</small>"
      }
    ],
    "minimum-flex-reserved": [
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true,
        "icon": "star"
      },
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "<em>waitlist</em>",
        "reserved": true,
        "icon": "star"
      },
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true
      },
      {
        "type": "Studio",
        "income": "$1,957<small>/month</small>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true
      },
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "1 <small>unit</small>"
      },
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "<em>waitlist</em>"
      },
      {
        "type": "1 Bedroom",
        "income": "$2,685<small>/month</small>",
        "rent": "30%<small> income</small>",
        "availability": "2 <small>units</small>",
        "reserved": true
      }
    ],
    "occupancy": {
      "units": [
        {
          "type": "Studio",
          "occupancy": "1-2"
        },
        {
          "type": "1 Bedroom",
          "occupancy": "1-3"
        },
        {
          "type": "2 Bedroom",
          "occupancy": "2-4"
        },
        {
          "type": "3 Bedroom",
          "occupancy": "3-6"
        }
      ]
    },
    "pricing-rent": [
      {
        "ami": "40%",
        "list": [
          {
            "type": "Studio",
            "units": [
              {
                "income": "$2,112",
                "rent": "$1,056",
                "availability": 1,
                "reserved": true
              },
              {
                "income": "$2,312",
                "rent": "$1,250",
                "availability": 4,
                "reserved": true
              }
            ]
          },
          {
            "type": "1 BR",
            "units": [
              {
                "income": "$2,514",
                "rent": "$1,257",
                "waitlist": true
              },
              {
                "income": "$2,712",
                "rent": "$1,750",
                "availability": 4
              }
            ]
          }
        ]
      },
      {
        "ami": "50%",
        "list": [
          {
            "type": "Studio",
            "units": [
              {
                "income": "$2,000",
                "rent": "$1,000",
                "availability": 28
              }
            ]
          },
          {
            "type": "1 BR",
            "units": [
              {
                "income": "$2,280",
                "rent": "$1,140",
                "availability": 26
              }
            ]
          },
          {
            "type": "2 BR",
            "units": [
              {
                "income": "$2,540",
                "rent": "$1,270",
                "availability": 1
              }
            ]
          }
        ]
      }
    ],
    "pricing-sale": [
      {
        "ami": "40%",
        "list": [
          {
            "type": "1 BR",
            "units": [
              {
                "price-no-parking": "$183,142",
                "hoa-no-parking": "$637",
                "availability": 2,
                "lease": "$637"
              },
              {
                "price-no-parking": "$185,309",
                "hoa-no-parking": "$625",
                "availability": 12,
                "lease": "$637"
              }
            ]
          },
          {
            "type": "2 BR",
            "units": [
              {
                "price-no-parking": "$254,562",
                "hoa-no-parking": "$723",
                "availability": 2,
                "lease": "$637"
              },
              {
                "price-no-parking": "$259,625",
                "hoa-no-parking": "$695",
                "availability": 5,
                "lease": "$637"
              }
            ]
          },
          {
            "type": "3 BR",
            "units": [
              {
                "price-no-parking": "$287,637",
                "hoa-no-parking": "$782",
                "availability": 5,
                "lease": "$637"
              }
            ]
          }
        ]
      }
    ],
    "pricing-sro": [
      {
        "type": "SRO",
        "income": "$1,356",
        "rent": "$678",
        "availability": 12
      }
    ],
    "priority": {
      "units": [
        {
          "type": "Served in US Military",
          "occupancy": 2
        },
        {
          "type": "Person with Mobility Impairment",
          "occupancy": 3
        },
        {
          "type": "Person with Developmental Disability",
          "occupancy": 4
        }
      ]
    },
    "features": {
      "studio": {
        "units": [
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          }
        ]
      },
      "1br": {
        "units": [
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          }
        ]
      }
    },
    "feature-summary": {
      "types": [
        {
          "type": "Studio",
          "units": "1 Unit",
          "area": "639&ndash;900",
          "acccessibilty": "Accessible units"
        },
        {
          "type": "1 Bedroom",
          "units": "6 Units",
          "area": "639&ndash;900",
          "acccessibilty": "Accessible units"
        }
      ]
    },
    "fees": {
      "types": [
        {
          "type": "Application Fee",
          "amount": "$40",
          "note": "per applicant age 18 and over, due post lottery"
        },
        {
          "type": "Deposit",
          "amount": "$500 - 941",
          "note": "or one month's rent, may be higher for lower credit scores"
        },
        {
          "type": "Rental Late Fee",
          "amount": "$50",
          "note": "after the 6th business day, rent due first of the month"
        },
        {
          "type": "Returned Check Fee",
          "amount": "$35",
          "note": "due in event of insufficient funds"
        },
        {
          "type": "Pet Rent",
          "amount": "$65",
          "note": "monthly per pet"
        },
        {
          "type": "Pet Deposit",
          "amount": "$500",
          "note": "per pet, refundable"
        },
        {
          "type": "Storage Unit Fee",
          "amount": "$75",
          "note": "per month, optional"
        },
        {
          "type": "Bike Room Fee",
          "amount": "$15",
          "note": "per month, optional"
        },
        {
          "type": "Replacement Fobs",
          "amount": "$50",
          "note": "for each replacement"
        },
        {
          "type": "Replacement Remotes",
          "amount": "$50",
          "note": "for each replacement"
        },
        {
          "type": "Utilities",
          "note": "The building pays water, sewer and trash only. Tenants are responsible for all other utilities"
        }
      ]
    },
    "preferences": {
      "leaseup": [
        {
          "icon": "check",
          "icon-fill": "success",
          "name": "Displaced Tenant Housing Preference",
          "person": "Jason Holmes",
          "rank": 12,
          "proof": null,
          "status": "Confirmed",
          "action": null
        },
        {
          "icon": "close",
          "icon-fill": "alert",
          "name": "Neighborhood Resident Housing Preference",
          "person": "Jason Holmes",
          "rank": 25,
          "proof": "<a href='#'>Cable Bill</a>",
          "status": "Invalid",
          "action": "<a href='#' class='action-link' style='display: none'>Edit</a>",
          "editable": "editable"
        },
        {
          "icon": null,
          "name": "Live or Work Housing Preference",
          "person": "Jason Holmes",
          "rank": 112,
          "proof": "<a href='#'>Cable Bill</a>",
          "status": "Unconfirmed",
          "action": "<a href='#' class='action-link margin-bottom--half'>Confirm</a><br> <a href='#' class='action-link c-alert'>Remove</a>"
        }
      ]
    },
    "applicants": [
      {
        "preference": "COP 1",
        "application": "APP-111-2223",
        "first": "Anne",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Status",
        "row_status": null,
        "button_status": "tertiary"
      },
      {
        "preference": "COP 2",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Processing",
        "row_status": "is-processing",
        "button_status": "is-processing"
      },
      {
        "preference": "COP 3",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Disqualified",
        "row_status": "is-disqualified",
        "button_status": "is-disqualified"
      },
      {
        "preference": "COP 4",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Approved",
        "row_status": "is-approved",
        "button_status": "is-approved"
      },
      {
        "preference": "COP 5",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Waitlisted",
        "row_status": "is-waitlisted",
        "button_status": "is-waitlisted"
      },
      {
        "preference": "COP 6",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Appealed",
        "row_status": "is-appealed",
        "button_status": "is-appealed"
      },
      {
        "preference": "COP 7",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Withdrawn",
        "row_status": "is-withdrawn",
        "button_status": "is-withdrawn"
      },
      {
        "preference": "COP 8",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Lease Signed",
        "invalid_status": "is-invalid",
        "row_status": "is-leased",
        "button_status": "is-leased"
      },
      {
        "preference": "COP 9",
        "application": "APP-111-2223",
        "first": "Anne",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Processing",
        "invalid_status": "is-invalid",
        "row_status": "is-processing",
        "button_status": "is-processing"
      }
    ]
  },
  "inputs": {
    "yesno": [
      {
        "name": "Yes",
        "value": "yes"
      },
      {
        "name": "No",
        "value": "no"
      }
    ],
    "preferences": [
      {
        "name": "Displaced Tenants Preference",
        "note": "Primarily households displaced by Ellis Act evictions as defined by The Ellis Act Displacement Emergency Assistance Ordinance passed into law on December 18, 2013. (Formerly Ellis Act Preference)",
        "value": "displaced"
      },
      {
        "name": "Certificate of Preference",
        "note": "Primarily households displaced by Agency action in Redevelopment Project Areas during the 1960’s and 1970's, but may also include other persons displaced by Agency action.",
        "value": "cop"
      }
    ]
  },
  "menus": {
    "lang": [
      {
        "name": "English",
        "active": true,
        "url": "application-expect.html",
        "selected": true,
        "index": null,
        "id": "panel1"
      },
      {
        "name": "Español",
        "url": "application-expect--es.html",
        "selected": null,
        "index": -1,
        "id": "panel2"
      },
      {
        "name": "中文",
        "chinese": true,
        "url": "application-expect--zh.html",
        "selected": null,
        "index": -1,
        "id": "panel3"
      },
      {
        "name": "Filipino",
        "url": "#",
        "selected": null,
        "index": -1,
        "id": "panel4"
      }
    ],
    "mobile": [
      {
        "name": "Browse Properties",
        "icon": "browse"
      },
      {
        "name": "Get Assistance",
        "icon": "assistance"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "shortform": [
      {
        "name": "You",
        "active": true
      },
      {
        "name": "Household",
        "disabled": true
      },
      {
        "name": "Preferences",
        "disabled": true
      },
      {
        "name": "Income",
        "disabled": true
      },
      {
        "name": "Review",
        "disabled": true
      }
    ]
  },
  "buckets": [
    {
      "name": "Certificate of Preference",
      "units": "up to 50 units",
      "applicants": "10 applicants on this list",
      "rank": "10",
      "overall": "Your ranking in this list is 10 out of of 10 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Displaced Tenants Housing Preference",
      "units": "up to 10 units",
      "applicants": "15 applicants on this list",
      "rank": "15",
      "overall": "Your ranking in this list is 15 out of of 15 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Neighborhood Resident Housing Preference",
      "units": "up to 20 units",
      "applicants": "1200 applicants on this list",
      "download": true,
      "rank": "285",
      "overall": "Your ranking in this list is 285 out of of 1200 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Live/Work Preference",
      "units": "any remaining units",
      "applicants": "2800 applicants on this list",
      "download": true,
      "rank": "385",
      "overall": "Your ranking in this list is 385 out of of 2800 qualified applicants.",
      "has-stat": true
    }
  ]
}

There are no notes for this item.