DAHLIA Pattern Library

Content Column Apply 

<div class="content-column">
    <div class="content-group has-divider">
        <h2 class="h-caps-lined">How to Apply</h2>

        <button class="button primary expand no-margin" type="button" data-event="gtm-apply-online">Apply Now Online</button>

        <div class="option-divider"><span class="or">or</span></div>
    </div>

    <div class="content-group has-divider">
        <div class="t-delta t-serif margin-bottom"><span class="c-primary">1</span> Get a Paper Application</div>
        <p class="c-charcoal t-small margin-bottom">Paper applications must be sent by US Mail and cannot be submitted in person.</p>

        <div class="option-divider"><span class="or">or</span></div>
    </div>

    <div class="content-group has-divider">
        <h3 class="content-group_title">Pickup an application</h3>
        <p class="c-charcoal t-small">You may pick up an application by visiting any of our housing counselors.</p>

        <button class="button secondary expand no-margin" type="button" data-event="gtm-apply-online">Visit a Housing Counselor</button>
        <p class="c-charcoal t-small margin-top">Paper applications must be mailed to the P.O. Box below.</p>
    </div>

    <div class="content-group bg-snow">
        <div class="t-delta t-serif margin-bottom"><span class="c-primary">2</span> Submit a Paper Application</div>

        <h3 class="content-group_title">Send Application by US Mail</h3>
        <p class="content-group_address">Trinity Place Apartments<br> P.O. Box 410775<br> San Francisco, CA 94141</p>
        <p class="c-charcoal t-small">In order to receive your lottery number, include a self addressed stamped envelope, otherwise one will not be mailed to you. Applications must be received by the deadline and postmarks will not be considered.</p>
        <p class="c-charcoal t-small">
            Do not apply online and also send in a paper application. All applications containing any person who appears on more than on application will be removed from the lottery.</p>
    </div>

    <div class="content-group">
        <h4 class="h-caps-lined">Need Help?</h4>
        <p class="c-charcoal t-small margin-bottom">Visit a local housing counselors for help with your online or paper application.</p>
        <button class="button secondary expand no-margin" type="button" data-event="gtm-apply-online">Find a Housing Counselor</button>
    </div>

    <div class="content-group">
        <h4 class="h-caps-lined">Contact Leasing Agent</h4>
        <h3 class="t-delta t-sans no-margin">Sophia Sidhu</h3>
        <p class="c-steel">Affordable Leasing Administrator</p>

        <p class="margin-bottom--half">
            <a href="#" class="margin-bottom--half">
        <span class="ui-icon ui-static ui-medium i-primary ">
          <svg>
            <use xlink:href="#i-phone"></use>
          </svg>
        </span>
        Call 415-928-5910
      </a>
        </p>
        <p class="c-charcoal t-small">Due to high call volume you may hear a recorded message</p>
    </div>
</div>
 
<div class="content-column">
  <div class="content-group has-divider">
    <h2 class="h-caps-lined">How to Apply</h2>

    {{> @button text="Apply Now Online" classes="primary expand no-margin" data="gtm-apply-online"}}

    <div class="option-divider"><span class="or">or</span></div>
  </div>

  <div class="content-group has-divider">
    <div class="t-delta t-serif margin-bottom"><span class="c-primary">1</span> Get a Paper Application</div>
    <p class="c-charcoal t-small margin-bottom">Paper applications must be sent by US Mail and cannot be submitted in person.</p>

    {{> @link-icon text="Download Application" classes="secondary expand no-margin has-icon--right" url="http://www.sfmohcd.org/index.aspx?page=133"}}

    <div class="option-divider"><span class="or">or</span></div>
  </div>

  <div class="content-group has-divider">
    <h3 class="content-group_title">Pickup an application</h3>
  {{#compare application_pickup '==' true }}
    <p class="content-group_address no-margin">Caritas Management Corporation<br>
    1358 Valencia St,<br> San Francisco, CA 94102</p>
    <a href="#" class="a-deep t-small d-block margin-bottom--2x hide-for-print">
      {{> @icons-base icon="map" fill="primary"}}
      View Map
    </a>

    <div class="content-group_hours">
      <h3 class="content-group_title">Office Hours</h3>
      <div class="content-group_days inline">
        <p>Monday&ndash;Friday
          <strong>8:30am&ndash;12:00pm</strong>
          <strong>1:30pm&ndash;5:00pm</strong>
        </p>
        <p>Saturday
          <strong>8:30am&ndash;5:00pm</strong>
        </p>
      </div>
    </div>
  {{else }}
    <p class="c-charcoal t-small">You may pick up an application by visiting any of our housing counselors.</p>

    {{> @button text="Visit a Housing Counselor" classes="secondary expand no-margin" data="gtm-apply-online"}}
  {{/compare}}
    <p class="c-charcoal t-small margin-top">Paper applications must be mailed to the P.O. Box below.</p>
  </div>

  <div class="content-group bg-snow">
    <div class="t-delta t-serif margin-bottom"><span class="c-primary">2</span> Submit a Paper Application</div>

    <h3 class="content-group_title">Send Application by US Mail</h3>
    <p class="content-group_address">Trinity Place Apartments<br>
    P.O. Box 410775<br>
    San Francisco, CA 94141</p>
    <p class="c-charcoal t-small">In order to receive your lottery number, include a self addressed stamped envelope, otherwise one will not be mailed to you. Applications must be received by the deadline and postmarks will not be considered.</p>
    <p class="c-charcoal t-small">
    Do not apply online and also send in a paper application. All applications containing any person who appears on more than on application will be removed from the lottery.</p>
  </div>  

  <div class="content-group">
    <h4 class="h-caps-lined">Need Help?</h4>
    <p class="c-charcoal t-small margin-bottom">Visit a local housing counselors for help with your online or paper application.</p>
    {{> @button text="Find a Housing Counselor" classes="secondary expand no-margin" data="gtm-apply-online"}}
  </div>

  <div class="content-group">
    <h4 class="h-caps-lined">Contact Leasing Agent</h4>
    <h3 class="t-delta t-sans no-margin">Sophia Sidhu</h3>
    <p class="c-steel">Affordable Leasing Administrator</p>

    <p class="margin-bottom--half">
      <a href="#" class="margin-bottom--half">
        {{> @icons-base icon="phone" fill="primary"}}
        Call 415-928-5910
      </a>
    </p>
    <p class="c-charcoal t-small">Due to high call volume you may hear a recorded message</p>
  </div>
</div>
 
{
  "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.