# 🚀 NEW ReadTime — a reading-time badge for blog posts and articles

**URL:** https://forums.realmacsoftware.com/t/new-readtime-a-reading-time-badge-for-blog-posts-and-articles/56085
**Category:** Elements Store
**Tags:** tooltips, popover, badge
**Created:** [May 12, 2026, 5:19pm UTC](https://forums.realmacsoftware.com/t/new-readtime-a-reading-time-badge-for-blog-posts-and-articles/56085 "2026-05-12T17:19:41Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)
#### Post date: [May 12, 2026, 5:19pm UTC](https://forums.realmacsoftware.com/t/new-readtime-a-reading-time-badge-for-blog-posts-and-articles/56085/1 "2026-05-12T17:19:41Z")

</div>

Hi everyone 👋

Just released ReadTime, now live on the Elements store. Quick framing: **ReadTime is a reading-time badge that reads from your actual article content.** Drop it next to your title, point it at the article body via a CSS selector, and you get a clean “5 min read” badge that updates automatically with your text.

Small component, single purpose, but with the polish I’d want from a paid utility: five visual presets, full theme integration, accessible by default, and zero setup beyond pointing at your content.

 ![ReadTime for Elements](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/f/2f75637f4ff91410b45c61643e29b0e84fccabff.jpeg)

## Five presets, full override

Five styles ready to drop:

• **Pill Soft** — rounded pill, soft background, subtle shadow. The default.

• **Pill Outlined** — same shape with a border instead of fill, transparent background. Quieter.

• **Inline Text** — no container, just inline text with optional icon. For headers where a badge would be too much.

• **Bold Badge** — solid color, prominent. For magazine-style pages where the badge is a feature, not a detail.

• **Number Display** — large minutes number with a small suffix label, stacked below or aligned inline (left/right). Editorial-friendly.

Every preset is a starting point. Padding, background, text, border, radius, and shadow each have an Override switch — flip it on and you take over the property with full theme integration. Flip it off and the preset stays in charge.

## Reads from the actual content

You give ReadTime a CSS selector for your article body (e.g. `#article-body`, `.post-content`) and it does the rest:

• **Word count** from the rendered text

• **Reading speed** configurable (default 200 wpm, adjustable for technical or list content)

• **Hide below threshold** — if the article is shorter than N minutes, the badge hides itself. No “1 min read” on a 50-word card.

• **Editable format string** with `{minutes}`, `{seconds}`, and `{words}` placeholders — supported in both the main format and the Number Display Suffix Label, so you can split tokens freely between the two lines. Localize by editing one string.

## Icon options

Optional icon with two source modes:

• **Preset icons** — six built-in Heroicons (Clock, Book Open, Bookmark, Document Text, Bookmark Square, Eye) with Outline or Solid style

• **Dropzone** — switch the source and drop any element inside (your own SVG, an emoji, a small image)

Position before or after the text, with theme spacing for size and gap.

## Accessibility & responsive

ARIA label on the wrapper communicates the full reading-time text to screen readers, including the suffix label in Number Display mode. Every visual property is responsive: padding, text size, icon size, gap — adjust per breakpoint where it matters.

## Perfect for

• Blog post headers (the obvious case)

• Knowledge base / documentation index pages

• Magazine and editorial layouts (Number Display preset)

• Tutorial pages with long step-by-step content

• Anywhere readers benefit from knowing length upfront

## Links

👉 **Live demo:** **[ReadTime for Elements - RW Pro Space](https://www.rwpro.space/preview/readtime/)**

👉 **Get ReadTime:** [**Elements Store**](elementsapp://storeProduct/space.rwpro.readtime)

Happy to answer questions or take feedback. Thanks!  
— Massimo