DAHLIA Pattern Library

Account Create: 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 top-bar class="top-bar" role="navigation">
    <div class="row">
        <ul class="title-area">
            <li class="name">
                <h1 class="name-logo is-tall is-offset-up t-alt-sans"><a href="/pages/home.html">SF Affordable Housing Portal</a></h1>
            </li>
            <li class="toggle-topbar menu-icon">
                <button href="#" class="button-link t-caps t-bold">
          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/get-assistance.html">
            My Favorites
          </a>
                </li>
                <li>
                    <a href="/pages/get-assistance.html">
            Get Assistance
          </a>
                </li>
                <li has-dropdown>
                    <a href="#" aria-haspopup="true" dropdown-toggle="#my-account-dropdown">
            My Account
          </a>
                    <ul class="dropdown" id="my-account-dropdown">
                    </ul>
                </li>
            </ul>
        </section>
    </div>
</nav>

<div class="dash-container tall">
    <section class="row collapse">
        <div class="medium-6 medium-centered columns fixed-width">
            <div class="back-link-container small-only-text-center">
                <a href="#" class="back-link"><span class="ui-icon ui-static ui-small i-primary ">
  <svg>
    <use xlink:href="#i-left"></use>
  </svg>
</span>
 Continue with Application</a>
            </div>
            <form class="dash-card">
                <header class="dash-header">
                    <span class="header-badge">
            <span class="ui-icon ui-static ui-medium i-color ">
              <svg>
                <use xlink:href="#i-profile"></use>
              </svg>
            </span>
                    </span>
                    <h1 class="dash-title" ">Create an Account</h1>
          <p class="dash-summary ">You'll use this information to log in to your account, so make sure you can remember it.</p>
        </header>

        <div data-alert class="alert-box success invert no-margin ">
          <span class="alert-icon ui-icon ui-medium ">
            <svg>
              <use xlink:href="#i-check "></use>
            </svg>
          </span>
          <p class="alert-body ">
            Changes will be reflected in any applications in progress.
          </p>
          <a href="# " class="close ">&times;</a>
        </div>

        <div class="dash-card-inner inset border-bottom ">
          <div class="form-group padding-bottom--2x ">
            <h2 class="form-label caps ">Your Name</h2>
            <label for="textInput " class="sr-only ">Email address</label>
            <input type="text " id="textInput " name="textInput " placeholder="First Name " class=" "  />            <label for="textInput " class="sr-only ">Middle Name (optional)</label>
            <input type="text " id="textInput " name="textInput " placeholder="Middle Name (optional) " class=" "  />            <label for="textInput " class="sr-only ">Last Name</label>
            <input type="text " id="textInput " name="textInput " placeholder="Last Name " class=" "  />          </div>

          <div class="form-group ">
            <h2 class="form-label caps ">Your Date of Birth</h2>
            <div class="form-date-of-birth row collapse ">
              <div class="form-group-month large-2 columns ">
                <label for="date_of_birth_1 " class="sr-only ">MM</label>
                <input type="number " name="date_of_birth_1 " min="1 " max="12 " placeholder="MM "  />
              </div>
              <div class="form-group-day large-2 columns ">
                <label for="date_of_birth_2 " class="sr-only ">DD</label>
                <input type="number " name="date_of_birth_2 " min="1 " max="31 " placeholder="DD "  />
              </div>
              <div class="form-group-year large-2 columns end ">
                <label for="date_of_birth_3 " class="sr-only ">YYYY</label>
                <input type="number " name="date_of_birth_3 " min="1900 " max="2016 " placeholder="YYYY "  />
              </div>
            </div>
          </div>
        </div>

        <div class="dash-card-inner inset border-bottom ">
          <div class="form-group ">
            <h3 class="form-label caps ">Email Address</h3>
            <label for="textInput " class="sr-only ">Email address</label>
            <input type="text " id="textInput " name="textInput " placeholder="example@web.com " class=" "  />            <label for="textInput " class="label-secondary ">Re-enter email address</label>
            <input type="text " id="textInput " name="textInput " placeholder="example@web.com " aria-describedby="described-id " />
          </div>
        </div>
        <div class="dash-card-inner inset border-bottom ">
          <div class="form-group ">
            <h3 class="form-label caps ">Password</h3>
            <p class="form-note margin-bottom ">Must be at least 8 characters and include 1 numeric character.</p>

            <label for="textInput " class="sr-only ">password</label>
            <input type="text " id="textInput " name="textInput " placeholder="Must be 8 characters " class=" "  />            <label for="textInput " class="label-secondary ">Re-enter your password to confirm</label>
            <input type="text " id="textInput " name="textInput " placeholder="Must be 8 characters " aria-describedby="described-id " />
          </div>

          <div class="form-group ">
            <p class="t-small c-steel text-center padding-top "><button class="button primary no-margin "  type="button " data-event=" ">Create Account</button>
</p>
          </div>
        </div>

        <footer class="dash-header ">
          <h2 class="dash-title t-gamma ">Already have an account?</h2>
          <p class="t-small c-steel "><button class="button no-margin "  type="button " data-event=" ">Sign In</button>
</p>
        </footer>
      </form>
    </div>
  </section>    
</div>

<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--account }}

<div class="dash-container tall">
  <section class="row collapse">
    <div class="medium-6 medium-centered columns fixed-width">
      <div class="back-link-container small-only-text-center">
        <a href="#" class="back-link">{{> @icons-base icon="left" size="small" fill="primary"}} Continue with Application</a>
      </div>
      <form class="dash-card">
        <header class="dash-header">
          <span class="header-badge">
            {{> @icons-base icon="profile" }}
          </span>
          <h1 class="dash-title"">Create an Account</h1>
          <p class="dash-summary">You'll use this information to log in to your account, so make sure you can remember it.</p>
        </header>

        {{> @alert-box status="success" classes="invert no-margin" text="Changes will be reflected in any applications in progress." icon="check"}}

        <div class="dash-card-inner inset border-bottom">
          <div class="form-group padding-bottom--2x">
            <h2 class="form-label caps">Your Name</h2>
            {{> @text-input--base placeholder="First Name" label="Email address" type="text"}}
            {{> @text-input--base placeholder="Middle Name (optional)" label="Middle Name (optional)" type="text"}}
            {{> @text-input--base placeholder="Last Name" label="Last Name" type="text"}}
          </div>

          <div class="form-group">
            <h2 class="form-label caps">Your Date of Birth</h2>
            {{> @input-dob}}
          </div>
        </div>

        <div class="dash-card-inner inset border-bottom">
          <div class="form-group">
            <h3 class="form-label caps">Email Address</h3>
            {{> @text-input--base placeholder="example@web.com" label="Email address" type="email"}}
            {{> @text-input placeholder="example@web.com" label="Re-enter email address" type="email" classes="label-secondary"}}
          </div>
        </div>
        <div class="dash-card-inner inset border-bottom">
          <div class="form-group">
            <h3 class="form-label caps">Password</h3>
            <p class="form-note margin-bottom">Must be at least 8 characters and include 1 numeric character.</p>

            {{> @text-input--base placeholder="Must be 8 characters" label="password"}}
            {{> @text-input placeholder="Must be 8 characters" label="Re-enter your password to confirm" classes="label-secondary"}}
          </div>

          <div class="form-group">
            <p class="t-small c-steel text-center padding-top">{{> @button text="Create Account" classes="primary no-margin" }}</p>
          </div>
        </div>

        <footer class="dash-header">
          <h2 class="dash-title t-gamma">Already have an account?</h2>
          <p class="t-small c-steel">{{> @button text="Sign In" classes="no-margin" }}</p>
        </footer>
      </form>
    </div>
  </section>    
</div>

{{> @footer}}
 
{
  "page-class": "center-body",
  "label": "Create an Account"
}

There are no notes for this item.