<div class="version-bar bar bg-primary">
    <div class="row">
        <div class="medium-12 columns">
            <p class="text-right t-small c-white no-margin">This site is in <strong class="t-caps">BETA</strong>: We're just getting started. <br class="show-for-small-only"> We'd love to get <a href="#" class="a-white lined">your feedback</a>.</p>
        </div>
    </div>
</div>
<nav class="top-bar" role="navigation">
    <div class="row">
        <ul class="title-area">
            <li class="name">
                <div class="name-logo is-tall is-offset-up t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
            </li>

            <li class="toggle-topbar menu-icon">
                <button href="#" class="button-link t-caps t-bold" aria-label="Open Menu">
        Menu
        <span class="ui-icon ui-static ui-large i-primary ">
          <svg>
            <use xlink:href="#i-menu"></use>
          </svg>
        </span>
      </button>
            </li>
        </ul>
        <section class="top-bar-section has-flex-items">
            <ul class="nav-menu right">
                <li>
                    <a href="/browse/browse-grid--default.html">
          Browse Properties
        </a>
                </li>
                <li>
                    <a href="/pages/favorites-grid.html">
          My Favorites
        </a>
                </li>
                <li>
                    <a href="/pages/get-assistance.html">
          Get Assistance
        </a>
                </li>
                <li>
                    <a href="/pages/get-assistance.html">
          Sign In
        </a>
                </li>
            </ul>
        </section>
    </div>
</nav>

<div class="p-relative">
    <section class="section-hero">
        <div class="accordion-offset accordion-offset--hero">
            <div class="property-hero" ng-app="dahlia" ng-controller="CarouselSampleController">
                <figure class="property-hero_figure">
                    <div class="property-hero_container">
                        <ng-carousel ng-carousel-name="example-carousel1">
                            <slidecontainer class="carousel-slides">
                                <slide ng-repeat="image in ::images track by $index">
                                    <img class="property-hero_thumb" reflow-after-load ng-src="{% image %}" alt="Trinity Place Apartments, 1188 Mission St">
                                </slide>
                            </slidecontainer>
                            <div class="carousel-arrow carousel-arrow-left">
                                <button title="previous" ng-click="Carousel.get('example-carousel1').previous()">
                  <span class="ui-icon ui-static ui-large i-white ">
                    <svg>
                      <use xlink:href="#i-left"></use>
                    </svg>
                  </span>
                </button>
                            </div>
                            <div class="carousel-arrow carousel-arrow-right">
                                <button title="next" ng-click="Carousel.get('example-carousel1').next()">
                  <span class="ui-icon ui-static ui-large i-white ">
                    <svg>
                      <use xlink:href="#i-right"></use>
                    </svg>
                  </span>
                </button>
                            </div>
                        </ng-carousel>
                    </div>

                    <h1 class="property-hero_title offset">
                        Trinity Place Apartments
                    </h1>
                </figure>

                <header class="property-hero_content margin-bottom p-relative">
                    <hgroup class="clearfix">
                        <p class="property-hero_address">1188 Mission St,<br> San Francisco CA, 94134<br> Caritas Management Group</p>
                        <a href="#" class="ui-link t-tiny hide-for-print">
              View on Map
            </a>
                    </hgroup>

                    <div class="property-hero_favorite show-for-medium-up">
                        <button class="button round-icon " href="javascript:void(0)">
              <span class="ui-icon">
                <svg>
                  <use xlink:href="#i-like"></use>
                  <use xlink:href="#i-like-fill" style="display:none"></use>
                </svg>
              </span>
              <span class="sr-only">Button</span>
            </button> <button class="button round-icon " href="javascript:void(0)">
              <span class="ui-icon">
                <svg>
                  <use xlink:href="#i-forward"></use>
                  <use xlink:href="#i-forward" style="display:none"></use>
                </svg>
              </span>
              <span class="sr-only">Button</span>
            </button> </div>

                    <ul class="property-hero_favorite button-group button-group--favorite row collapse hide-for-medium-up">
                        <li class="small-6 columns"></li>
                        <li class="small-6 columns"></li>
                    </ul>
                </header>

                <div class="property-hero_stats">
                    <span class="label flag-label alert-tint hide-for-medium-up">
              <span class="ui-icon ui-static ui-medium i-color ">
                <svg>
                  <use xlink:href="#i-clock"></use>
                </svg>
              </span> Applications Closed</span>

                </div>
            </div>
        </div>
    </section>

    <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">
                        <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">
                        <h4 class="h-caps-lined">Lottery</h4>

                        <p class="content-group_date">
                            <span class="content-group_day">October 28, 2015</span>
                        </p>

                        <p class="content-group_address c-steel">San Francisco LGBT Community Center<br> 1800 Market Street, San Francisco</p>

                        <p class="c-steel t-small">An open lottery was be held to draw numbers to determine selection.</p>
                    </div>

                    <div class="content-group">
                        <h4 class="h-caps-lined">Lottery Results</h4>

                        <p class="content-group_date">
                            <span class="content-group_day">November 21, 2015</span>
                        </p>

                        <p class="c-steel t-small">Complete lottery results will be posted here by 5pm.</p>
                    </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 class="content-panel accordion-offset margin-bottom--2x">
        <div class="content-card">
            <div class="row">
                <div class="medium-9 columns">
                    <p class="t-base t-serif">Monitored by the Mayors Office of Housing & Community Development </p>
                </div>
                <div class="medium-3 columns small-only-text-center">
                    <img src="/toolkit/images/logo-equal.png" alt="house icon">
                </div>
            </div>
        </div>
    </div>
    <section class="bg-dust">
        <div class="accordion-offset">
            <div class="tall-block ">
                <figure class="block-icon">
                    <img src="/toolkit/images/icon-mail.png" " alt="icon ">
        </figure>
        <h2 class="t-delta t-serif c-oil no-margin ">Get emailed whenever a new listing is posted.</h1>
        <a href="# " class="button ghost-white margin-top ">Sign Up Today</a>
      </div>
    </div>
  </section>
</div>

<footer class="footer-section bg-tuatara ">
  <div class="row text-center padding-top--2x padding-bottom--2x ">
    <div class="medium-12 columns ">
      <ul class="inline-list welcome-links t-semi ">
        <li>
          <a href="# ">Bienvenido</a>
        </li>
        <li>
          <a href="# ">歡迎</a>
        </li>
        <li>
          <a href="# ">Maligayang pagdating</a>
        </li>
      </ul>
    </div>
    <div class="medium-12 columns ">
      <img src="/toolkit/images/logo-city.png " class="city-logo margin-bottom--2x " alt="City & County of San Francisco Logo ">
    </div>
    <div class="clear "></div>
    <div class="medium-8 medium-centered columns ">
      <p class="c-iron ">The San Francisco Housing Portal is a project of the <br> <a href="# " class="a-white ">Mayor's Office of Housing and Community Development</a></p>

      <p class="t-small c-iron margin-top ">in partnership with <br>
         <a href="# " class="a-white ">San Francisco Department of Technology</a><br>
         <a href="# " class="a-white ">Mayor's Office of Civic Innovation</a>
      </p>

      <p class="t-small c-iron margin-top--2x ">For listing and application questions, please contact the Leasing Agent displayed on the listing.<br> For general program inquiries, you may call MOHCD at 415-701-5560.</p>

    </div>
  </div>
  <section class="footer-sock bg-ebony padding-top--2x padding-bottom ">
    <div class="row ">
      <div class="medium-3 large-4 columns small-only-text-center ">
        <span class="c-iron ">© City & County of San Francisco</span>
      </div>
      <div class="medium-9 large-8 columns small-only-text-center ">
        <ul class="inline-list ">
          <li>
            <a href="# ">Give Feedback</a>
          </li>
          <li>
            <a href="mailto:sfhousing.info@sfgov.org ">Contact</a>
          </li>
          <li>
            <a href="/pages/disclaimer.html ">Disclaimer</a>
          </li>
          <li>
            <a href="/pages/privacy-policy.html ">Privacy Policy</a>
          </li>
          <li>
            <a href="https://heapanalytics.com/?utm_source=badge " rel="nofollow "><img style="width:108px;height:41px " src="/toolkit/images/heap.png " alt="Heap | Mobile and Web Analytics " /></a>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="footer-sole ">
    <span >made with <span class="ui-icon ui-static ui-small i-color ">
  <svg>
    <use xlink:href="#i-favorite "></use>
  </svg>
</span>
 by <a href="# ">exygy</a> & <a href="# ">vertiba</a> </span>
  </section>
</footer>
{{> @version-bar }}
{{> @top-bar }}

<div class="p-relative">
  <section class="section-hero">
    <div class="accordion-offset accordion-offset--hero">
      {{> @property-hero--closed}}
    </div>
  </section>

      {{> @property-accordion applications_closed=true state="pre-results"}}
      {{> @content-panel-program }}

  <section class="bg-dust">
    <div class="accordion-offset">
      {{> @block-icon size="tall" icon="icon-mail.png" description="Get emailed whenever a new listing is posted." action="Sign Up Today"}}
    </div>
  </section>
</div>

{{> @footer}}
/* No context defined for this component. */

There are no notes for this item.