DAHLIA Pattern Library

Account Settings: Full 

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

<nav class="local-nav-container border-bottom">
    <div class="row">
        <a href=".toggle-nav" class="toggle-nav-link">My Account <span class="ui-icon ui-control ui-small i-white ">
    <svg>
      <use xlink:href="#i-arrow-down"></use>
    </svg>
  </span>
  </a>
        <ul class="local-nav toggle-nav" role="navigation">
            <li class="local-nav-item active"><a href="#">My Applications</a></li>
            <li class="local-nav-item"><a href="#">My Favorites</a></li>
            <li class="local-nav-item"><a href="#">Eligibility Settings</a class="local-nav-item"></li>
    <li class="local-nav-item"><a href="#">Account Settings</a></li>
            </dl>
    </div>
</nav>

<div class="dash-container">
    <section class="row collapse">
        <div class="medium-6 medium-centered columns fixed-width">
            <main class="dash-card">
                <header class="dash-header text-center">
                    <span class="header-badge">
              <span class="ui-icon ui-static ui-medium i-color ">
                <svg>
                  <use xlink:href="#i-settings"></use>
                </svg>
              </span>
                    </span>
                    <h1 class="dash-title no-margin">Account Settings</h1>
                </header>

                <div class="dash-card-inner full bg-dust border-bottom">
                    <div class="form-group">
                        <h2 class="form-label caps">Email Address</h2>
                        <label for="textInput" class="sr-only">Email address</label>
                        <input type="text" id="textInput" name="textInput" placeholder="example@web.com" class="" />
                        <p class="text-center padding-top">
                            <button class="button small no-margin" type="button" data-event="">Update</button>
                        </p>
                    </div>
                </div>

                <div class="dash-card-inner inset border-bottom">
                    <div class="form-group">
                        <h2 class="form-label caps">Password</h2>
                        <p class="t-small c-steel">When changing your password make sure you make note of it so you remember it in the future.</p>
                        <label for="textInput" class="sr-only">Old Password</label>
                        <input type="text" id="textInput" name="textInput" placeholder="Old Password" class="" /> <label for="textInput" class="sr-only">New Password</label>
                        <input type="text" id="textInput" name="textInput" placeholder="New Password" class="" /> <label for="textInput" class="sr-only">Confirm New Password</label>
                        <input type="text" id="textInput" name="textInput" placeholder="Confirm New Password" class="" />
                        <p class="text-center padding-top">
                            <button class="button small secondary no-margin" type="button" data-event="">Update</button>
                        </p>
                    </div>
                </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 class="form-group">
                        <p class="text-center padding-top">
                            <button class="button small secondary no-margin" type="button" data-event="">Update</button>
                        </p>
                    </div>
                </div>

                <div class="dash-card-inner inset border-bottom">
                    <div class="form-group">
                        <h2 class="form-label caps">Deactivate Account</h2>
                        <p class="t-small c-steel">Deactivating your account will mean losing all previously saved favorites and settings.</p>
                        <p class="text-center padding-top">
                            <button class="button small alert no-margin" type="button" data-event="">Deactivate</button>
                        </p>
                    </div>
                </div>
            </main>
        </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 links="true"}}
{{> @version-bar }}
{{> @top-bar--account }}

<nav class="local-nav-container border-bottom">
  <div class="row">
  {{> @local-nav}}
  </div>
</nav>

<div class="dash-container">
  <section class="row collapse">
    <div class="medium-6 medium-centered columns fixed-width">
      <main class="dash-card">
          <header class="dash-header text-center">
            <span class="header-badge">
              {{> @icons-base icon="settings" }}
            </span>
            <h1 class="dash-title no-margin">Account Settings</h1>
          </header>

          <div class="dash-card-inner full bg-dust border-bottom">
            <div class="form-group">
              <h2 class="form-label caps">Email Address</h2>
              {{> @text-input--base placeholder="example@web.com" label="Email address" type="email"}}
              <p class="text-center padding-top">
                {{> @button classes="small no-margin" text="Update"}}
              </p>
            </div>
          </div>

          <div class="dash-card-inner inset border-bottom">
            <div class="form-group">
              <h2 class="form-label caps">Password</h2>
              <p class="t-small c-steel">When changing your password make sure you make note of it so you remember it in the future.</p>
              {{> @text-input--base placeholder="Old Password" label="Old Password" type="password"}}
              {{> @text-input--base placeholder="New Password" label="New Password" type="password"}}
              {{> @text-input--base placeholder="Confirm New Password" label="Confirm New Password" type="password"}}
              <p class="text-center padding-top">
                {{> @button classes="small secondary no-margin" text="Update"}}
              </p>
            </div>
          </div>

          <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 class="form-group">
              <p class="text-center padding-top">
                {{> @button classes="small secondary no-margin" text="Update"}}
              </p>
            </div>
          </div>

          <div class="dash-card-inner inset border-bottom">
            <div class="form-group">
              <h2 class="form-label caps">Deactivate Account</h2>
              <p class="t-small c-steel">Deactivating your account will mean losing all previously saved favorites and settings.</p>
              <p class="text-center padding-top">
                {{> @button classes="small alert no-margin" text="Deactivate"}}
              </p>
          </div>
        </div>
      </main>
    </div>
  </section>
</div>

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

There are no notes for this item.