<nav class="top-bar full-width inner--3x" role="navigation">
<div class="row">
<ul class="title-area">
<li class="name">
<div class="name-logo is-short t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
</li>
</ul>
<section class="top-bar-section">
<ul class="nav-menu left">
<li>
<a href="/lease-up/listings.html">
Listings
</a>
</li>
<li>
<a href="/lease-up/flags.html">
Flags
</a>
</li>
<li>
<a href="/lease-up/applications.html">
Applications
</a>
</li>
<li>
<a href="/lease-up/lease-up.html">
Lease Up
</a>
</li>
</ul>
<ul class="nav-menu right">
<li>
<a href="/pages/get-assistance.html">
Sign Out
</a>
</li>
</ul>
</section>
</div>
</nav>
<header class="lead-header short has-breadcrumbs bg-snow">
<div class="row full-width inner--3x">
<div class="large-12 columns ">
<nav aria-label="breadcrumb">
<ol class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li class="current"><a href="#" aria-current="page">Cloning</a></li>
</ol>
</nav>
<hgroup class="lead-header_group">
<h1 class="lead-header_title small c-oil">Page Header</h1>
<div class="medium-8 columns no-padding">
<p class="lead-header_subtitle caps c-oil">12 Clarence Place, San Francisco CA</p>
</div>
</hgroup>
</div>
</div>
</header>
<div class="tabs-row row full-width inner--3x">
<ul class="tabs full-width-small-only" role="menubar">
<li class="tab-title" role="none"><a href="#" role="menuitem" tabindex="" aria-selected="">Short Form Application</a></li>
<li class="tab-title active" role="none"><a href="#" role="menuitem" tabindex="" aria-selected="">Supplemental Information</a></li>
</ul>
</div>
<section class="tabs-card-row row full-width inner--3x margin-bottom--2x">
<div class="app-card form-card tabs-card max-width expand-on-small">
<div class="app-inner inset-wide padding-bottom-none margin-top">
<h2 class="sr-only">Status Update</h2>
<div class="status-update expand-wide is-processing">
<h3 class="status-update_title">Update Status</h3>
<div class="status-update_action">
<button class="button dropdown-button has-icon--right text-align-left small is-processing" href="#" aria-expanded="false">
<span class="ui-icon ui-small" aria-hidden="true">
<svg>
<use xlink:href="#i-arrow-down"></use>
</svg>
</span>
Processing
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
<li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul>
</div>
<div class="status-update_message">
<div class="status-update_comment">
<p class="status-update_note">Some comment</p>
<span class="status-update_date">03/12/18 </span>
</div>
<div class="status-update_footer">
<button class="button tiny tertiary" type="button" data-event="">Add a comment</button>
<a href="#" class="t-small right">See Status History</a>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Current Contact Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Current Mailing Address</h3>
<p class="form-note max-width">If the applicant reports a different address than at time of application, please pay extra attention to their original proof of address.</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</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="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="row">
<div class="small-6 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="small-6 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Preferences</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="small-12 column">
<div class="scrollable-table-container-under-xlarge">
<table class="td-light td-plain th-plain" role="grid">
<thead>
<tr>
<th scope="col"><span class="sr-only">Status Mark</span></th>
<th scope="col">Preference Name</th>
<th scope="col">Person who Claimed</th>
<th scope="col" class="text-right">Preference Rank</th>
<th scope="col">Type of Proof</th>
<th scope="col">Status</th>
<th scope="col" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Confirmed Household</h2>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Members</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<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>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Reserved and Priority Units</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="radio-group-inline ">
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<div class="checkbox-group form-checkbox-item" role="group">
</div>
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Confirmed Household Income</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<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="" class="">Text label</label>
<div class="radio-group-inline ">
</div>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Some really long text copy that wraps</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</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>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</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>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</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 is-placeholder" id="textValue" tabindex="0" aria-describedby="described-id">
Some really long text copy that wraps
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Eligibility Rules Checklist</h2>
<p class="form-note max-width">Applicants must qualify under the rules of the building in the following order:</p>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-8 column">
<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.
</p>
</div>
<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.
</p>
</div>
<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.
</p>
</div>
<div class="padding-top margin-bottom"><a class="lined" href="#">See listing</a></div>
</div>
</div>
</div>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Lease Information</h2>
</div>
<div class="app-inner inset-wide border-bottom">
<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="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</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="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</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 is-placeholder" id="textValue" tabindex="0" aria-describedby="described-id">
Text value
</div>
<span class="form-note shift-up" id="{{note}}-id">Same</span>
</div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="textInput" class="">Text input</label>
<input type="text" id="textInput" name="textInput" placeholder="Type here" aria-describedby="described-id" />
</div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Demographics</h3>
</div>
<div class="app-inner inset-wide border-bottom">
<div class="form-grid row expand">
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
<div class="form-grid_item small-12 medium-6 large-3 column">
<div class="form-group">
<label for="" class="">Text label</label>
<label for="options" class="sr-only">Label</label>
<select name="options" id="options" class="" data-width="auto">
<option value="">Select one</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select> </div>
</div>
</div>
</div>
<div class="app-inner subheader-wide">
<h3 class="app-card_h3 t-sans">Status History</h3>
</div>
<div class="app-inner inset-wide">
<div class="form-grid row expand">
<div class="form-grid_item small-12 column">
<div class="status-list">
<ul>
<li class="status-list_item">
<div class="status-list_tag is-default">No Status</div>
<div class="status-list_comment">
<p class="status-list_note">The first time I met this person</p>
<span class="status-list_date">01/01/18</span>
</div>
</li>
<li class="status-list_item">
<div class="status-list_tag is-processing">Processing</div>
<div class="status-list_comment">
<p class="status-list_note">The next time I met this person</p>
<span class="status-list_date">02/02/18</span>
</div>
</li>
<li class="status-list_item">
<div class="status-list_tag is-approved">Approved</div>
<div class="status-list_comment">
<p class="status-list_note">The last time I met this person</p>
<span class="status-list_date">03/03/18</span>
</div>
</li>
</ul>
<div class="status-list_footer">
<button class="button tertiary tiny margin-bottom-none" type="button" data-event="">Add a comment</button>
</div>
</div>
</div>
</div>
</div>
<div class="padding-bottom--2x margin-bottom--2x"></div>
<div class="button-pager">
<div class="button-pager_row align-buttons-left primary inset-wide">
<button class="button dropdown-button has-icon--right text-align-left small is-approved small has-status-width" href="#" aria-expanded="false">
<span class="ui-icon ui-small" aria-hidden="true">
<svg>
<use xlink:href="#i-arrow-down"></use>
</svg>
</span>
Approved
</button>
<ul class="dropdown-menu" role="listbox" aria-hidden="true" aria-activedescendant tabindex="-1" style="display: none;">
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is a link</a></li>
<li class="dropdown-menu_item" role="option" aria-selected="false"><a href="#">This is another</a></li>
<li class="dropdown-menu_item is-selected" role="option" aria-selected="true"><a href="#">Yet another</a></li>
</ul> <button class="button primary small" type="button" data-event="">Save</button>
</div>
</div>
</div>
</section>
{{> @top-bar--full }}
{{> @lead-header--short classes="bg-snow" description="12 Clarence Place, San Francisco CA" }}
<div class="tabs-row row full-width inner--3x">
{{> @tabs--menu-links items=menus.leaseup }}
</div>
<section class="tabs-card-row row full-width inner--3x margin-bottom--2x">
{{> @app-card-tabs }}
</section>
{
"menus": {
"leaseup-shortform": [
{
"name": "Short Form Application",
"active": true
},
{
"name": "Supplemental Information"
}
],
"leaseup": [
{
"name": "Short Form Application"
},
{
"name": "Supplemental Information",
"active": true
}
],
"listing": [
{
"name": "Listing"
},
{
"name": "Applications",
"active": true
}
],
"listing-view": [
{
"name": "Listing",
"active": true
},
{
"name": "Applications"
}
]
},
"page-class": "bg-snow"
}
There are no notes for this item.