DAHLIA Pattern Library

Application Review: Default 

<div class="translate-bar bar bg-tuatara">
    <div class="row">
        <div class="translate-bar_notice-column small-12 medium-6 columns">
            <!-- in the web app, this whole section gets hidden if selected on English -->
            <div class="translate-bar_notice">
                <span class="translate-bar_message c-white t-small t-semi">Esta página ha sido traducida por Google Translate.</span>
                <a href="#" class="translate-bar_learn lined c-white t-small">Learn more.</a>
            </div>
        </div>
        <div class="small-12 medium-6 columns">
            <ul class="translate-bar_languages inline-list t-semi right">
                <li><a href="#" class="">English</a></li>
                <li><a href="#" class="">Espanol</a></li>
                <li><a href="#" class=" t-ch">中国</a></li>
                <li><a href="#" class="">Tagalog</a></li>
            </ul>
        </div>
    </div>
</div>
<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>

<section class="app-container">
    <div class="row collapse">
        <div class="medium-6 medium-centered columns fixed-width">
            <div class="app-header app-card form-card">
                <header class="app-card_header">
                    <h1 class="app-card_title">Application: 123 Main St.</h1>
                </header>
                <div class="app-card_nav">
                    <ol class="progress-nav">
                        <li class="progress-nav_item active"><a href="#">You</a></li>
                        <li class="progress-nav_item disabled"><a href="#">Household</a></li>
                        <li class="progress-nav_item disabled"><a href="#">Preferences</a></li>
                        <li class="progress-nav_item disabled"><a href="#">Income</a></li>
                        <li class="progress-nav_item disabled"><a href="#">Review</a></li>
                    </ol>
                </div>
            </div>

            <form class="app-card form-card">
                <div class="app-inner leader border-bottom">
                    <h2 class="app-card_question">Take a moment to review your information before submitting your application.</h2>
                </div>

                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">You</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Name</h4>
                        <p class="info-item_name">Laura Smith</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Date of Birth</h4>
                        <p class="info-item_name">12/02/1980</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Phone</h4>
                        <p class="info-item_name">415-123-1234</p>
                        <span class="info-item_note">Cell</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Additional Phone</h4>
                        <p class="info-item_name">415-123-1234</p>
                        <span class="info-item_note">Home</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Email</h4>
                        <p class="info-item_name">lara.smith@gmail.com</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Address</h4>
                        <p class="info-item_name">649 Avalon St <br> San Francisco, CA 94117</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Mailing Address</h4>
                        <p class="info-item_name">456 Mission St <br> San Francisco, CA 94117</p>
                    </div>
                </div>
                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">Alternate Contact</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Name</h4>
                        <p class="info-item_name">Michael Smith</p>
                        <span class="info-item_note">Counselor</span>
                        <span class="info-item_note t-bold">MEDA</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Email</h4>
                        <p class="info-item_name">michael.smith@gmail.com</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Phone</h4>
                        <p class="info-item_name">415-876-5432</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Mailing Address</h4>
                        <p class="info-item_name">456 Mission St <br> San Francisco, CA 94117</p>
                    </div>
                </div>
                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">Household Members</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Name</h4>
                        <p class="info-item_name">Michael Smith</p>
                        <span class="info-item_note">Child</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Date of Birth</h4>
                        <p class="info-item_name">12/2/1980</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom"></h4>
                        <p class="info-item_name"></p>
                    </div>
                    <div class="border-top info-item_divider"></div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Name</h4>
                        <p class="info-item_name">Michael Johnson</p>
                        <span class="info-item_note">Family Member</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Date of Birth</h4>
                        <p class="info-item_name">12/2/1970</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Address</h4>
                        <p class="info-item_name">700 Avalon St <br> San Francisco, CA 94117</p>
                    </div>
                </div>
                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">Household Details</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Rent at 2106 Park Blvd</h4>
                        <p class="info-item_name">$1200 per month</p>
                        <span class="info-item_note">for Michael Smith</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Rent at 4106 Terrace St</h4>
                        <p class="info-item_name">$1200 per month</p>
                        <span class="info-item_note">for Jane Smith and Denise Jones</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Seniors in Household</h4>
                        <p class="info-item_name">Yes</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Veterans in Household</h4>
                        <p class="info-item_name">Yes</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">People with Developmental Disabilities</h4>
                        <p class="info-item_name">Yes</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">ADA Accessible Units</h4>
                        <p class="info-item_name">Mobility Impairments<br> Visual Impairments</p>
                    </div>
                </div>
                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">Income</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Vouchers and Subsidies</h4>
                        <p class="info-item_name">Yes</p>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">Household Income</h4>
                        <p class="info-item_name">$32,000 per year</p>
                    </div>
                </div>
                <header class="app-sub-header border-top">
                    <h3 class="app-sub-header_title">Preferences</h3>
                    <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
                </header>

                <div class="app-inner">
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">You Have Claimed</h4>
                        <p class="info-item_name">Certificate of Preference</p>
                        <span class="info-item_note">for Michael Smith</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">You Have Claimed</h4>
                        <p class="info-item_name">Neighborhood Resident Housing Preference</p>
                        <span class="info-item_note">for Michael Smith</span>
                        <span class="info-item_note t-bold">Telephone Bill attached</span>
                    </div>
                    <div class="info-item margin-bottom">
                        <h4 class="info-item_value margin-bottom">You Have Claimed</h4>
                        <p class="info-item_name">Rent Burden Preference</p>
                        <span class="info-item_note">for 2106 Park Blvd</span>
                        <span class="info-item_note t-bold">Copy of Lease and Cancelled Check attached</span>
                        <span class="info-item_note">for 4106 Terrace St</span>
                        <span class="info-item_note t-bold">Copy of Lease and Money order attached</span>
                    </div>
                </div>

                <!--         <div class="padding--2x text-center hide-for-print">
          <a class="t-small lined" href="#">Print a copy for your records</a>
        </div> -->

                <div class="app-inner text-center border-top">
                    <p class="t-small no-margin c-charcoal t-bold">This is your last chance to edit before submitting.</p>
                </div>

                <div class="button-pager">
                    <div class="button-pager_row primary">
                        <button class="button primary">Confirm</button>
                    </div>
                    <div class="button-pager_row padding-top--2x padding-bottom--2x">
                        <button class="button secondary expand-small">Save draft and come back later</button>
                    </div>
                </div>
            </form>

        </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>
 
{{> @translate-bar }}
{{> @version-bar }}
{{> @top-bar }}

<section class="app-container">
  <div class="row collapse">
    <div class="medium-6 medium-centered columns fixed-width">
      {{ render '@app-header' }}

      <form class="app-card form-card">
        <div class="app-inner leader border-bottom">
          <h2 class="app-card_question">Take a moment to review your information before submitting your application.</h2>
        </div>

        {{#each sections}}
        <header class="app-sub-header border-top">
          <h3 class="app-sub-header_title">{{header}}</h3>
          <a class="info-item_link edit-link hide-for-print" href="#">Edit</a>
        </header>

        <div class="app-inner">
          {{#each info-items}}
          <div class="info-item margin-bottom">
            <h4 class="info-item_value margin-bottom">{{name}}</h4>
            <p class="info-item_name">{{{value}}}</p>
            {{#if note }}
            <span class="info-item_note">{{note}}</span>
            {{/if }}
            {{#if secondary }}
            <span class="info-item_note t-bold">{{secondary}}</span>
            {{/if }}
            {{#if note-2 }}
            <span class="info-item_note">{{note-2}}</span>
            {{/if }}
            {{#if secondary-2 }}
            <span class="info-item_note t-bold">{{secondary-2}}</span>
            {{/if }}
          </div>
          {{#if divider }}
            <div class="border-top info-item_divider"></div>
          {{/if }}
          {{/each}}
        </div>
        {{/each}}

<!--         <div class="padding--2x text-center hide-for-print">
          <a class="t-small lined" href="#">Print a copy for your records</a>
        </div> -->

        <div class="app-inner text-center border-top">
          <p class="t-small no-margin c-charcoal t-bold">This is your last chance to edit before submitting.</p>
        </div>

        {{> @button-pager left="Confirm" l-classes="primary" right="Save draft and come back later" r-classes="secondary expand-small" r-row-classes="padding-top--2x padding-bottom--2x"}}
      </form>

    </div>
  </div>
</section>

{{> @footer}}
 
{
  "page-class": "center-body",
  "sections": [
    {
      "header": "You",
      "info-items": [
        {
          "name": "Name",
          "value": "Laura Smith"
        },
        {
          "name": "Date of Birth",
          "value": "12/02/1980"
        },
        {
          "name": "Phone",
          "value": "415-123-1234",
          "note": "Cell"
        },
        {
          "name": "Additional Phone",
          "value": "415-123-1234",
          "note": "Home"
        },
        {
          "name": "Email",
          "value": "lara.smith@gmail.com"
        },
        {
          "name": "Address",
          "value": "649 Avalon St <br> San Francisco, CA 94117"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Alternate Contact",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Counselor",
          "secondary": "MEDA"
        },
        {
          "name": "Email",
          "value": "michael.smith@gmail.com"
        },
        {
          "name": "Phone",
          "value": "415-876-5432"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Household Members",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Child"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1980"
        },
        {
          "divider": true
        },
        {
          "name": "Name",
          "value": "Michael Johnson",
          "note": "Family Member"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1970"
        },
        {
          "name": "Address",
          "value": "700 Avalon St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Household Details",
      "info-items": [
        {
          "name": "Rent at 2106 Park Blvd",
          "value": "$1200 per month",
          "note": "for Michael Smith"
        },
        {
          "name": "Rent at 4106 Terrace St",
          "value": "$1200 per month",
          "note": "for Jane Smith and Denise Jones"
        },
        {
          "name": "Seniors in Household",
          "value": "Yes"
        },
        {
          "name": "Veterans in Household",
          "value": "Yes"
        },
        {
          "name": "People with Developmental Disabilities",
          "value": "Yes"
        },
        {
          "name": "ADA Accessible Units",
          "value": "Mobility Impairments<br> Visual Impairments"
        }
      ]
    },
    {
      "header": "Income",
      "info-items": [
        {
          "name": "Vouchers and Subsidies",
          "value": "Yes"
        },
        {
          "name": "Household Income",
          "value": "$32,000 per year"
        }
      ]
    },
    {
      "header": "Preferences",
      "info-items": [
        {
          "name": "You Have Claimed",
          "value": "Certificate of Preference",
          "note": "for Michael Smith"
        },
        {
          "name": "You Have Claimed",
          "value": "Neighborhood Resident Housing Preference",
          "note": "for Michael Smith",
          "secondary": "Telephone Bill attached"
        },
        {
          "name": "You Have Claimed",
          "value": "Rent Burden Preference",
          "note": "for 2106 Park Blvd",
          "secondary": "Copy of Lease and Cancelled Check attached",
          "note-2": "for 4106 Terrace St",
          "secondary-2": "Copy of Lease and Money order attached"
        }
      ]
    }
  ],
  "sections-general": [
    {
      "header": "You",
      "info-items": [
        {
          "name": "Name",
          "value": "Laura Smith"
        },
        {
          "name": "Date of Birth",
          "value": "12/02/1980"
        },
        {
          "name": "Phone",
          "value": "415-123-1234",
          "note": "Cell"
        },
        {
          "name": "Additional Phone",
          "value": "415-123-1234",
          "note": "Home"
        },
        {
          "name": "Email",
          "value": "lara.smith@gmail.com"
        },
        {
          "name": "Address",
          "value": "649 Avalon St <br> San Francisco, CA 94117"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Alternate Contact",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Counselor",
          "secondary": "MEDA"
        },
        {
          "name": "Email",
          "value": "michael.smith@gmail.com"
        },
        {
          "name": "Phone",
          "value": "415-876-5432"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Household Members",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Child"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1980"
        },
        {
          "divider": true
        },
        {
          "name": "Name",
          "value": "Michael Johnson",
          "note": "Family Member"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1970"
        },
        {
          "name": "Address",
          "value": "700 Avalon St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Preferences",
      "info-items": [
        {
          "name": null,
          "value": "Based on the information you have entered, your household has not claimed any housing lottery preferences. you will be in the general lottery.",
          "is-sentence": "yes"
        }
      ]
    },
    {
      "header": "Income",
      "info-items": [
        {
          "name": "Vouchers and Subsidies",
          "value": "No"
        },
        {
          "name": "Household Income",
          "value": "$32,000 per year"
        }
      ]
    }
  ],
  "sections-preview": [
    {
      "header": "You",
      "info-items": [
        {
          "name": "Name",
          "value": "Laura Smith"
        },
        {
          "name": "Date of Birth",
          "value": "12/02/1980"
        },
        {
          "name": "Phone",
          "value": "415-123-1234",
          "note": "Cell"
        },
        {
          "name": "Additional Phone",
          "value": "415-123-1234",
          "note": "Home"
        },
        {
          "name": "Email",
          "value": "lara.smith@gmail.com"
        },
        {
          "name": "Address",
          "value": "649 Avalon St <br> San Francisco, CA 94117"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Alternate Contact",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Counselor",
          "secondary": "MEDA"
        },
        {
          "name": "Email",
          "value": "michael.smith@gmail.com"
        },
        {
          "name": "Phone",
          "value": "415-876-5432"
        },
        {
          "name": "Mailing Address",
          "value": "456 Mission St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Household Members",
      "info-items": [
        {
          "name": "Name",
          "value": "Michael Smith",
          "note": "Child"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1980"
        },
        {
          "divider": true
        },
        {
          "name": "Name",
          "value": "Michael Johnson",
          "note": "Family Member"
        },
        {
          "name": "Date of Birth",
          "value": "12/2/1970"
        },
        {
          "name": "Address",
          "value": "700 Avalon St <br> San Francisco, CA 94117"
        }
      ]
    },
    {
      "header": "Household Details",
      "info-items": [
        {
          "name": "Seniors in Household",
          "value": "Yes"
        },
        {
          "name": "Veterans in Household",
          "value": "Yes"
        },
        {
          "name": "People with Developmental Disabilities",
          "value": "Yes"
        }
      ]
    }
  ]
}

There are no notes for this item.