ReadTime in Action
Five presets and a few real layouts. Same component, different feel for blog posts, docs, and magazine pages.
All Demos
Demo project file included
5 min read next to your article title — calculated from the actual content, styled to match your design, accessible by default.
Anywhere you publish long-form content and want readers to know what they're getting into.
A clean badge under the title or in the post header. Updates automatically with the article body — no manual count, no plugin required.
Help readers prioritize what to read first. Hide the badge below a configurable minimum so short FAQ pages don't show 1 min read when it's overkill.
A Number Display preset shows the minutes count large, with a quiet min read suffix below — perfect for editorial designs.
Step-by-step content with code blocks reads slower than prose. Lower the reading-speed slider (around 150 wpm for code-heavy material) and your estimate reflects real comprehension time, not generic average.
Five visual styles ready to drop, plus per-property override on every detail.
Pill Soft, Pill Outlined, Inline Text, Bold Badge, Number Display. Each one is a complete starting point — switch between them with one click.
Padding, background, text, border, radius, shadow — each group has an Override switch. Off = the preset stays in charge. On = you take over with full theme integration.
A two-line layout for editorial designs: large minutes number, smaller suffix label below. Fully independent color and typography per line — and both lines accept the same placeholders so you can mix tokens freely between them.
Point it at your article text. ReadTime does the math.
Tell ReadTime where your content lives via a CSS selector (e.g. #article-body, .post-content). It reads the rendered text, counts words, and updates the badge automatically.
Default 200 words per minute (the standard average). Adjust for technical content (slower) or list-style content (faster).
Set a minimum reading time. If the article is shorter, the badge hides itself. No 1 min read on a 50-word card.
Stay open or close on a timer — your call.
Templates with {minutes}, {seconds}, and {words} placeholders. Localize for any language by editing one string.
Six icons ready to drop: Clock, Book Open, Bookmark, Document Text, Bookmark Square, Eye. Outline or Solid style. Position before or after the text.
If the built-ins don't fit, switch the icon source to Dropzone and place anything inside — your own SVG, an emoji wrapper, a small image.
Five presets and a few real layouts. Same component, different feel for blog posts, docs, and magazine pages.
Demo project file included
Everything you need to know about the ReadTime component.
A reading-time badge for articles and blog posts — calculated from your actual content.
Discover our components for Elements and take your page design to the next level.
ReadTime, a reading-time badge that just works
© RW Pro Space • All rights reserved
