Page modes

Every page can set a mode in its frontmatter, for how much of the site’s frame - topbar, sidebar, table of contents - is around it. Useful for pages that aren’t ordinary prose - a wide reference table, a standalone policy page, a hand-built homepage, an auth screen.

---
title: My Page
mode: wide
---

wide

Drops the table of contents and widens the article column - useful for a page with a wide table, side-by-side images, or anything that feels cramped at the normal reading width. The sidebar and topbar are unchanged.

frame

Drops the sidebar and table of contents, and keeps the topbar and the page’s usual width, centered. Good for a standalone page that doesn’t belong in the sidebar’s hierarchy (a terms-of-service page, a single long guide linked from elsewhere) and doesn’t need its own table of contents.

custom

Drops the sidebar, table of contents, the automatically-rendered <h1> (built from frontmatter title), and the prev/next navigation at the bottom of the article. The article’s own prose width/padding is skipped too - full width, blank canvas below the topbar. The topbar itself stays, so branding, search, and the theme toggle are still available. Meant for a page built entirely out of components (Card, CardGroup, hand-written HTML/CSS) rather than read top-to-bottom like a document - a homepage or marketing landing page that’s still recognizably part of the site.

title is still used in custom mode - for the <title> tag, navigation labels, and meta tags - it’s just never auto-rendered as a heading on the page itself.

---
title: Welcome
mode: custom
---

<div style="max-width: 900px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center;">
  <h1>Your product name</h1>
  <p>A one-line pitch.</p>
  <CardGroup cols={3}>
    <Card title="Get started" href="/docs/quickstart/" />
    <Card title="API reference" href="/api/" />
    <Card title="Guides" href="/guides/" />
  </CardGroup>
</div>

blank

Everything custom drops, plus the topbar and footer - nothing of the site around the page, just its own content. For something that should look nothing like the rest of the site: a login/auth screen, a print-friendly page, a standalone embed.

---
title: Sign in
mode: blank
---

<div style="max-width: 400px; margin: 10vh auto;">
  <!-- a completely custom sign-in form, no site branding at all -->
</div>

What else changes

• The Copy page menu sits next to the page’s title, so custom and blank pages, which have no title, don’t show it. Their Markdown copy still exists.
• On a phone, frame and custom pages still have the menu button in the topbar, for the site’s navigation.
• Panel, RequestExample and ResponseExample use the right-hand column, so outside default mode they stay in the page.