<div class="page page-settings" data-name="settings">
  <div class="navbar navbar-large">
    <div class="navbar-bg">
    </div>
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon f7-icons arrow-back">arrow_left</i>
        </a>
      </div>
      <div class="title">Settings</div>
      <div class="title-large">
        <div class="title-large-text">Settings</div>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="settings-header">
      <div class="settings-image">
        <img src="https://yui.xioyuna.com/template/img/avatars/1.jpg" alt="">
        <a href="#" class="link edit-profile-image">
          <i class="icon f7-icons">pencil</i>
        </a>
      </div>
      <div class="settings-name">Noah Campbell</div>
      <div class="settings-email">ncampbell@envato.com</div>
    </div>
    <div class="list links-list colored-icons-list settings-list list-outline list-dividers full-width">
      <ul>
        <li>
          <a href="#">
            <div class="colored-icon blue">
              <i class="icon f7-icons">globe</i>
            </div>Language
            <div class="item-after">English</div>
          </a>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="colored-icon red">
              <i class="icon f7-icons">bell_fill</i>
            </div>
            <div class="item-title">Notifications</div>
            <div class="item-after">
              <label class="toggle toggle-init color-green">
                <input type="checkbox" checked="">
                <span class="toggle-icon">
                </span>
              </label>
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="colored-icon orange">
              <i class="icon f7-icons">location_fill</i>
            </div>
            <div class="item-title">Location</div>
            <div class="item-after">
              <label class="toggle toggle-init color-green">
                <input type="checkbox" checked="">
                <span class="toggle-icon">
                </span>
              </label>
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="colored-icon blue">
              <i class="icon f7-icons">hand_raised_fill</i>
            </div>
            <div class="item-title">Private Mode</div>
            <div class="item-after">
              <label class="toggle toggle-init color-green">
                <input type="checkbox">
                <span class="toggle-icon">
                </span>
              </label>
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="colored-icon pink">
              <i class="icon f7-icons">speaker_2_fill</i>
            </div>
            <div class="item-title">Sounds</div>
            <div class="item-after">
              <label class="toggle toggle-init color-green">
                <input type="checkbox" checked="">
                <span class="toggle-icon">
                </span>
              </label>
            </div>
          </div>
        </li>
        <li>
          <a href="#">
            <div class="colored-icon blue">
              <i class="icon f7-icons">shield_lefthalf_fill</i>
            </div>Privacy & Security</a>
        </li>
        <li>
          <a href="#">
            <div class="colored-icon orange">
              <i class="icon f7-icons">arrow_2_circlepath</i>
            </div>Updates
            <div class="item-after">Automatic</div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="colored-icon gray">
              <i class="icon f7-icons">gear</i>
            </div>Version
            <div class="item-after">v2.3.7</div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="colored-icon green">
              <i class="icon f7-icons">doc_text_fill</i>
            </div>Terms Of Service</a>
        </li>
        <li>
          <a href="#">
            <div class="colored-icon purple">
              <i class="icon f7-icons">star_fill</i>
            </div>Rate The App</a>
        </li>
      </ul>
    </div>
  </div>
</div>