Blog Contents Kit · Documentation · Version 1.0

A table of contents for your CMS articles.

How Article Body gives every heading an anchor, the three layouts of the contents, Reading Time, every setting, and fixes for the usual problems.

Get Blog Contents Kit

Live preview ↗

Start here.

Add it to your project. Open the link in your purchase email (or the Marketplace page). You get four components: Article Body, Table of Contents (Blog Contents Kit), Reading Progress and Reading Time.
Show the article with Article Body. On your blog’s CMS page, put Article Body where the article text goes and connect Body to the article’s formatted text field.
Place the Table of Contents. In a sidebar, above the article, or in a sticky bar on phones. It lists the article’s headings on its own.
Add Reading Progress and Reading Time if you like: a bar at the top of the page and “6 min read” next to the date. Publish, and every heading has a link, the contents follow the reader and the reading time is worked out for you.

How it works.

Framer’s formatted text doesn’t give headings an anchor, so a table of contents has nothing to link to. Article Body shows your article from the CMS and gives every H2, H3 and H4 an id made from its text, like #into-the-wood-oven.

The Table of Contents, Reading Progress and Reading Time read those headings and that text from the Article Body with the same Kit name. You connect the CMS field once; the others need nothing.

The anchors stay the same while the heading text stays the same, so links to a section keep working after you republish.
No API keys, no backend, no tracking. The components make no network requests and only look at the article Article Body shows.

Article Body.

Article Body replaces Framer’s text block for the article. It shows everything your formatted text field holds: headings, paragraphs, lists, quotes, links, images, code and tables.

Connect Body

To the formatted text field of your CMS collection. On a CMS page it shows that item’s article; in a Collection List item it shows that item’s.

Typography

Text font, H2, H3 and H4 fonts and Quote font, with your colours for text, headings, links, muted text, the quote bar and lines.

Spacing

Paragraph gap and Heading gap, in em, so they grow with the text size.

Heading links

A # appears after a heading on hover. A click copies the link to that section and shows “Link copied” for a moment. Turn it off in the panel; Copied text changes the message.

Drop cap

A large first letter in the accent colour, for an editorial look.

Quotes

Bar puts a line beside each quote; Large sets it bigger with an accent quote mark.

Image captions

Framer’s formatted text keeps images but not captions. Write the caption as a line in italics right after the image, and Article Body shows it as a caption.

Images

Load as they come near the screen, so long articles stay fast.

Without Body connected, the canvas shows a demo article so you can design. The published site shows only your article.

Table of Contents.

The main component, Blog Contents Kit, lists the headings of the Article Body with the same Kit name.

Headings

H2 only, or H2 + H3. If your article starts at H3, H3 is the top level.

Current section

While someone reads, the section on screen is highlighted. Rail draws a line that fills down to it, with a dot; Line and Dot mark only that section; None leaves just the colour. Current: Pill adds a soft background behind it.

Smooth scroll

A click scrolls to the section, smoothly unless the visitor prefers reduced motion. Offset leaves room above it for a sticky header.

Progress bar

An optional bar below the contents shows how much of the article has been read.

Numbers

1., 2., 2.1 for long guides.

Layouts

List

A plain list with an optional title. For a sidebar: make its parent sticky in Framer and it stays in view while the article scrolls.

Box

A box that folds open, for the top of an article without a sidebar. Start open decides how it loads.

Bar

A bar that shows the section you’re reading and opens the list on tap. For a sticky bar on phones.

Reading Progress.

A thin bar that fills as the Article Body with the same Kit name is read, from its first line to its last. Put it in a frame that is sticky or fixed at the top of the page in Framer, so it stays in view. Bar height, Color, Track and Rounded set its look.

Reading Time.

Shows “6 min read” for the Article Body with the same Kit name. Words / min sets the reading speed, 220 by default. {minutes} in Label becomes the number, so you can write “Lectura de {minutes} min”.

Kit name.

The three components find each other through Kit name, “article” by default on all of them. With two articles on one page, give each Article Body its own name, and its Table of Contents and Reading Time the matching one.

Settings reference.

Article Body

Kit name, Body (connect to the formatted text field).
Heading links, Copied text, Link label (read by screen readers; {title} is the heading).
Drop cap, Quotes (Bar or Large).
Text, Headings, Muted, Links, Accent, Lines, Code.
Paragraph gap, Heading gap, Image radius.
Text font, H2 font, H3 font, H4 font, Quote font.

Table of Contents

Kit name.
Headings — H2, or H2 + H3.
Layout — List, Box or Bar.
Marker — Rail, Line, Dot or None.
Current — Text or Pill, and the Pill colour.
Numbers, Title (List), Progress bar, Start open (Box).
Offset — room above a section after a click, in px.
Smooth scroll.
Text, Muted, Active, Lines, and Background, Border, Radius, Padding for Box and Bar.
Title font, Item font.
Title text, Open label and Close label (Box and Bar, read by screen readers), Nav label (read by screen readers).

Reading Progress

Kit name, Bar height, Color, Track, Rounded.

Reading Time

Kit name, Words / min, Label, Color, Font.

Languages

Every label is a property, so Framer Localization translates it like any other text.
Anchors are made from the heading text in each language, so the Spanish page has Spanish anchors.
Reading Time counts the words of the language on screen.

Privacy

The components send nothing anywhere. They make no network requests, store nothing in the visitor’s browser and set no cookies.

Accessibility

The contents are a nav with its own label, and the current section is marked with aria-current.
A click moves keyboard focus to the section, so screen readers continue from there.
Box and Bar open and close with a button that says whether it’s open.
Heading links have names, like “Link to Into the wood oven”.
Smooth scrolling is turned off for visitors who prefer reduced motion.
“Link copied” is announced to screen readers.

Troubleshooting

“Add an Article Body with the same Kit name to this page.”

The canvas shows demo headings because no Article Body was found. Check the Kit names.

The contents are empty on the published page

The article has no H2 or H3 headings, or Body isn’t connected.

The demo article shows on the canvas

Body isn’t connected to a formatted text field.

A click lands under my sticky header

Raise Offset to the header’s height plus a little air.

The current section changes too early or too late

It changes when a heading passes the Offset line. Match Offset to your sticky header.

The sidebar scrolls away

Make the frame that holds the contents sticky in Framer (Position: Sticky, with a top value), and check its parents don’t clip their content.

My text styles don’t apply

Article Body styles the article with its own fonts and colours. Set them in its panel.

Updates

New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.

1.0 · October 2026 — First release: Article Body with heading anchors, drop cap, large quotes and image captions; Table of Contents in three layouts with a rail, the current section, smooth scroll, offset and progress; Reading Progress and Reading Time.

Support and licence.

Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.