Eligibility Calculator: Edit

<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">Household Income Calculator</h1>
            </hgroup>
        </div>
    </div>
</header>
<section class="row">
    <div class="medium-6 medium-centered columns margin-top--2x">
        <form class="form-card">
            <header class="padding text-center">
                <h2 class="t-base t-alt-sans t-caps t-black">Add sources for each household member who will live in the unit.</h2>
            </header>

            <div class="form-section expand border-top">
                <div class="form-group border-bottom">
                    <div class="income-source_item ">
                        <span class="income-source_name">Wages
              <span class="income-source_value">$1000/month</span>
                        </span>
                        <a href="#" class="income-source_link">Edit</a>
                    </div>
                </div>

                <div class="form-group border-bottom">
                    <div class="income-source">
                        <div class="income-source_item">
                            <span class="income-source_name">Social Security 
                  <span class="income-source_value">$200/month</span>
                            </span>
                            <a class="income-source_link toggler">Cancel</a>

                            <div class="income-source_nested margin-top padding-bottom bg-mist toggled clearfix">

                                <div class="form-group padding-top--2x border-top">
                                    <label for="options" class="form-label margin-bottom--half">Where does this income come from?</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 class="form-group">
                                    <label for="options" class="form-label margin-bottom--half">How much is the 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 class="radio-group-inline ">
                                        <p class="radio-inline">
                                            <input type="radio" name="income" value="income-month" id="income-month">
                                            <label class="radio-inline_label" for="income-month">per month</label>
                                        </p>
                                        <p class="radio-inline">
                                            <input type="radio" name="income" value="income-year" id="income-year">
                                            <label class="radio-inline_label" for="income-year">per year</label>
                                        </p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="button-stack--paginate row">
                                        <div class="small-12 medium-6 medium-push-6 columns">
                                            <button class="button ghost-white right expand-small no-margin">Save</button>
                                        </div>
                                        <div class="small-12 medium-6 medium-pull-6 columns">
                                            <button class="button button-link button-lined small-text-center expand-small">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group border-bottom">
                    <div class="income-source_item ">
                        <span class="income-source_name">Wages
              <span class="income-source_value">$1000/month</span>
                        </span>
                        <a href="#" class="income-source_link">Edit</a>
                    </div>
                </div>

                <div class="form-group">
                    <div class="income-source">
                        <div class="income-source_item add-item">
                            <div class="clearfix">
                                <span class="ui-icon ui-static ui-medium i-deep ">
                  <svg>
                    <use xlink:href="#i-plus"></use>
                  </svg>
                </span>
                                <span class="income-source_add toggler t-caps t-alt-sans t-bold">Add additional income source</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="button-stack--paginate row">
            <div class="small-12 medium-6 medium-push-6 columns">
                <button class="button primary right expand-small">Next</button>
            </div>
            <div class="small-12 medium-6 medium-pull-6 columns">
                <button class="button button-link button-lined small-text-center expand-small">Cancel</button>
            </div>
        </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>