<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>
                    <span class="property-hero_label label radius bg-splash">Senior Community Building</span>
                </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>

                <section class="property-hero_stats margin-bottom--2x">

                    <div class="message-group">
                        <div class="message is-reserved">
                            <span class="message-text">Reserved units for People with Developental Disabilities</span>
                        </div>
                    </div>
                    <section>

                        <div class="property-hero_apply">
                            <div class="hide-for-medium-up">

                                <div class="content-group">
                                    <h4 class="content-group_title c-primary">Apply to the Waitlist for 84 Units</h4>
                                    <p class="t-small c-steel">
                                        300 people are currently on this list <br> 200 open slots remaining
                                    </p>

                                    <p class="t-small c-steel">There are no vacant units available for this listing at this time. Once vacancies are filled the top portion of lottery applicants will be placed on a waitlist and be reviewed based on their ranking as units become
                                        available.</p>
                                </div>

                                <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 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">Senior Community Building</h4>
                                    </header>

                                    <div class="content-card">
                                        <h4 class="content-card_title no-margin">Senior</h4>
                                        <p class="c-steel">All Units</p>
                                        <p class="c-steel">This is a Senior community building. Residents who apply must be 62yrs or older to qualify.
                                            <br><a href="#">Read More</a>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <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">
                                        <table role="grid">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Household Size</th>
                                                    <th scope="col">30% AMI Units</th>
                                                    <th scope="col">50% AMI Units</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </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</h4>
                                            <p class="c-steel">Up to 11 units available</p>
                                        </header>
                                        <p class="c-steel">Certificate of Preference holders are primarily households displaced by Agency action in Redevelopment Project Areas during the 1960s and 1970s, but may also include other persons displaced by Agency action.
                                            <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">Up to 11 units available</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.

                                        </p>
                                    </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">Reserved Units</h4>
                                        <p class="custom-counter_text">In order to qualify for these units one of the following must apply to you or someone in your household:</p>
                                    </header>

                                    <div class="content-card">
                                        <h4 class="content-card_title no-margin">Veterans</h4>
                                        <p class="c-steel">1 unit</p>
                                        <p class="c-steel">Duis posuere nisi at urna semper, nec congue lacus mattis. Ut posuere blandit dui, id mollis neque hendrerit ut. Aenean ut ex quis dolor vehicula facilisis in sit amet libero.

                                        </p>
                                    </div>
                                </div>
                            </li>

                            <li class="custom-counter_item">
                                <div class="content-tile">
                                    <header class="custom-counter_header">
                                        <h4 class="custom-counter_title">Priority Units</h4>
                                        <p class="custom-counter_text">This building has units set aside if any of the following apply to you or someone in your household:</p>
                                    </header>

                                    <div class="content-card">
                                        <h4 class="content-card_title no-margin">People with Mobility Impairments</h4>
                                        <p class="c-steel">15 units</p>
                                        <p class="c-steel">Nam efficitur nisi sit amet vehicula sollicitudin. Duis finibus enim enim, in aliquam purus egestas eget. Integer pulvinar tellus non leo pretium faucibus. Aenean tempus risus eu libero dignissim.

                                        </p>
                                    </div>
                                </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>
                                </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--multifamily}}
    </div>
  </section>

      {{> @property-accordion multifamily=true applications_closed=false}}
      {{> @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.