Dialog

<button class="btn primary" type="button" data-open="demo_edit">Edit project</button>
<dialog id="demo_edit">
  <div class="sheet">
    <div class="grabber" aria-hidden="true"></div>
    <p class="eyebrow">proj-atlas-01</p>
    <h2 style="margin-bottom:16px">Edit Atlas</h2>
    <form class="stack" method="dialog">
      <div class="two">
        <label class="field">
          <span>Name</span>
          <input type="text" value="Atlas">
        </label>
        <label class="field">
          <span>Plan</span>
          <select>
            <option>Starter</option>
            <option>Team</option>
          </select>
        </label>
      </div>
      <label class="check">
        <input type="checkbox">
        <span>Also notify by email</span>
      </label>
      <div class="btn-row end">
        <button class="btn" type="button" data-close>Cancel</button>
        <button class="btn primary" type="submit">Save</button>
      </div>
    </form>
  </div>
</dialog>

<button class="btn" type="button" data-open="demo_code">Invite code</button>
<dialog id="demo_code">
  <div class="sheet">
    <div class="grabber" aria-hidden="true"></div>
    <p class="eyebrow">proj-atlas-01</p>
    <h2>Invite code</h2>
    <p class="code-plate mono">483 920</p>
    <div class="notice info small" style="margin-top:14px">Works once, for 15 min.</div>
    <div class="btn-row end">
      <button class="btn" type="button" data-close>Done</button>
    </div>
  </div>
</dialog>