DAHLIA Pattern Library

Property Card: Rental 

<div class="property-card ">
    <h2 class="property-card_title text-center hide-for-medium-up">
        <a href="#/listings/trinity-place-apts">Trinity Place Apartments</a>
    </h2>
    <p class="property-card_address hide-for-medium-up text-center">1188 Mission St, <br class="show-for-small-only"> San Francisco CA, 94134</p>

    <div class="property-card_figure-wrapper">
        <figure class="property-card_figure">
            <a class="property-card_overlay" href="/listings/id" tabindex="-1">
        <img class="property-card_thumb" src="/toolkit/images/property5.jpg" alt="Listing Name:listing.Building_Name,
          Address:formattedAddress" role="link" >
      </a>

            <figcaption class="property-card_info">
                <h2 class="property-card_title show-for-medium-up">
                    <a href="#">Trinity Place Apartments</a>
                </h2>
                <p class="property-card_address show-for-medium-up">1188 Mission St, San Francisco CA, 94134</p>
            </figcaption>

        </figure>

        <div class="application-label label label--flag primary">Application Deadline: Nov 21, 2017 at 5PM</div>

    </div>

    <div class="print-only">Application Deadline: Nov 21, 2017 at 5PM</div>

    <div class="property-card_content">
        <div class="property-card_stats">

            <h3 class="t-base t-alt-sans t-semi margin-bottom">Available units and open waitlist</h3>

            <div class="table-pricing-wrapper">
                <table class="table-pricing table-pricing-hero " role="grid">
                    <thead>
                        <tr>
                            <th scope="col">Unit Type</th>
                            <th scope="col">Minimum Income</th>
                            <th scope="col">Rent</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-th="Unit Type" class="is-subtitled">
                                Studio
                            </td>
                            <td data-th="Minimum Income" class="is-subtitled">$1,347 to $1,678 <small>per month</small></td>
                            <td data-th="Rent" class="is-subtitled">$639 to $839 <small>per month</small></td>
                        </tr>
                        <tr>
                            <td data-th="Unit Type" class="is-subtitled">
                                1 BR
                            </td>
                            <td data-th="Minimum Income" class="is-subtitled">$1,518 to $1,958 <small>per month</small></td>
                            <td data-th="Rent" class="is-subtitled">$759 to $979 <small>per month</small></td>
                        </tr>
                        <tr>
                            <td data-th="Unit Type" class="is-subtitled">
                                2 BR
                            </td>
                            <td data-th="Minimum Income" class="is-subtitled">$2,185 to $2,685 <small>per month</small></td>
                            <td data-th="Rent" class="is-subtitled">$939 to $1,250 <small>per month</small></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="property-card_action">
            <button class="button round-icon has-label" 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="inline">Favorite</span>
      </button> <a class="button ghost-white right no-margin" href="/pages/property-grid.html">See Details</a>
        </div>

    </div>
</div>
 
<div class="property-card {{ default classes ''}}">
  <h2 class="property-card_title text-center hide-for-medium-up">
    <a href="#/listings/trinity-place-apts">{{default property-name 'Trinity Place Apartments'}}</a>
  </h2>
  <p class="property-card_address hide-for-medium-up text-center">{{default property-address '1188 Mission St'}}, <br class="show-for-small-only"> San Francisco CA, 94134</p>

  <div class="property-card_figure-wrapper">
    <figure class="property-card_figure">
      <a class="property-card_overlay" href="/listings/id" tabindex="-1">
        <img class="property-card_thumb" src="/toolkit/images/property5.jpg" alt="Listing Name:listing.Building_Name,
          Address:formattedAddress" role="link" >
        {{#if community-building}}
          <span class="badge-label label radius medium bg-splash">Senior Community Building</span>
        {{/if}}
      </a>

      <figcaption class="property-card_info">
        <h2 class="property-card_title show-for-medium-up">
          <a href="#">{{default property-name 'Trinity Place Apartments'}}</a>
        </h2>
        <p class="property-card_address show-for-medium-up">{{default property-address '1188 Mission St'}}, San Francisco CA, 94134</p>
      </figcaption>

    </figure>

    {{#compare state '==' 'closed' }}
      <div class="application-label label label--flag alert">Applications Closed: Mar 12th</div>
      <div class="application-label label label--flag">Lottery Results Posted: Feb 16th</div>
    {{else compare state '==' 'results' }}
      <div class="application-label label label--flag">Lottery Results Posted: Feb 16th</div>
    {{else compare state '==' 'matched' }}
      <div class="status-label label label--flag success">
      {{> @icons-base icon="check" fill="white"}}
      Matched</div>
      <div class="application-label label label--flag primary">
      {{> @icons-base icon="clock" fill="white"}}
      Application Deadline: {{default deadline 'Nov 21, 2017 at 5PM'}}</div>
    {{else compare state '==' 'not-matched' }}
      <div class="status-label label label--flag">Not a Match</div>
      <div class="application-label label label--flag primary">
      {{> @icons-base icon="clock" fill="white"}}
      Application Deadline: {{default deadline 'Nov 21, 2017 at 5PM'}}</div>
    {{else compare state '==' 'fave' }}
      <div class="application-label label label--flag">Lottery Results Posted: Feb 16th</div>
    {{else }}
      <div class="application-label label label--flag primary">Application Deadline: {{default deadline 'Nov 21, 2017 at 5PM'}}</div>
    {{/compare}}

  </div>

  <div class="print-only">Application Deadline: Nov 21, 2017 at 5PM</div>

  <div class="property-card_content">
    <div class="property-card_stats">
      {{#compare state '==' 'community' }}
        {{#if reserved-table}}
          {{> @pricing-table-hero reserved=true }}
        {{else}}
          {{> @pricing-table-hero }}
        {{/if}}
      {{else compare state '==' 'sro' }}
         {{> @pricing-table-hero items=tables.pricing-hero-sro }}
      {{else }}
        {{> @pricing-table-hero }}
      {{/compare}}
    </div>

    <div class="property-card_action">
    {{#compare state '==' 'fave' }}
      <div class="show-for-medium-up left">
        {{> @button-round fill="primary" label="inline" text="Favorite" classes="has-label"}}
        {{> @button-round icon="forward" fill="primary" label="inline" text="Like" classes="has-label"}}
      </div>
      <ul class="button-group button-group--favorite row collapse hide-for-medium-up">
        <li class="small-6 columns">{{> @button-icon text="favorite" fill="primary" icon="like" scale="medium" classes="tertiary small"}}</li>
        <li class="small-6 columns">{{> @button-icon text="share" fill="primary" icon="forward" scale="medium" classes="tertiary small"}}</li>
      </ul>
      <a class="button ghost-white expand-small right no-margin" href="/pages/property-grid.html">See Details</a>
    {{else }}
      {{> @button-round fill="primary" label="inline" text="Favorite" classes="has-label"}}
      <a class="button ghost-white right no-margin" href="/pages/property-grid.html">See Details</a>
    {{/compare}}
    </div>

  </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.