Method
A sample page demonstrating every inline component. Open it in the Admin to see how each one is inserted, and copy the patterns into your own pages.
This page exists so you can see every inline component in action. Each one is inserted from the + menu in the body editor in the Admin.
1 · Callout
2 · Pull quote
You have power over your mind — not outside events. Realize this, and you will find strength.
3 · Stats band
A row of big numbers for study summaries or at-a-glance metrics.
4 · Card grid
Small linked cards for "further reading" sections.
5 · Figure with caption
6 · Video embed
Paste a YouTube or Vimeo URL — it renders an in-page player. The video stays hosted on YouTube/Vimeo (no bandwidth cost to you).
7 · Citation
For formatted references at the end of a write-up.
A representative study on the topic Untitled paper without a link8 · Interactive tool (HTML embed)
Drop a self-contained .html file — like a calculator built in Claude Design — into the repo and embed it here as a responsive, auto-resizing iframe. It works on both mobile and desktop, and the height fits the tool's content automatically, so there are no inner scrollbars.
Where the files go. Put each tool in its own folder under public/tools/, with the file named index.html. Any images or assets the tool needs go in that same folder:
public/
└── tools/
└── peptide-calculator/ (your folder name becomes the URL)
└── index.html (the file from Claude Design, renamed)
That tool is then served at /tools/peptide-calculator/. To add one from GitHub: open public/tools/, create a new folder, and upload your .html as index.html.
How to embed it. Insert the Interactive tool (HTML embed) block from the + menu in the body editor, then set:
- Source path — the folder path, with the trailing slash:
/tools/peptide-calculator/ - Title — a short label (for screen-reader accessibility)
- Minimum height — a fallback height; the iframe grows past this to fit the content
The live example below points at the bundled sample tool at /tools/sample/. Resize the window or open it on a phone to see it reflow:
The sample lives at public/tools/sample/index.html — open it to see how a self-contained tool is structured, then replace it with your own.
9 · PDF viewer
Embed a PDF inline. On desktop it renders in the browser's built-in viewer; on mobile, browsers often won't show it inline, so a clear Open the PDF link always appears beneath as a fallback.
Where the files go. Drop the .pdf into public/files/:
public/
└── files/
└── paper.pdf
It's then served at /files/paper.pdf. Upload it via GitHub the same way as the tools.
How to embed it. Insert the PDF viewer block from the + menu, then set the PDF path (e.g. /files/paper.pdf), an optional title, and the viewer height.
Live example, pointing at the bundled /files/sample.pdf:
10 · Looping video (sample)
A short, self-hosted looping clip — muted, autoplaying, seamless — to show how motion sits on a page. This one is a subtle placeholder in your palette; a real product clip would slot into the same kind of spot.
(This reuses the interactive-tool embed just to give you a feel. For real product videos we'd add a dedicated, simpler video block.)
When you're done exploring, delete this page from the Admin and start writing your own.