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