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

                    <div class="hide-for-medium-up">
                        <div class="flag-label label secondary ">
                            <span class="ui-icon ui-medium">
                <svg>
                  <use xlink:href="#i-clock"></use>
                </svg>
              </span> Application Deadline: Nov 21, 2015 at 5:00 PM
                        </div>
                    </div>
                </div>

                <div class="property-hero_apply">
                    <div class="hide-for-medium-up">
                        <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>
                </div>
            </div>
        </div>
    </section>

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

            <accordion-group class="medium-right-column">
                <accordion-heading>
                    <img class="accordion-icon" src="/toolkit/images/listing-units.svg" alt="neighborhood-building">
                    <h3 class="accordion-name">Process</h3>
                    <span class="accordion-subheader">Important dates and contact information</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">
                        <div class="flag-label label secondary text-wrap">
                            <span class="ui-icon ui-medium">
                    <svg>
                      <use xlink:href="#i-clock"></use>
                    </svg>
                  </span> Application Deadline: Nov 21, 2015 at 5:00 PM
                        </div>
                    </div>

                    <div class="content-group">
                        <h4 class="content-group_title">Information Session</h4>
                        <ul>
                            <li>
                                <p class="content-group_date">
                                    <span class="content-group_day">October 27, 2015</span>
                                    <span class="content-group_time">1:00pm&ndash;2:30pm</span>
                                </p>
                                <p class="content-group_address c-steel">San Francisco LGBT Community Center<br> 1800 Market Street,<br> San Francisco</p>
                            </li>
                        </ul>
                    </div>

                    <div class="content-group">
                        <h4 class="content-group_title">Open Houses</h4>
                        <ul class="content-list">
                            <li>
                                <p class="content-group_date">
                                    <span class="content-group_day">October 10, 2015</span>
                                    <span class="content-group_time">1:00pm&ndash;2:30pm</span>
                                </p>
                            </li>

                            <li>
                                <p class="content-group_date">
                                    <span class="content-group_day">October 18, 2015</span>
                                    <span class="content-group_time">1:00pm&ndash;2:30pm</span>
                                </p>
                            </li>
                        </ul>
                    </div>

                    <div class="show-for-medium-up">
                        <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" open-nopickup 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" open-nopickup 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" open-nopickup 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>

                    <div class="content-group">
                        <h4 class="h-caps-lined">Public Lottery</h4>
                        <ul>
                            <li>
                                <p class="content-group_date">
                                    <span class="content-group_day">November 28, 2015</span>
                                    <span class="content-group_time">1:00pm&ndash;2:30pm</span>
                                </p>
                                <p class="content-group_address">San Francisco LGBT Community Center<br> 1800 Market Street,<br> San Francisco</p>
                            </li>
                        </ul>
                    </div>

                    <div class="content-group">
                        <p class="t-small">Listing Updated August 15, 2015</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 hide-for-print">
        <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}}
    </div>
  </section>

      {{> @property-accordion applications_closed=false state="open-nopickup" }}
      {{> @content-panel-program }}

  <section class="bg-dust hide-for-print">
    <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.