DAHLIA Pattern Library

App Card Listing 

<div class="app-card form-card tabs-card max-width">
    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Details</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Building Information</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        4053 18TH ST, SAN FRANCISCO, CA, 94114-2535
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        4053 18TH ST, SAN FRANCISCO, CA, 94114-2535
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        http://sfmohcd.org/sites/default/files/Documents/ MOHHousing%20Listing%20PhotosTrinity%20Place %201188%20Mission.jpg
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Listing Preferences</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand">
            <div class="small-12 column">
                <div class="scrollable-table-container">
                    <table class="td-small th-small td-nowrap td-light td-plain th-plain" role="grid">
                        <thead>
                            <tr>
                                <th scope="col">Type</th>
                                <th scope="col">Minimum Income</th>
                                <th scope="col" class="text-right">Rent</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td scope="row">Studio</td>
                                <td><em>none</em></td>
                                <td class="text-right">30% income</td>
                            </tr>
                            <tr>
                                <td scope="row">1 Bedroom</td>
                                <td><em>none</em></td>
                                <td class="text-right">30% income</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Accessibility, Amenities, Fees</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Laundry room, underground parking, courtyard, bike room
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Tenants pay for gas, electricity. For pet fees: Cat is allowed with a $500 refundable deposit, $250 non-refundable cleaning fee and a pet addendum. Dogs are not allowed in the building. One parking space per unit available for $175 a month.
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Lottery Information</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Application Information</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Leasing Agent and Developer Information</h2>
    </div>

    <div class="app-inner inset-wide has-border">
        <div class="form-grid row expand padding-bottom">
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 large-3 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="app-inner header-wide">
        <h2 class="app-card_h2">Additional Eligibility Rules</h2>
    </div>

    <div class="app-inner inset-wide has-border no-border-on-small">
        <div class="form-grid row expand">
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Provide a credit report with score from Equifax, Experian, or TransUnion dated within thirty (30) days of the application. Accounts that are not current or that are derogatory will negatively affect the overall scoring, which could result in the denial
                        of the application or an additional deposit may be required. Collection accounts exceeding a combined amount of $1,000.00 (excluding student loans and medical debt) will negatively affect the overall scoring, which could result
                        in the denial of the application or an additional deposit may be required. Bankruptcy if not cleared will be an automatic denial of the rental application. No Guarantors permitted. Mitigating circumstances may be considered.
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Provide minimum of 4 years rental history with at least two prior rentals in which you were responsible for paying the rent. Applicants without rental history will still be considered. No Guarantors permitted. Previous rental history will be reviewed
                        and must exhibit no derogatory references. Landlord references will only check for evictions, payment history, and documented lease violations. No-fault evictions (Ellis Act, Owner Move-in evictions) will not be held against a
                        household. All debt owed to an apartment community must be satisfied. Mitigating circumstances may be considered.
                    </div>
                </div>
            </div>
            <div class="form-grid_item small-12 medium-6 column">
                <div class="form-group">
                    <label for="textValue" class="">Text label</label>
                    <div class="text-value " id="textValue" tabindex="0" aria-describedby="described-id">
                        Text value
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="padding-bottom--2x margin-bottom--2x"></div>
</div>
 
<div class="app-card form-card tabs-card max-width">
  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Details</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Building Information</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value value="4053 18TH ST, SAN FRANCISCO, CA, 94114-2535" }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value value="4053 18TH ST, SAN FRANCISCO, CA, 94114-2535" }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value value="http://sfmohcd.org/sites/default/files/Documents/
MOHHousing%20Listing%20PhotosTrinity%20Place
%201188%20Mission.jpg" }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Listing Preferences</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand">
        <div class="small-12 column">
          <div class="scrollable-table-container">
            {{> @table--percent classes="td-plain th-plain"}}
          </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Accessibility, Amenities, Fees</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value value="Laundry room, underground parking, courtyard, bike room" }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value value="Tenants pay for gas, electricity. For pet fees: Cat is allowed with a $500 refundable deposit, $250 non-refundable cleaning fee and a pet addendum.  Dogs are not allowed in the building. One parking space per unit available for $175 a month." }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Lottery Information</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Application Information</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Leasing Agent and Developer Information</h2>
  </div>

  <div class="app-inner inset-wide has-border">
    <div class="form-grid row expand padding-bottom">
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 large-3 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="app-inner header-wide">
    <h2 class="app-card_h2">Additional Eligibility Rules</h2>
  </div>

  <div class="app-inner inset-wide has-border no-border-on-small">
    <div class="form-grid row expand">
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value value="Provide a credit report with score from Equifax, Experian, or TransUnion dated within thirty (30) days of the application. Accounts that are not current or that are derogatory will negatively affect the overall scoring, which could result in the denial of the application or an additional deposit may be required. Collection accounts exceeding a combined amount of $1,000.00 (excluding student loans and medical debt) will negatively affect the overall scoring, which could result in the denial of the application or an additional deposit may be required. Bankruptcy if not cleared will be an automatic denial of the rental application. No Guarantors permitted. Mitigating circumstances may be considered." }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value value="Provide minimum of 4 years rental history with at least two prior rentals in which you were responsible for paying the rent. Applicants without rental history will still be considered. No Guarantors permitted. Previous rental history will be reviewed and must exhibit no derogatory references. Landlord references will only check for evictions, payment history, and documented lease violations. No-fault evictions (Ellis Act, Owner Move-in evictions) will not be held against a household. All debt owed to an apartment community must be satisfied. Mitigating circumstances may be considered." }}
        </div>
      </div>
      <div class="form-grid_item small-12 medium-6 column">
        <div class="form-group">
          {{> @text-value }}
        </div>
      </div>
    </div>
  </div>

  <div class="padding-bottom--2x margin-bottom--2x"></div>
</div>
 
{
  "tables": {
    "minimum": {
      "units": [
        {
          "type": "Studio",
          "income": "2,347",
          "rent": 939
        },
        {
          "type": "1 Bedroom",
          "income": "2,685",
          "rent": "1,074"
        },
        {
          "type": "2 Bedroom",
          "income": "2,998",
          "rent": "1,199"
        }
      ]
    },
    "minimum-range": {
      "units": [
        {
          "type": "Studio",
          "income-low": "$1,347",
          "income-high": "$1,678",
          "rent-low": "$639",
          "rent-high": "$839"
        },
        {
          "type": "1 BR",
          "income-low": "$1,518",
          "income-high": "$1,958",
          "rent-low": "$759",
          "rent-high": "$979"
        },
        {
          "type": "2 BR",
          "income-low": "$2,185",
          "income-high": "$2,685",
          "rent-low": "$939",
          "rent-high": "$1,250"
        }
      ]
    },
    "minimum-sale": {
      "units": [
        {
          "type": "Studio",
          "parking": "no parking",
          "price": "$223,548",
          "hoa": "$637.15"
        },
        {
          "type": "1 BR",
          "parking": "with parking",
          "price": "$256,721",
          "hoa": "$625.46"
        }
      ]
    },
    "minimum-sro": {
      "units": [
        {
          "type": "SRO",
          "income": "1,347",
          "rent": 639
        }
      ]
    },
    "percent": {
      "units": [
        {
          "type": "Studio",
          "income": "<em>none</em>",
          "rent": "30% income"
        },
        {
          "type": "1 Bedroom",
          "income": "<em>none</em>",
          "rent": "30% income"
        }
      ]
    },
    "maximum": {
      "households": [
        {
          "size": 1,
          "month": "3,245",
          "year": "38,950"
        },
        {
          "size": 2,
          "month": "3,708",
          "year": "44,500"
        },
        {
          "size": 3,
          "month": "4,204",
          "year": "50,450"
        },
        {
          "size": 4,
          "month": "4,670",
          "year": "56,050"
        },
        {
          "size": 5,
          "month": "5,045",
          "year": "60,550"
        },
        {
          "size": 6,
          "month": "5,416",
          "year": "65,000"
        }
      ]
    },
    "maximum-ami": {
      "households": [
        {
          "size": 1,
          "month": "30,245",
          "year": "38,950"
        },
        {
          "size": 2,
          "month": "30,708",
          "year": "44,500"
        },
        {
          "size": 3,
          "month": "40,204",
          "year": "50,450"
        },
        {
          "size": 4,
          "month": "40,670",
          "year": "56,050"
        },
        {
          "size": 5,
          "month": "50,045",
          "year": "60,550"
        },
        {
          "size": 6,
          "month": "50,416",
          "year": "65,000"
        }
      ]
    },
    "minimum-flex": [
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "1 <small>unit</small>"
      },
      {
        "type": "1 Bedroom",
        "income": "$2,685<small>/month</small>",
        "rent": "$1,074<small>/month</small>",
        "availability": "2 <small>units</small>"
      },
      {
        "type": "2 Bedroom",
        "income": "$2,998<small>/month</small>",
        "rent": "$1,199<small>/month</small>",
        "availability": "9 <small>units</small>"
      }
    ],
    "minimum-flex-reserved": [
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true,
        "icon": "star"
      },
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "<em>waitlist</em>",
        "reserved": true,
        "icon": "star"
      },
      {
        "type": "Studio",
        "income": "<em>none</em>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true
      },
      {
        "type": "Studio",
        "income": "$1,957<small>/month</small>",
        "rent": "30%<small> income</small>",
        "availability": "1 <small>unit</small>",
        "reserved": true
      },
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "1 <small>unit</small>"
      },
      {
        "type": "Studio",
        "income": "$2,347<small>/month</small>",
        "rent": "$939<small>/month</small>",
        "availability": "<em>waitlist</em>"
      },
      {
        "type": "1 Bedroom",
        "income": "$2,685<small>/month</small>",
        "rent": "30%<small> income</small>",
        "availability": "2 <small>units</small>",
        "reserved": true
      }
    ],
    "occupancy": {
      "units": [
        {
          "type": "Studio",
          "occupancy": "1-2"
        },
        {
          "type": "1 Bedroom",
          "occupancy": "1-3"
        },
        {
          "type": "2 Bedroom",
          "occupancy": "2-4"
        },
        {
          "type": "3 Bedroom",
          "occupancy": "3-6"
        }
      ]
    },
    "pricing-rent": [
      {
        "ami": "40%",
        "list": [
          {
            "type": "Studio",
            "units": [
              {
                "income": "$2,112",
                "rent": "$1,056",
                "availability": 1,
                "reserved": true
              },
              {
                "income": "$2,312",
                "rent": "$1,250",
                "availability": 4,
                "reserved": true
              }
            ]
          },
          {
            "type": "1 BR",
            "units": [
              {
                "income": "$2,514",
                "rent": "$1,257",
                "waitlist": true
              },
              {
                "income": "$2,712",
                "rent": "$1,750",
                "availability": 4
              }
            ]
          }
        ]
      },
      {
        "ami": "50%",
        "list": [
          {
            "type": "Studio",
            "units": [
              {
                "income": "$2,000",
                "rent": "$1,000",
                "availability": 28
              }
            ]
          },
          {
            "type": "1 BR",
            "units": [
              {
                "income": "$2,280",
                "rent": "$1,140",
                "availability": 26
              }
            ]
          },
          {
            "type": "2 BR",
            "units": [
              {
                "income": "$2,540",
                "rent": "$1,270",
                "availability": 1
              }
            ]
          }
        ]
      }
    ],
    "pricing-sale": [
      {
        "ami": "40%",
        "list": [
          {
            "type": "1 BR",
            "units": [
              {
                "price-no-parking": "$183,142",
                "hoa-no-parking": "$637",
                "availability": 2,
                "lease": "$637"
              },
              {
                "price-no-parking": "$185,309",
                "hoa-no-parking": "$625",
                "availability": 12,
                "lease": "$637"
              }
            ]
          },
          {
            "type": "2 BR",
            "units": [
              {
                "price-no-parking": "$254,562",
                "hoa-no-parking": "$723",
                "availability": 2,
                "lease": "$637"
              },
              {
                "price-no-parking": "$259,625",
                "hoa-no-parking": "$695",
                "availability": 5,
                "lease": "$637"
              }
            ]
          },
          {
            "type": "3 BR",
            "units": [
              {
                "price-no-parking": "$287,637",
                "hoa-no-parking": "$782",
                "availability": 5,
                "lease": "$637"
              }
            ]
          }
        ]
      }
    ],
    "pricing-sro": [
      {
        "type": "SRO",
        "income": "$1,356",
        "rent": "$678",
        "availability": 12
      }
    ],
    "priority": {
      "units": [
        {
          "type": "Served in US Military",
          "occupancy": 2
        },
        {
          "type": "Person with Mobility Impairment",
          "occupancy": 3
        },
        {
          "type": "Person with Developmental Disability",
          "occupancy": 4
        }
      ]
    },
    "features": {
      "studio": {
        "units": [
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          }
        ]
      },
      "1br": {
        "units": [
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          },
          {
            "unit": "#127",
            "area": 469,
            "baths": 1,
            "floor": "1st",
            "acccessibilty": "Wheelchair access"
          }
        ]
      }
    },
    "feature-summary": {
      "types": [
        {
          "type": "Studio",
          "units": "1 Unit",
          "area": "639&ndash;900",
          "acccessibilty": "Accessible units"
        },
        {
          "type": "1 Bedroom",
          "units": "6 Units",
          "area": "639&ndash;900",
          "acccessibilty": "Accessible units"
        }
      ]
    },
    "fees": {
      "types": [
        {
          "type": "Application Fee",
          "amount": "$40",
          "note": "per applicant age 18 and over, due post lottery"
        },
        {
          "type": "Deposit",
          "amount": "$500 - 941",
          "note": "or one month's rent, may be higher for lower credit scores"
        },
        {
          "type": "Rental Late Fee",
          "amount": "$50",
          "note": "after the 6th business day, rent due first of the month"
        },
        {
          "type": "Returned Check Fee",
          "amount": "$35",
          "note": "due in event of insufficient funds"
        },
        {
          "type": "Pet Rent",
          "amount": "$65",
          "note": "monthly per pet"
        },
        {
          "type": "Pet Deposit",
          "amount": "$500",
          "note": "per pet, refundable"
        },
        {
          "type": "Storage Unit Fee",
          "amount": "$75",
          "note": "per month, optional"
        },
        {
          "type": "Bike Room Fee",
          "amount": "$15",
          "note": "per month, optional"
        },
        {
          "type": "Replacement Fobs",
          "amount": "$50",
          "note": "for each replacement"
        },
        {
          "type": "Replacement Remotes",
          "amount": "$50",
          "note": "for each replacement"
        },
        {
          "type": "Utilities",
          "note": "The building pays water, sewer and trash only. Tenants are responsible for all other utilities"
        }
      ]
    },
    "preferences": {
      "leaseup": [
        {
          "icon": "check",
          "icon-fill": "success",
          "name": "Displaced Tenant Housing Preference",
          "person": "Jason Holmes",
          "rank": 12,
          "proof": null,
          "status": "Confirmed",
          "action": null
        },
        {
          "icon": "close",
          "icon-fill": "alert",
          "name": "Neighborhood Resident Housing Preference",
          "person": "Jason Holmes",
          "rank": 25,
          "proof": "<a href='#'>Cable Bill</a>",
          "status": "Invalid",
          "action": "<a href='#' class='action-link' style='display: none'>Edit</a>",
          "editable": "editable"
        },
        {
          "icon": null,
          "name": "Live or Work Housing Preference",
          "person": "Jason Holmes",
          "rank": 112,
          "proof": "<a href='#'>Cable Bill</a>",
          "status": "Unconfirmed",
          "action": "<a href='#' class='action-link margin-bottom--half'>Confirm</a><br> <a href='#' class='action-link c-alert'>Remove</a>"
        }
      ]
    },
    "applicants": [
      {
        "preference": "COP 1",
        "application": "APP-111-2223",
        "first": "Anne",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Status",
        "row_status": null,
        "button_status": "tertiary"
      },
      {
        "preference": "COP 2",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Processing",
        "row_status": "is-processing",
        "button_status": "is-processing"
      },
      {
        "preference": "COP 3",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Disqualified",
        "row_status": "is-disqualified",
        "button_status": "is-disqualified"
      },
      {
        "preference": "COP 4",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Approved",
        "row_status": "is-approved",
        "button_status": "is-approved"
      },
      {
        "preference": "COP 5",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Waitlisted",
        "row_status": "is-waitlisted",
        "button_status": "is-waitlisted"
      },
      {
        "preference": "COP 6",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Appealed",
        "row_status": "is-appealed",
        "button_status": "is-appealed"
      },
      {
        "preference": "COP 7",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Withdrawn",
        "row_status": "is-withdrawn",
        "button_status": "is-withdrawn"
      },
      {
        "preference": "COP 8",
        "application": "APP-111-2223",
        "first": "Beth",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Lease Signed",
        "invalid_status": "is-invalid",
        "row_status": "is-leased",
        "button_status": "is-leased"
      },
      {
        "preference": "COP 9",
        "application": "APP-111-2223",
        "first": "Anne",
        "last": "Bowler",
        "phone": "646-248-1112",
        "address": "4106 Terrace St",
        "update": "none",
        "status": "Processing",
        "invalid_status": "is-invalid",
        "row_status": "is-processing",
        "button_status": "is-processing"
      }
    ]
  },
  "inputs": {
    "yesno": [
      {
        "name": "Yes",
        "value": "yes"
      },
      {
        "name": "No",
        "value": "no"
      }
    ],
    "preferences": [
      {
        "name": "Displaced Tenants Preference",
        "note": "Primarily households displaced by Ellis Act evictions as defined by The Ellis Act Displacement Emergency Assistance Ordinance passed into law on December 18, 2013. (Formerly Ellis Act Preference)",
        "value": "displaced"
      },
      {
        "name": "Certificate of Preference",
        "note": "Primarily households displaced by Agency action in Redevelopment Project Areas during the 1960’s and 1970's, but may also include other persons displaced by Agency action.",
        "value": "cop"
      }
    ]
  },
  "menus": {
    "lang": [
      {
        "name": "English",
        "active": true,
        "url": "application-expect.html",
        "selected": true,
        "index": null,
        "id": "panel1"
      },
      {
        "name": "Español",
        "url": "application-expect--es.html",
        "selected": null,
        "index": -1,
        "id": "panel2"
      },
      {
        "name": "中文",
        "chinese": true,
        "url": "application-expect--zh.html",
        "selected": null,
        "index": -1,
        "id": "panel3"
      },
      {
        "name": "Filipino",
        "url": "#",
        "selected": null,
        "index": -1,
        "id": "panel4"
      }
    ],
    "mobile": [
      {
        "name": "Browse Properties",
        "icon": "browse"
      },
      {
        "name": "Get Assistance",
        "icon": "assistance"
      },
      {
        "name": "My Favorites",
        "icon": "favorite"
      },
      {
        "name": "Eligibility Settings",
        "icon": "eligibility"
      },
      {
        "name": "Account Settings",
        "icon": "settings"
      },
      {
        "name": "Sign Out"
      }
    ],
    "shortform": [
      {
        "name": "You",
        "active": true
      },
      {
        "name": "Household",
        "disabled": true
      },
      {
        "name": "Preferences",
        "disabled": true
      },
      {
        "name": "Income",
        "disabled": true
      },
      {
        "name": "Review",
        "disabled": true
      }
    ]
  },
  "buckets": [
    {
      "name": "Certificate of Preference",
      "units": "up to 50 units",
      "applicants": "10 applicants on this list",
      "rank": "10",
      "overall": "Your ranking in this list is 10 out of of 10 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Displaced Tenants Housing Preference",
      "units": "up to 10 units",
      "applicants": "15 applicants on this list",
      "rank": "15",
      "overall": "Your ranking in this list is 15 out of of 15 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Neighborhood Resident Housing Preference",
      "units": "up to 20 units",
      "applicants": "1200 applicants on this list",
      "download": true,
      "rank": "285",
      "overall": "Your ranking in this list is 285 out of of 1200 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Live/Work Preference",
      "units": "any remaining units",
      "applicants": "2800 applicants on this list",
      "download": true,
      "rank": "385",
      "overall": "Your ranking in this list is 385 out of of 2800 qualified applicants.",
      "has-stat": true
    }
  ]
}

There are no notes for this item.