THINKTANK · FRAMER COMMUNITY · FREE
How to use Doc Block
Seven steps to drop in your first block and build a full documentation page from there.
01
Add the component
Insert Doc Block from your Assets/Insert panel onto any page. Each instance renders one block — you'll stack several to build a full page.
02
Pick a Block Type
Switch between Heading, Body Text, Callout, Code, and Divider using the Block Type control in the right panel. The property panel only shows the fields relevant to whichever type you've picked.
03
Fill in your content
Heading: eyebrow + heading text + level (H2/H3). Body: text + optional Lead style. Callout: type (Info/Tip/Warning/Danger) + title + body. Code: the snippet + a language label. Divider: an optional caption for a "next section" link.
04
Control line length
Max Width caps how wide the block reads (default 680px), independent of how wide its container actually is — keeps long-form text comfortable to read without needing a narrow column layout.
05
Match your brand
Set Accent Color plus the light-mode Text (Primary/Secondary/Muted) and Border colors to match your site. Dark mode uses a curated palette automatically — it isn't buyer-configurable, by design, so it always stays legible.
06
Let it auto-detect theme
Leave Theme on System (Auto) to follow whatever background the block is placed on. Force Light or Dark instead if you need one specific look regardless of the page it ends up on.
07
Stack as many as you need
Place instances vertically to build a full page — headings, paragraphs, callouts, code snippets, and dividers, in any order, as many times as your content needs.
Still stuck?
Every field has inline help text in Framer's own property panel — hover any control label for a short description of what it does.