<div class="version-bar bar bg-primary">
<div class="row">
<div class="medium-12 columns">
<p class="text-right t-small c-white no-margin">This site is in <strong class="t-caps">BETA</strong>: We're just getting started. <br class="show-for-small-only"> We'd love to get <a href="#" class="a-white lined">your feedback</a>.</p>
</div>
</div>
</div>
<nav class="top-bar" role="navigation">
<div class="row">
<ul class="title-area">
<li class="name">
<div class="name-logo is-tall is-offset-up t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
</li>
<li class="toggle-topbar menu-icon">
<button href="#" class="button-link t-caps t-bold" aria-label="Open Menu">
Menu
<span class="ui-icon ui-static ui-large i-primary ">
<svg>
<use xlink:href="#i-menu"></use>
</svg>
</span>
</button>
</li>
</ul>
<section class="top-bar-section has-flex-items">
<ul class="nav-menu right">
<li>
<a href="/browse/browse-grid--default.html">
Browse Properties
</a>
</li>
<li>
<a href="/pages/favorites-grid.html">
My Favorites
</a>
</li>
<li>
<a href="/pages/get-assistance.html">
Get Assistance
</a>
</li>
<li>
<a href="/pages/get-assistance.html">
Sign In
</a>
</li>
</ul>
</section>
</div>
</nav>
<header class="lead-header bg-dark bg-gradient">
<div class="row">
<div class="large-12 columns">
<hgroup class="lead-header_group">
<h1 class="lead-header_title c-white">Estimate Your Eligibility</h1>
<div class="medium-8 columns no-padding show-for-medium-up">
<p class="t-epsilon t-serif c-white">Enter details about your household size and income and we'll highlight properties for which you may be eligible.</p>
</div>
</hgroup>
</div>
</div>
</header>
<div class="row margin-top--2x show-for-medium-up"></div>
<section class="row margin-bottom--2x">
<div class="medium-10 medium-centered columns">
<form class="form-card margin-bottom--2x">
<div class="form-card_header">
<p class="post-dealine_alert">
<span class="label label--flag alert-tint">
<span class="ui-icon ui-static ui-medium i-color ">
<svg>
<use xlink:href="#i-clock"></use>
</svg>
</span> You'll need to resolve any errors before moving on.</span>
</p>
</div>
<div class="row">
<div class="medium-6 columns padding-left--2x padding-top padding-bottom">
<header class="margin-bottom">
<h3 class="t-serif gamma">Household Size</h3>
<p class="c-steel">Household is defined as anyone living with you in the residence, including spouse, roommates, parents and children.</p>
</header>
<div class="form-group">
<label class="form-label sr-only">Household Size</label>
<label for="people" class="sr-only">Label</label>
<select name="people" id="people" class="" data-width="auto">
<option value="">Enter number of people</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 class="form-group padding-bottom--half">
<div class="checkbox">
<input id="peach-pie" type="checkbox" name="peach-pie" tab-index="1" />
<label for="peach-pie">Yes, this includes children under 6</label>
<input id="pear-pie" type="checkbox" name="pear-pie" tab-index="2" />
<label for="pear-pie">Yes, this includes children under 6</label>
</div>
</div>
<div class="form-group">
<label for="children" class="sr-only">Label</label>
<select name="children" id="children" class="" data-width="auto">
<option value="">How many children?</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="medium-6 columns padding-right--2x padding-top padding-bottom">
<header class="margin-bottom">
<h3 class="t-serif gamma">Household Pre-Tax Income</h3>
<p class="c-steel">Next add up your gross (pre-tax) household income from wages, benefits and other sources from household members.</p>
</header>
<div class="form-group">
<label class="form-label sr-only">Household Income</label>
<div class="form-income">
<label aria-label="Income" for="income" class="sr-only">Income</label>
<input id="income" name="income" type="text" class="form-income_input " placeholder="Total all of your income sources" />
<span class="label-dollar">$</span>
</div>
</div>
<div class="radio-group-inline ">
</div>
</div>
</div>
</form>
<div class="button-stack--paginate row">
<div class="small-12 medium-6 medium-push-6 columns">
<button class="button right primary expand-small">View Matching Properties</button>
</div>
<div class="small-12 medium-6 medium-pull-6 columns">
<button class="button button-link button-lined small-text-center expand-small">Reset Filters</button>
</div>
</div>
<div class="note text-center bg-vapor padding margin-top">
<p class="t-small no-margin">If you need help calculating your total, please use this tool:
<button class="button-link t-small">Household Income Calculator</button></p>
</div>
</div>
</section>
<footer class="footer-section bg-tuatara ">
<div class="row text-center padding-top--2x padding-bottom--2x">
<div class="medium-12 columns">
<ul class="inline-list welcome-links t-semi">
<li>
<a href="#">Bienvenido</a>
</li>
<li>
<a href="#">歡迎</a>
</li>
<li>
<a href="#">Maligayang pagdating</a>
</li>
</ul>
</div>
<div class="medium-12 columns">
<img src="/toolkit/images/logo-city.png" class="city-logo margin-bottom--2x" alt="City & County of San Francisco Logo">
</div>
<div class="clear"></div>
<div class="medium-8 medium-centered columns">
<p class="c-iron">The San Francisco Housing Portal is a project of the <br> <a href="#" class="a-white">Mayor's Office of Housing and Community Development</a></p>
<p class="t-small c-iron margin-top">in partnership with <br>
<a href="#" class="a-white">San Francisco Department of Technology</a><br>
<a href="#" class="a-white">Mayor's Office of Civic Innovation</a>
</p>
<p class="t-small c-iron margin-top--2x">For listing and application questions, please contact the Leasing Agent displayed on the listing.<br> For general program inquiries, you may call MOHCD at 415-701-5560.</p>
</div>
</div>
<section class="footer-sock bg-ebony padding-top--2x padding-bottom">
<div class="row">
<div class="medium-3 large-4 columns small-only-text-center">
<span class="c-iron">© City & County of San Francisco</span>
</div>
<div class="medium-9 large-8 columns small-only-text-center">
<ul class="inline-list">
<li>
<a href="#">Give Feedback</a>
</li>
<li>
<a href="mailto:sfhousing.info@sfgov.org">Contact</a>
</li>
<li>
<a href="/pages/disclaimer.html">Disclaimer</a>
</li>
<li>
<a href="/pages/privacy-policy.html">Privacy Policy</a>
</li>
<li>
<a href="https://heapanalytics.com/?utm_source=badge" rel="nofollow"><img style="width:108px;height:41px" src="/toolkit/images/heap.png" alt="Heap | Mobile and Web Analytics" /></a>
</li>
</ul>
</div>
</div>
</section>
<section class="footer-sole">
<span>made with <span class="ui-icon ui-static ui-small i-color ">
<svg>
<use xlink:href="#i-favorite"></use>
</svg>
</span> by <a href="#">exygy</a> & <a href="#">vertiba</a> </span>
</section>
</footer>
{{> @version-bar }}
{{> @top-bar }}
{{> @lead-header title="Estimate Your Eligibility" description="Enter details about your household size and income and we'll highlight properties for which you may be eligible." background="dark" color="white" classes="bg-gradient"}}
<div class="row margin-top--2x show-for-medium-up"></div>
<section class="row margin-bottom--2x">
<div class="medium-10 medium-centered columns">
<form class="form-card margin-bottom--2x">
<div class="form-card_header">
<p class="post-dealine_alert">
<span class="label label--flag alert-tint">
{{> @icons-base icon="clock" scale="medium"}}
You'll need to resolve any errors before moving on.</span>
</p>
</div>
<div class="row">
<div class="medium-6 columns padding-left--2x padding-top padding-bottom">
<header class="margin-bottom">
<h3 class="t-serif gamma">Household Size</h3>
<p class="c-steel">Household is defined as anyone living with you in the residence, including spouse, roommates, parents and children.</p>
</header>
<div class="form-group">
<label class="form-label sr-only">Household Size</label>
{{> @select name="people" placeholder="Enter number of people" options=inputs.people }}
</div>
<div class="form-group padding-bottom--half">
{{> @checkbox text="Yes, this includes children under 6"}}
</div>
<div class="form-group">
{{> @select name="children" placeholder="How many children?" options=inputs.children }}
</div>
</div>
<div class="medium-6 columns padding-right--2x padding-top padding-bottom">
<header class="margin-bottom">
<h3 class="t-serif gamma">Household Pre-Tax Income</h3>
<p class="c-steel">Next add up your gross (pre-tax) household income from wages, benefits and other sources from household members.</p>
</header>
<div class="form-group">
<label class="form-label sr-only">Household Income</label>
{{> @input-income }}
</div>
{{> @radio-group--inline }}
</div>
</div>
</form>
{{> @button-stack--paginate left="Reset Filters" l-classes="button-link button-lined small-text-center expand-small" right="View Matching Properties" r-classes="right primary expand-small"}}
<div class="note text-center bg-vapor padding margin-top">
<p class="t-small no-margin">If you need help calculating your total, please use this tool:
<button class="button-link t-small">Household Income Calculator</button></p>
</div>
</div>
</section>
{{> @footer}}
/* No context defined for this component. */
There are no notes for this item.