<div ng-controller="AccordionSampleController">
    <accordion close-others="oneAtATime" class="page-accordion">

        <accordion-group class="medium-right-column medium-accordion_open">
            <accordion-heading>
                <img class="accordion-icon" src="/toolkit/images/listing-units.svg" alt="listing-home">
                <h3 class="accordion-name">Results</h3>
                <span class="accordion-subheader">Lottery selection, important dates and contact</span>
                <span class="ui-icon ui-control ui-small i-color ">
          <svg>
            <use xlink:href="#i-arrow-down"></use>
          </svg>
        </span>
            </accordion-heading>

            <section class="content-wrap">
                <div class="content-group no-padding show-for-medium-up">
                    <p class="post-dealine_alert">
                        <span class="label flag-label alert-tint">
              <span class="ui-icon ui-static ui-medium i-color ">
                <svg>
                  <use xlink:href="#i-clock"></use>
                </svg>
              </span> Applications Closed</span>
                    </p>
                </div>

                <div class="content-group expand text-center">
                    <h4 class="t-gamma t-serif">Lottery Results</h4>

                    <table class="table-small table-results">
                        <thead>
                            <tr>
                                <th scope="col">Rank</th>
                                <th scope="col">Ticket</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td scope="row">1</td>
                                <td>843219</td>
                            </tr>
                            <tr>
                                <td scope="row">2</td>
                                <td>843219</td>
                            </tr>
                            <tr>
                                <td scope="row">3</td>
                                <td>843219</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="padding bg-dust">
                        <p class="c-steel t-small">Out of 50 applications, 20 numbers were pulled.</p>
                    </div>
                </div>

                <div class="content-group">
                    <h4 class="h-caps-lined">What to Expect</h4>
                    <p class="c-steel t-small margin-bottom">Applicants will be contacted by the leasing agent in lottery rank order until vacancies are filled.</p>

                    <div class="toggled">
                        <p class="c-steel t-small">All of the information that you have provided must be verified, and your eligibility confirmed. Any fraudulent statements will cause your application to be removed from the lottery. You will also be removed from the lottery if
                            you cannot prove a housing preference, or if a household member appears on more than one application.</p>
                        <p class="c-steel t-small">Should your application be chosen from the lottery, be prepared to fill out a more detailed application and provide required supporting documents.</p>
                    </div>
                    <a href="#" class="toggler toggle-more t-small">read more <span class="ui-icon ui-static ui-tiny i-primary ">
        <svg>
          <use xlink:href="#i-arrow-down"></use>
        </svg>
      </span>
      
          </a>
                </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>

                    <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 class="t-small c-steel">Due to high call valume you may hear a message</p>
                    <a href="#" class="d-block margin-bottom">
            <span class="ui-icon ui-static ui-medium i-primary ">
              <svg>
                <use xlink:href="#i-mail"></use>
              </svg>
            </span>
            Email
          </a>

                    <p class="no-margin">Caritas Management Corporation</p>
                    <p class="c-steel">1358 Valencia St, <br> San Francisco CA 94102</p>

                    <a href="#" class="d-block margin-bottom">
            <span class="ui-icon ui-static ui-medium i-primary ">
              <svg>
                <use xlink:href="#i-map"></use>
              </svg>
            </span>
            Get Directions
          </a>

                    <p class="no-margin">Office Hours</p>
                    <p class="c-steel">8:30am&ndash;5:00pm</p>
                </div>
            </section>

        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <img class="accordion-icon" src="/toolkit/images/listing-eligibility.svg" alt="eligibility-notebook">
                <h3 class="accordion-name">Eligibility</h3>
                <span class="accordion-subheader">Income, occupancy, preferences and rental assistance</span>
                <span class="ui-icon ui-control ui-small i-color ">
            <svg>
              <use xlink:href="#i-arrow-down"></use>
            </svg>
          </span>
            </accordion-heading>

            <header class="listing-header show-for-medium-up">
                <img class="listing-header_icon" src="/toolkit/images/listing-eligibility.svg" alt="eligibility-notebook">
                <hgroup class="listing-header_group">
                    <h3 class="listing-header_name">Eligibility</h3>
                    <span class="listing-header_subheader">Income, occupancy, preferences, rental assistance and additional building rules</span>
                </hgroup>
            </header>

            <div class="content-section">
                <ol class="custom-counter">
                    <li class="custom-counter_item">
                        <div class="content-tile">
                            <header class="custom-counter_header">
                                <h4 class="custom-counter_title">Household Maximum Income</h4>
                                <p class="custom-counter_text">For income calculations, household size includes everyone (all ages) living in the unit.</p>
                            </header>
                            <div class="stats-card bg-tint">
                                <div class="stats-toggle toggle-box toggler has-toggle show-for-small-only">
                                    <div class="stats-list_value highlight">
                                        <!-- <span class="value-label">Starts at</span> -->
                                        $38,950&ndash;$65,000<span class="value-label">/year</span>
                                    </div>
                                    <span class="stats-list_label">based on household size</span>

                                    <span class="ui-icon ui-control ui-small i-color ">
                        <svg>
                          <use xlink:href="#i-arrow-down"></use>
                        </svg>
                      </span>
                                </div>

                                <div class="toggled small-display-none">
                                    <table role="grid">
                                        <thead>
                                            <tr>
                                                <th scope="col">Household Size</th>
                                                <th scope="col">Maximum Income/Month</th>
                                                <th scope="col">Maximum Income/Year</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="custom-counter_item">
                        <div class="content-tile">
                            <header class="custom-counter_header">
                                <h4 class="custom-counter_title">Occupancy</h4>
                                <p class="custom-counter_text">Occupancy for this building differs from household size and does not include children under 6.</p>
                            </header>

                            <table role="grid">
                                <thead>
                                    <tr>
                                        <th scope="col">Unit Type</th>
                                        <th scope="col">Occupancy</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </li>
                    <li class="custom-counter_item">
                        <div class="content-tile">
                            <header class="custom-counter_header">
                                <h4 class="custom-counter_title">Lottery Preferences</h4>
                                <p class="custom-counter_text">Anyone may enter the housing lottery for this listing. If your household has one of the following preferences, you will be considered in the order shown here. Each preference holder will be reviewed in lottery rank order.</p>
                            </header>

                            <div class="content-card">
                                <header class="content-card_ordered">
                                    <span class="content-card_number">1 <sup>st</sup></span>
                                    <h4 class="content-card_title no-margin">Certificate of Preference (COP)</h4>
                                    <p class="c-steel">Up to 11 units available</p>
                                </header>
                                <p class="c-steel">Households in which one member holds a Certificate of Preference from the former San Francisco Redevelopment Agency. COP holders were displaced by Agency action generally during the 1960s and 1970s.<br><a href="#">Read More</a></p>
                            </div>

                            <div class="content-card">
                                <header class="content-card_ordered">
                                    <span class="content-card_number">2 <sup>nd</sup></span>
                                    <h4 class="content-card_title no-margin">Displaced Tenant Housing Preference (DTHP)</h4>
                                    <p class="c-steel">Up to 2 units available</p>
                                </header>
                                <p class="c-steel">Households in which one member holds a Displaced Tenant Housing Preference Certificate. DTHP Certificate holders are people who have been evicted through either an Ellis Act Eviction or an Owner Move-In Eviction in 2010
                                    or later. Once all units reserved for this preference are filled, remaining DTHP holders will receive Live/Work preference, regardless of their current living or working location.<br><a href="#">Read More</a></p>
                            </div>

                            <div class="content-card">
                                <header class="content-card_ordered">
                                    <span class="content-card_number">3 <sup>rd</sup></span>
                                    <h4 class="content-card_title no-margin">Neighborhood Resident Housing Preference (NRHP)</h4>
                                    <p class="c-steel">Up to 4 units available</p>
                                </header>
                                <p class="c-steel">Households that submit acceptable documentation that at least one member lives either within supervisorial district 10 or within a half-mile of the project.<br><a href="#">Read More</a></p>
                            </div>

                            <div class="content-card">
                                <header class="content-card_ordered">
                                    <span class="content-card_number">4 <sup>th</sup></span>
                                    <h4 class="content-card_title no-margin">Live/Work Preference</h4>
                                    <p class="c-steel">All remaining units</p>
                                </header>
                                <p class="c-steel">Households that submit acceptable documentation that at least one member lives or works in San Francisco. In order to claim Work Preference, you or a household member must currently work in San Francisco at least 75% of
                                    your working hours.
                            </div>

                            <p class="custom-counter_text">After all preference holders have been considered, any remaining units will be available to qualified applicants who do not live or work in San Francisco.</p>
                        </div>
                    </li>
                    <li class="custom-counter_item">
                        <div class="content-tile">
                            <header class="custom-counter_header">
                                <h4 class="custom-counter_title">Rental Assistance</h4>
                                <p class="custom-counter_text">Section 8 housing vouchers and other valid rental assistance programs can be used for this property. In the case of a valid rental subsidy, the required minimum income will be based on the portion of the rent that the tenant
                                    pays after use of the subsidy.</p>
                            </header>
                        </div>
                    </li>
                    <li class="custom-counter_item">
                        <div class="content-tile">
                            <header class="custom-counter_header">
                                <h4 class="custom-counter_title">Additional Eligibility Rules</h4>
                                <p class="custom-counter_text">Applicants must also qualify under the rules of the building.</p>
                            </header>

                            <div class="content-card">
                                <h4 class="content-card_title">Credit Rating</h4>
                                <p class="c-steel">Credit reports will be run to consider in the overall creditworthiness of the application post-lottery. A satisfactory credit history reflects proper, timely payments on all outstanding obligations. An unsatisfactory credit
                                    history is one that reflects past or current bad debts, late payments or unpaid bills, liens, or bankruptcies over 3 years will not be taken into account. Unsatisfactory credit history can disqualify an applicant from
                                    consideration.</p>
                            </div>

                            <div class="content-card">
                                <h4 class="content-card_title">Criminal History</h4>
                                <p class="c-steel">No felonies within the past 7 years. Qualified applicants with criminal history will be considered for housing in compliance with Article 49 of the San Francisco Police Code, “The Fair Chance Ordinance.”</p>
                            </div>

                            <p class="t-small padding-top"><a href="#" class="has-line">Find out more about Building Selection Criteria</a></p>
                        </div>
                    </li>
                </ol>
            </div>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <img class="accordion-icon" src="/toolkit/images/listing-features.svg" alt="features-options">
                <h3 class="accordion-name">Features</h3>
                <span class="accordion-subheader">Amenities, unit details and additional fees</span>
                <span class="ui-icon ui-control ui-small i-color ">
          <svg>
            <use xlink:href="#i-arrow-down"></use>
          </svg>
        </span>
            </accordion-heading>

            <header class="listing-header show-for-medium-up">
                <img class="listing-header_icon" src="/toolkit/images/listing-features.svg" alt="features-options">
                <hgroup class="listing-header_group">
                    <h3 class="listing-header_name">Features</h3>
                    <span class="listing-header_subheader">Amenities, unit details and additional fees</span>
                </hgroup>
            </header>

            <div class="content content-section">
                <div class="content-tile feature-tile">
                    <div class="feature-row row collapse">
                        <div class="medium-4 columns">
                            <h4 class="feature-title">Neighborhood</h4>
                        </div>
                        <div class="medium-8 columns">
                            <p class="feature-tile_content t-small">SOMA</p>
                        </div>
                    </div>
                    <div class="feature-row row collapse">
                        <div class="medium-4 columns overflow-wrap-break-word">
                            <h4 class="feature-title">Built</h4>
                        </div>
                        <div class="medium-8 columns">
                            <p class="feature-tile_content t-small">2015</p>
                        </div>
                    </div>

                    <div class="feature-row row collapse margin-bottom">
                        <div class="snall-12 medium-4 columns overflow-wrap-break-word">
                            <h4 class="feature-title">Property Amenities</h4>
                        </div>
                        <div class="small-6 medium-4 columns">
                            <ul class="feature-tile_content t-small">
                                <li>24-hour Desk</li>
                                <li>Elevator</li>
                                <li>Lobby</li>
                                <li>Laundry Facilities</li>
                                <li>Community TV Room</li>
                                <li>All units w/ Private Bathrooms and Kitchens</li>
                            </ul>
                        </div>
                        <div class="small-6 medium-4 columns">
                            <ul class="feature-tile_content t-small">
                                <li>Cats allowed</li>
                                <li>Dogs allowed</li>
                                <li>Water and Trash Included</li>
                                <li>No Parking</li>
                            </ul>
                        </div>
                    </div>

                    <div class="feature-row row collapse">
                        <div class="medium-4 columns overflow-wrap-break-word">
                            <h4 class="feature-title">Accessibility</h4>
                        </div>
                        <div class="medium-8 columns">
                            <ul class="feature-tile_content t-small">
                                <li>Wheelchair Accees</li>
                                <li>Grab Bars</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="content-tile feature-tile">
                    <h4 class="feature-title margin-bottom">Unit Features</h4>
                    <div class="stats-toggle margin-bottom">
                        <div class="toggle-box toggler has-toggle" role="button" tabindex="0">
                            <div class="toggle-box_label">
                                <strong>Studio</strong>: 1 Unit, 639&ndash;900 square feet, Accessible units
                            </div>

                            <span class="ui-icon ui-control ui-small i-color ">
                <svg>
                  <use xlink:href="#i-arrow-down"></use>
                </svg>
              </span>
                        </div>

                        <div class="toggled margin-bottom">
                            <table class="plain" role="grid">
                                <thead>
                                    <tr>
                                        <th scope="col">Unit Number</th>
                                        <th scope="col">Area</th>
                                        <th scope="col">Baths</th>
                                        <th scope="col">Floor</th>
                                        <th scope="col">Accessibility</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="stats-toggle margin-bottom">
                        <div class="toggle-box toggler has-toggle" role="button" tabindex="0">
                            <div class="toggle-box_label">
                                <strong>1 Bedroom</strong>: 6 Units, 639&ndash;900 square feet, Accessible units
                            </div>

                            <span class="ui-icon ui-control ui-small i-color ">
                <svg>
                  <use xlink:href="#i-arrow-down"></use>
                </svg>
              </span>
                        </div>

                        <div class="toggled">
                            <table class="plain" role="grid">
                                <thead>
                                    <tr>
                                        <th scope="col">Unit Number</th>
                                        <th scope="col">Area</th>
                                        <th scope="col">Baths</th>
                                        <th scope="col">Floor</th>
                                        <th scope="col">Accessibility</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="content-tile feature-tile">
                    <div class="content-card bg-dust">
                        <h5 class="content-card_title">Additional Fees</h5>

                        <div class="row collapse">
                            <div class="medium-6 columns padding-right padding-bottom">
                                <span class="t-small">Application Fee</span>
                                <p class="t-delta no-margin t-bold">$40</p>
                                <span class="content-label t-small">per applicant age 18 and over</span>
                                <span class="t-tiny d-block">Due post lottery</span>
                            </div>
                            <div class="medium-6 columns padding-bottom">
                                <span class="t-small">Deposit</span>
                                <p class="t-delta no-margin t-bold">$941</p>
                                <span class="content-label t-small">or one month's rent</span>
                                <span class="t-tiny d-block">May be higher for lower credit scores</span>
                            </div>
                        </div>

                        <div class="row collapse">
                            <div class="small-12 columns">
                                <span class="t-small">Renter pays phone, internet and cable</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </accordion-group>

        <accordion-group>
            <accordion-heading>
                <img class="accordion-icon" src="/toolkit/images/listing-neighborhood.svg" alt="neighborhood-building">
                <h3 class="accordion-name">Neighborhood</h3>
                <span class="accordion-subheader">Location and transportation</span>
                <span class="ui-icon ui-control ui-small i-color ">
          <svg>
            <use xlink:href="#i-arrow-down"></use>
          </svg>
        </span>
            </accordion-heading>

            <header class="listing-header show-for-medium-up">
                <img class="listing-header_icon" src="/toolkit/images/listing-neighborhood.svg" alt="neighborhood-building">
                <hgroup class="listing-header_group">
                    <h3 class="listing-header_name">Neighborhood</h3>
                    <span class="listing-header_subheader">Location and transportation</span>
                </hgroup>
            </header>

            <div class="content-section">

                <div class="property-map map-panel">
                    <figure class="property-map_figure p-relative">
                        <img class="property-map_thumb" src="/toolkit/images/map.png" alt="image of map">
                        <a href="#" class="map-link ui-link ui-small hide-for-print">
                <span class="ui-icon i-deep">
                  <svg>
                    <use xlink:href="#i-map"></use>
                  </svg>
                </span>
                Get Directions
              </a>
                    </figure>
                </div>

            </div>
        </accordion-group>

        <accordion-group>
            <accordion-heading class="lead">
                <img class="accordion-icon" src="/toolkit/images/listing-legal.svg" alt="legal-documents">
                <h3 class="accordion-name">Additional Information</h3>
                <span class="ui-icon ui-control ui-small i-color ">
          <svg>
            <use xlink:href="#i-arrow-down"></use>
          </svg>
        </span>
            </accordion-heading>

            <header class="listing-header show-for-medium-up">
                <h3 class="listing-header_name">Additional Information</h3>
            </header>

            <div class="content content-section">
                <div class="content-card bg-dust">
                    <h4 class="content-card_title t-serif">Required Documents</h4>
                    <p>Full documentation required if applicant is selected in listing lottery.</p>
                </div>

                <div class="content-card bg-dust">
                    <h4 class="content-card_title t-serif">Smoking Policy</h4>
                    <p>No stated policy.</p>
                </div>

                <div class="content-card bg-dust">
                    <h4 class="content-card_title t-serif">Pets Policy</h4>
                    <p>Pets are $65 per pet and $500 refundable deposit per pet.</p>
                </div>
            </div>
        </accordion-group>

    </accordion>
</div>
<div ng-controller="AccordionSampleController">
  {{> @page-accordion}}
</div>
{
  "inputs": {
    "states": [
      {
        "name": "Alabama",
        "attr": "AL"
      },
      {
        "name": "Alaska",
        "attr": "AK"
      },
      {
        "name": "Arizona",
        "attr": "AK"
      },
      {
        "name": "Arkansas",
        "attr": "AK"
      },
      {
        "name": "California",
        "attr": "CA"
      },
      {
        "name": "Colorado",
        "attr": "CO"
      },
      {
        "name": "Connecticut",
        "attr": "CT"
      },
      {
        "name": "Delaware",
        "attr": "DE"
      },
      {
        "name": "District Of Columbia",
        "attr": "DC"
      },
      {
        "name": "Florida",
        "attr": "FL"
      },
      {
        "name": "Georgia",
        "attr": "GA"
      },
      {
        "name": "Hawaii",
        "attr": "HI"
      },
      {
        "name": "Idaho",
        "attr": "ID"
      },
      {
        "name": "Illinois",
        "attr": "IL"
      },
      {
        "name": "Indiana",
        "attr": "IN"
      },
      {
        "name": "Iowa",
        "attr": "IA"
      },
      {
        "name": "Kansas",
        "attr": "KS"
      },
      {
        "name": "Kentucky",
        "attr": "KY"
      },
      {
        "name": "Louisiana",
        "attr": "LA"
      },
      {
        "name": "Maine",
        "attr": "ME"
      },
      {
        "name": "Maryland",
        "attr": "MD"
      },
      {
        "name": "Massachusetts",
        "attr": "MA"
      },
      {
        "name": "Michigan",
        "attr": "MI"
      },
      {
        "name": "Minnesota",
        "attr": "MN"
      },
      {
        "name": "Mississippi",
        "attr": "MS"
      },
      {
        "name": "Missouri",
        "attr": "MO"
      },
      {
        "name": "Montana",
        "attr": "MT"
      },
      {
        "name": "Nebraska",
        "attr": "NE"
      },
      {
        "name": "Nevada",
        "attr": "NV"
      },
      {
        "name": "New Hampshire",
        "attr": "NH"
      },
      {
        "name": "New Jersey",
        "attr": "NJ"
      },
      {
        "name": "New Mexico",
        "attr": "NM"
      },
      {
        "name": "New York",
        "attr": "NY"
      },
      {
        "name": "North Carolina",
        "attr": "NC"
      },
      {
        "name": "North Dakota",
        "attr": "ND"
      },
      {
        "name": "Ohio",
        "attr": "OH"
      },
      {
        "name": "Oklahoma",
        "attr": "OK"
      },
      {
        "name": "Oregon",
        "attr": "OR"
      },
      {
        "name": "Pennsylvania",
        "attr": "PA"
      },
      {
        "name": "Rhode Island",
        "attr": "RI"
      },
      {
        "name": "South Carolina",
        "attr": "SC"
      },
      {
        "name": "South Dakota",
        "attr": "SD"
      },
      {
        "name": "Tennessee",
        "attr": "TN"
      },
      {
        "name": "Texas",
        "attr": "TX"
      },
      {
        "name": "Utah",
        "attr": "UT"
      },
      {
        "name": "Vermont",
        "attr": "VT"
      },
      {
        "name": "Virginia",
        "attr": "VA"
      },
      {
        "name": "Washington",
        "attr": "WA"
      },
      {
        "name": "West Virginia",
        "attr": "WV"
      },
      {
        "name": "Wisconsin",
        "attr": "WI"
      },
      {
        "name": "Wyoming",
        "attr": "WY"
      }
    ]
  }
}

There are no notes for this item.