Settings beta

<div class="k-tpl2">
  <aside class="k-tpl2-side">
    <h2>Settings</h2>
    <p class="k-tpl2-sub">Workspace preferences for Acme Studio.</p>
    <nav class="k-tpl2-nav">
      <a href="#" class="on">Profile</a>
      <a href="#">Account</a>
      <a href="#">Notifications</a>
      <a href="#">Billing</a>
      <a href="#">API keys</a>
    </nav>
  </aside>
  <div class="k-tpl2-main">
    <section class="k-tpl2-card">
      <h3>Profile</h3>
      <p class="k-tpl2-csub">How you appear across the workspace.</p>
      <div class="k-tpl2-avarow"><span class="k-avatar" data-size="lg">AK</span><div><button class="btn btn-sec btn-sm" type="button">Change photo</button><p class="k-tpl2-note">PNG or JPG, at least 256 × 256.</p></div></div>
      <div class="k-tpl2-form">
        <div class="k-field">
          <label class="lab" for="sp-name">Display name</label>
          <input class="input" id="sp-name" type="text" value="Aoi Kimura">
        </div>
        <div class="k-field">
          <label class="lab" for="sp-mail">Email</label>
          <input class="input" id="sp-mail" type="email" value="[email protected]">
          <p class="hint">Used for sign-in and receipts.</p>
        </div>
        <div class="k-field">
          <label class="lab" for="sp-bio">Bio <span class="opt">Optional</span></label>
          <textarea class="k-textarea" id="sp-bio" rows="3">Product designer. I keep the design system honest.</textarea>
        </div>
      </div>
      <div class="k-tpl2-actions"><button class="btn btn-pri" type="button">Save changes</button><button class="btn btn-ghost" type="button">Cancel</button></div>
    </section>
    <section class="k-tpl2-card">
      <h3>Notifications &amp; language</h3>
      <p class="k-tpl2-csub">What reaches your inbox, and in which language.</p>
      <div class="k-tpl2-row"><div><b>Mentions</b><p>Email me when someone mentions me in a comment or a doc.</p></div><label class="switch"><input type="checkbox" checked><span class="tr"></span></label></div><div class="k-tpl2-row"><div><b>Product updates</b><p>A short email when new features ship. About once a month.</p></div><label class="switch"><input type="checkbox"><span class="tr"></span></label></div><div class="k-tpl2-row"><div><b>Weekly summary</b><p>Every Monday: what shipped, what is blocked, what is next.</p></div><label class="switch"><input type="checkbox" checked><span class="tr"></span></label></div><div class="k-tpl2-row"><div><b>Language</b><p>The interface language for this workspace.</p></div><span class="k-select"><select aria-label="Language"><option selected>English</option><option>Japanese</option><option>German</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></div>
    </section>
    <section class="k-tpl2-card">
      <h3>Danger zone</h3>
      <p class="k-tpl2-csub">Irreversible actions live here.</p>
      <div class="k-alert" data-tone="warning"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.8 20h18.4L12 4Z"/><path d="M12 10v4.4M12 17.2h.01"/></svg><div><b>Deleting the workspace removes everything.</b><p>Projects, invoices and files are gone for every member. There is no undo and no grace period.</p></div></div>
      <div class="k-tpl2-actions"><button class="btn btn-danger" type="button">Delete workspace</button></div>
    </section>
  </div>
</div>