<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 max-width">
<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">
</div>
<div class="medium-4 columns no-padding">
<span class="lead-header_secondary-action"><a href="#" class="alt-caps">Edit Application</a></span>
</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 active" role="none"><button class="button-unstyled" role="menuitem" tabindex="" aria-selected="">Short Form Application</button></li>
<li class="tab-title" role="none"><button class="button-unstyled" role="menuitem" tabindex="" aria-selected="">Supplemental Information</button></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">
<div class="app-inner header-wide">
<h2 class="app-card_h2">Application Data</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">Primary Applicant</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>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Household Members</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">Reserved and Priority Qualifying Information</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 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>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Application 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">Declared Household Income</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 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>
<div class="app-inner header-wide">
<h2 class="app-card_h2">Flagged Applications</h2>
</div>
<div class="app-inner inset-wide has-border no-border-on-small">
<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="padding-bottom--2x margin-bottom--2x"></div>
</div>
</section>
{{> @top-bar--full }}
{{> @lead-header--short classes="bg-snow" max-width="max-width" action="Edit Application" }}
<div class="tabs-row row full-width inner--3x">
{{> @tabs--menu-buttons items=menus.leaseup-shortform }}
</div>
<section class="tabs-card-row row full-width inner--3x margin-bottom--2x">
{{ render '@app-card-view' }}
</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.