THINKTANK · FRAMER COMMUNITY · FREE

Practical Ui Doc Block

Practical Ui Doc Block

A single typographic content block for documentation, changelogs, and help centers. Heading, Body, Callout, Code, or Divider — stack as many as your page needs. Fully light and dark mode aware.

System · Light · Dark Aware

01 — Heading

H2 for sections, H3 for sub-sections — both support an optional eyebrow label above.

Getting started

Connecting your workspace

02 — Body text

Lead style for intro paragraphs, regular for everything else.

Before you can sync data, your workspace needs a valid API key and at least one connected project.

Every request is scoped to a single workspace. If you're switching between environments, double check the key in your settings panel matches the one shown in the dashboard header.

03 — Callout

Four types — Info, Tip, Warning, Danger — each with its own tint and icon.

Info

Workspace keys rotate every 90 days automatically.

Tip

Use a read-only key for anything client-side.

Warning

Revoking a key breaks every project using it immediately.

Danger

Deleting a workspace is permanent and cannot be undone.

04 — Code

Language label plus a one-click copy button — adapts to light or dark automatically, same as the rest of the block.

bash
curl https://api.example.com/v1/sync -H "Authorization: Bearer $KEY"

05 — Divider

A plain rule, or add a caption for a "next section" link.


Next: setting up your first automation →

Put it together

Stack instances vertically to build a full page — like this section, built entirely from Doc Block above.

Best practices

Keep callouts short and scannable — one idea per block. Use Danger sparingly, only for genuinely irreversible actions.

Create a free website with Framer, the website builder loved by startups, designers and agencies.