Examples

Complete page examples using real Figdown syntax. Each example shows a full .figdown file you can paste directly into the playground.

Landing page

A SaaS landing page with a hero, pricing cards, and a waitlist modal.

theme: light

nav:
  logo: Figdown
  link: Docs → /docs
  link: Examples → /examples
  link: Pricing → /pricing
  primary button: Get Started → [modal: waitlist]

hero:
  title: Wireframe in plain text
  subtitle: Figdown turns simple text into interactive UI mockups. No GUI, no exports — just type and see.
  large primary button: Try in playground → /playground
  large outline button: Read the docs → /docs

---

blue alert: **New in v2.0:** Multi-file support, custom themes, and folder mode.

centered title: Simple pricing

row:
  1/3 card:
    ## 🎁 Free
    Perfect for solo projects and exploration.

    full outline button: Get Started → [modal: waitlist]

  1/3 card:
    row:
      ## 🚀 Pro
      blue badge: Popular

    For teams that ship fast.

    full primary button: Start Free Trial → [modal: waitlist]

  1/3 card:
    ## 🏢 Enterprise
    Custom contracts and dedicated support.

    full outline button: Contact Sales

modal: waitlist
  ## Join the Waitlist
  email input: Your email address...
  full primary button: Reserve my spot

footer:
  logo: Figdown
  link: Docs → /docs
  link: GitHub → https://github.com

---

Settings form

A settings page with tabs, inputs, toggles, and a danger zone.

theme: light

nav:
  logo: MyApp
  link: Dashboard → /
  link: Projects → /projects
  link: Settings → /settings

breadcrumb:
  link: Home → /
  link: Settings

centered title: Account Settings

tabs: Settings
  tab: Profile
    full input: Display name...
    email input: Email address...
    full textarea: Short bio...
    tooltip: Why do we need this?
      Your bio appears on your public profile and shared project links.
    full primary button: Save changes

  tab: Notifications
    checked toggle: Email alerts
    checked toggle: Weekly digest
    toggle: Marketing emails
    toggle: Product announcements
    full primary button: Save preferences

  tab: Security
    password input: Current password...
    password input: New password...
    password input: Confirm new password...
    full primary button: Update password

    ---

    red alert: **Danger zone** — the actions below are irreversible.
    full danger button: Delete account → [modal: confirm-delete]

modal: confirm-delete
  ## Delete your account?
  This will permanently delete all your data. There is no undo.
  full danger button: Yes, delete my account
  full ghost button: Cancel

footer:
  logo: MyApp
  link: Privacy → /privacy
  link: Terms → /terms

---

Dashboard

An analytics dashboard with a sidebar, stat cards, progress bars, and a data table.

theme: light

nav:
  logo: Dashboard
  link: Overview → /
  link: Reports → /reports
  link: Team → /team
  outline button: Export → /export

1/4 sidebar:
  card:
    ## Navigation
    link: Overview → /
    link: Traffic → /traffic
    link: Revenue → /revenue
    link: Conversions → /conversions

    ---

    gray badge: Q2 2026

  card:
    ## Summary

    row:
      1/2 card:
        ## Users
        blue badge: +12%
        Total signups this month.
      1/2 card:
        ## Revenue
        green badge: +8%
        MRR vs last month.

    ---

    ## Upload progress

    green progress: Assets synced 100%
    blue progress: Reports generated 72%
    progress: Data indexed 38%

    ---

    ## Team members

    | Name   | Role    | Status |
    |--------|---------|--------|
    | Alice  | Admin   | Active |
    | Bob    | Editor  | Active |
    | Carol  | Viewer  | Paused |

    outline button: Manage team

footer:
  logo: Dashboard
  link: Help → /help
  link: Status → /status