← All templates

Settings Page

Tabbed settings layout with profile form and a danger zone section.

Settings
Open in editor →
Start typing to see your wireframe…

The Wiremark source

This is the entire template — edit it live in the editor, or paste it into any .wiremark file.

wiremarkUI
  sidebar SD {
    nav "Dashboard"
    nav "Settings" active
  }
  header H "Settings"

  page SETTINGS "Settings" {
    H
    SD

    tabs "Settings" {
      tab "Profile" active
      tab "Security"
      tab "Notifications"
      tab "Billing"
      tab "API"
    }

    section "Profile" {
      form "Personal Information" {
        input "Full name"
        input "Email address"
        input "Job title"
        select "Timezone"
        button "Save changes" primary
        button "Cancel"
      }
    }

    section "Danger Zone" {
      card "Delete account" {
        text "Permanently delete your account and all associated data."
        button "Delete account" disabled
      }
    }
  }