[Additional Article Block] Decorative Inline Images Between Content (Non‑Interactive, Responsive Separators)

Non-interactive decorative image blocks for visually separating sections within articles, with responsive scaling, theme-aware presets, and no impact on analytics or accessibility.


I’d like the ability to insert decorative inline images between paragraphs or sections - functioning as visual separators, motifs, or callout dividers - that are purely aesthetic, non‑clickable, and scale responsively.

Summary
Enable a “Decorative Inline Image” block that authors can drop anywhere in the article body to create visual rhythm - without introducing links, interactions, or analytics noise. These images should expand gracefully with the viewport and preserve aspect ratio.

Problem
While headers/footers and horizontal rule banners help with page‑level structure, authors also need tasteful separators between sections. Using standard content images invites unwanted click behaviour, inconsistent sizing, and accessibility concerns.

Proposal
Add a “Decorative Inline Image” block with:

  • Placement: insertable between any two blocks in the editor (paragraphs, lists, code, etc.).

  • Behaviour: non‑interactive (no links, no pointer events, not focusable); responsive scaling within the content container.

  • Presets: thin divider, patterned rule, gradient swoosh, ornament, flourish; light/dark variants.

  • Controls: width (px/%), max‑width, height (auto/cropped), alignment (left/centre/right), margins (top/bottom), optional caption off by default.

  • Theme integration: inherits Help Center theme colours/contrast; supports per‑theme overrides.

  • Performance: srcset for responsive images, lazy‑load, CDN cache; recommend WebP/AVIF.

  • Accessibility: role=“presentation” or empty alt by default; excluded from reading order.

  • Editor UX: quick‑insert (“/decorative”), drag‑to‑reposition, duplicate, style picker.

Functional Requirements

  1. Inline decorative images are not clickable and cannot contain links.

  2. They scale with the content column and maintain aspect ratio; honour max‑width settings.

  3. They are excluded from interaction analytics; optional viewport‑presence metric only.

  4. Default accessibility treats them as decorative and unfocusable.

  5. Lazy‑load unless near the top; optimised formats preferred.

User Stories

  • As an author, I can insert a stylish divider between two sections to improve scannability without adding interactive elements.

  • As a designer, I can choose from presets that match our brand motif and adjust spacing and alignment quickly.

  • As a site admin, I can ensure these separators don’t skew analytics, SEO, or accessibility ratings.

Acceptance Criteria

  • No hand cursor, no click events, no tabindex; pointer-events disabled.

  • Responsive behaviour on resize/maximise; aspect ratio preserved.

  • Simple editor controls for placement, style, alignment, margins, and sizing.

  • Works across themes; presets adapt to light/dark modes.

  • Minimal LCP impact and proper lazy‑loading below the fold.

Value

  • Enhances readability and brand expression within the article body.

  • Avoids ad‑hoc image hacks that compromise accessibility and performance.

  • Gives teams a consistent, elegant way to structure long content with visual relief.

Post type
💡 New feature

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board

Help Center

Date

3 months ago

Author

Michelle

Subscribe to post

Get notified by email when there are changes.