Modern Content Blocks for Confluence — User Guide
Installation
- Install Modern Content Blocks for Confluence from the Atlassian Marketplace
- Once installed, the macros are available in the Confluence macro browser
- The app detects your license tier automatically — Standard (free for teams ≤10) or Advanced. No configuration needed.
Quick Start
- Edit any Confluence page
- Type
/followed by what you want —/button,/gallery,/tabs, etc. — to find a macro fast. Or type/modernto see all 23 macros from this app at once. - Select a macro, configure it, and click Save
- A live preview updates in real time as you change settings
Editions — Free vs Paid
Modern Content Blocks comes in two editions, unlocked automatically by your Marketplace license.
Standard
Includes 16 macros — all the formatting blocks, page-builder macros (hero, pricing table, tabs, countdown, FAQ, and more), plus all 5 theme presets.
- Free for teams of 10 or fewer users
- Paid for larger teams
Advanced
Everything in Standard, plus 7 premium macros — Card Grid (with carousel), Team Showcase, Image Gallery (masonry + lightbox), QR Code, Annotation, Article (with bilingual mode), and Form (with submissions dashboard). Also unlocks the Theme Editor with custom color, font, spacing, and shadow controls.
- Paid license
What happens when someone on a Standard license views an Advanced macro? They see a friendly "Upgrade Required" message. The rest of the page renders normally.
Theme Editor
Access the theme editor from the app's global page in Confluence. It controls the visual identity of all MCB macros on your site.
Requires Advanced license. On the Standard tier, the Theme Editor page shows an upgrade prompt.
Theme Presets
| Preset | Primary Color | Border Radius | Feel |
|---|---|---|---|
| Default | Blue (#0052CC) | Rounded (8px) | Clean and professional |
| Dark | Dark tones | Rounded | Sleek dark mode |
| Minimal | Gray | Sharp (0px) | Ultra-clean, no distractions |
| Bold | Red (#E11D48) | Rounded | Strong visual impact |
| Pastel | Light blue (#0891B2) | Pill (rounded) | Soft and friendly |
Custom Settings
| Setting | Options | Description |
|---|---|---|
| Primary Color | Color picker + 6 preset swatches | Accent color used across all macros |
| Dark Primary Color | Color picker (optional) | Separate accent for dark mode; falls back to Primary if unset |
| Border Radius | Sharp / Rounded / Pill | Corner rounding for buttons, cards, panels |
| Font Family | 15 bundled Google Fonts + system stack | Base font for all macro text — fonts lazy-load on first use |
| Spacing Scale | Compact / Normal / Comfortable | Controls padding and margins globally |
| Shadow Intensity | None / Subtle / Medium | Drop shadow depth on cards and panels |
Dark / Light Mode
MCB automatically detects your Confluence theme (light or dark) and adjusts all colors accordingly. No manual configuration needed.
Macros
Button [Standard]
A customizable call-to-action button with link support.
| Setting | Options | Default |
|---|---|---|
| Button Text | Free text (required) | "Click me" |
| URL | Any URL | — |
| Button Style | Primary / Secondary / Outline / Ghost / Link | Primary |
| Size | Small / Medium / Large | Medium |
| Alignment | Left / Center / Right | Left |
| Background Color | Color picker | #0052CC |
| Text Color | Color picker | #FFFFFF |
| Border Radius | Custom (e.g., "8px") | Theme default |
| Animation | None / Hover Lift / Pulse / Bounce / Glow | None |
| Link Behavior | Same Window / New Window | Same Window |
Button Group [Standard]
A row, column, or wrapping set of buttons — use it to group related actions (Submit/Cancel, pager Prev/Next, social links).
Layout:
| Setting | Options | Default |
|---|---|---|
| Layout | Row / Column / Wrap | Row |
| Size | Small / Medium / Large | Medium |
| Alignment | Left / Center / Right | Left |
| Spacing | Tight / Normal / Loose | Normal |
| Button Width | Auto / Full | Auto |
| Animation | None / Hover Lift / Pulse / Bounce / Glow | None |
Per Button (up to 10): same settings as the standalone Button (text, URL, style, colors, radius).
Status [Standard]
A colored status badge/label.
| Setting | Options | Default |
|---|---|---|
| Label | Free text (required) | "To Do" |
| Color | Color picker | #FF5630 |
| Size | Small / Medium / Large | Medium |
| Border Radius | Rounded / Pill / Square | Pill |
Divider [Standard]
A visual separator with optional text or icon in the center.
| Setting | Options | Default |
|---|---|---|
| Type | Line / With Text / With Icon | Line |
| Alignment | Left / Center / Right | Center |
| Full Width | Toggle | On |
| Width | 50–1200px slider | Full width |
| Color | Color picker | #DFE1E6 |
| Thickness | 1–10px slider | 1px |
| Text | Free text (for "With Text") | — |
| Icon | Emoji or character (for "With Icon") | — |
| Icon Size | 14 / 18 / 24 / 32 / 42 / 64px | — |
Title [Standard]
A styled heading with a full rich text editor.
| Setting | Options | Default |
|---|---|---|
| Title Text | Rich text editor (required) | "Your Title" |
| Heading Level | H1 / H2 / H3 / H4 | H2 |
| Alignment | Left / Center / Right | Left |
| Font Size | 12–72px slider | 24px |
| Font Weight | 100–900 slider | 600 |
| Color | Color picker | #172B4D |
| Custom Line Height | Toggle + 1–3 slider | Off |
Panel [Standard]
A colored callout panel with accent border. Bodied — drop rich text content inside via the Confluence editor.
| Setting | Options | Default |
|---|---|---|
| Style | Info / Warning / Success / Error / Note / Custom | Info |
| Title | Free text | — |
| Icon | Lucide icon picker (search by name) | Per-style default |
| Border Position | Left Accent / Top Accent / Full Border | Left Accent |
| Border Radius | 0–20px slider | 4px |
| Border Color | Color picker (Custom style) | #0065FF |
| Background Color | Color picker (Custom style) | #DEEBFF |
| Text Color | Color picker (Custom style) | #172B4D |
Expand [Standard]
A collapsible accordion with one or more sections. Drag to reorder sections, rich text per section.
Per Section (no fixed limit):
| Setting | Description |
|---|---|
| Title | Section heading (required) |
| Icon | Emoji or character per section |
| Content | Rich text editor — bold, italic, underline, headings, lists, links, blockquote, code |
| Initially Open | Toggle — section starts expanded |
Layout & Behavior:
| Setting | Options | Default |
|---|---|---|
| Design Style | Simple / Bordered / Shadowed / Gradient / Minimal | Simple |
| Animation | On / Off (smooth expand/collapse) | On |
| Animation Speed | 100–1000ms slider | 300ms |
| Chevron Position | Left / Right | Right |
| Content Padding | 0–32px slider | 16px |
| Accent Color | Color picker | Theme primary |
| Allow Multiple Open | Toggle — off = accordion (only one section open) | Off |
Progress [Standard]
One or more progress bars showing completion status.
| Setting | Options | Default |
|---|---|---|
| Style | Edged / Rounded / Circular | Rounded |
| Size | Small / Medium / Large | Medium |
| Height | 4–40px slider (overrides Size) | 12px |
| Alignment | Left / Center / Right | Left |
| Shadow | Toggle | Off |
| Show Overall | Toggle (avg of all bars) | Off |
Per bar (up to 5 bars): Title, Value (65), Max (100), Type (Percentage/Number), Primary Color, Secondary Color.
Countdown [Standard]
A live countdown timer to a target date.
| Setting | Options | Default |
|---|---|---|
| Target Date & Time | Date/time picker | 7 days from now |
| Style | Box / Circle / Gauges | Box |
| Size | Small / Medium / Large / X-Large | Medium |
| Primary Color | Color picker | #0052CC |
| Digit Animation | None / Slide / Fade | None |
| Show Labels / Days / Hours / Minutes / Seconds | Toggles | On |
Background [Standard]
A colored, gradient, or image background section that wraps rich text. Use it to break a page into visually distinct sections.
| Setting | Options | Default |
|---|---|---|
| Background Type | Color / Gradient / Image | Color |
| Background Value | Color, gradient CSS, or image URL | Theme primary |
| Overlay Color | Color picker (image backgrounds) | #000000 |
| Overlay Opacity | 0–100% (image backgrounds) | 0% |
| Min Height | Pixels | 200 |
| Padding | Pixels | 24 |
Tabs [Standard]
Organize content in switchable tabs with rich text support.
Per Tab (up to 8 tabs): Title, Content Heading, Description, Tab Content (rich text), Image, Background Color, Image Fit/Position/Size, Overlay.
Layout Settings: Tab Position (Top/Left/Right), Style (Line/Pills/Card), Preset (Simple/Card/Image Left/Image Top/Image Background), Alignment, Show Underline, Hover Effect (None/Lift/Scale).
Hero Section [Standard]
A large banner area with title, subtitle, and call-to-action buttons.
Content: Title (required), Subtitle, Title/Subtitle Alignment, Min Height (150–600px).
Background: Type (Color/Gradient/Image), Color, Gradient CSS, Image, Overlay Opacity/Color.
CTA: Primary/Secondary CTA Label and URL, CTA Style, Horizontal/Vertical Alignment.
FAQ Section [Standard]
An accordion-style FAQ section with search, filtering, and SEO-friendly structured data.
Questions (up to 20, drag to reorder): Question (required), Answer (rich text), Category, Initially Open.
Options: Section Title, Style (Simple/Collapse/Centered/Bordered/Shadowed), Enable Search, Allow Multiple Open, Show Category Filter.
Features: Search highlights matching text, Expand/Collapse All toggle, Schema.org FAQPage JSON-LD for SEO.
Pricing Table [Standard]
A pricing plan comparison with highlighted tiers.
Per Plan (up to 5): Name (required), Price, Period, Description, Features list, CTA Label, CTA URL, Highlight toggle.
Layout: Columns (2/3/4), Highlight Color. Highlighted plans show a "Popular" badge.
Numbered Headings [Standard]
Auto-numbers headings (H1–H6) using CSS counters — independent counter scope per macro.
| Setting | Options | Default |
|---|---|---|
| H1–H6 Scheme | Decimal / Upper Alpha / Lower Alpha / Upper Roman / Lower Roman / None | Decimal |
| Separator | ., -, /, _, (, ), or any 1–4 char combo | . |
| Trailing Separator | Show after last number (e.g. 1.1.) | Off |
Templates: 9 presets — Standard Decimal, Legal, Outline, Roman Formal, Alphabetic Index, MLA Classic, Parenthesized, Scientific, Modern Minimal.
Table [Standard]
Styled tables with preset styles, zebra striping, colored headers, and first-column emphasis.
| Setting | Options | Default |
|---|---|---|
| Columns | 1–8, add/remove inline | 3 |
| Rows | Up to 50, drag-to-reorder | 2 |
| Style | Striped / Bordered / Minimal / Modern | Striped |
| Header background | Any hex (optional override) | Theme default |
| First column as row headers | On / Off | Off |
Templates: 4 presets — Comparison Matrix, Spec Sheet, Data Table, Schedule.
Card Grid [Advanced]
A responsive grid of content cards with optional images and CTAs.
| Setting | Options | Default |
|---|---|---|
| Columns | 1 / 2 / 3 / 4 | 3 |
| Card Style | Basic / Outlined / Elevated | Basic |
| Image Position | Top / Left | Top |
Per Card (up to 12): Title, Description, Image URL, CTA Label, CTA URL.
Team Showcase [Advanced]
A grid of team-member cards — avatar, name, role, bio, social links.
| Setting | Options | Default |
|---|---|---|
| Columns | 1 / 2 / 3 / 4 | 3 |
| Card Style | Basic / Outlined / Elevated | Outlined |
| Avatar Shape | Circle / Rounded / Square | Circle |
| Avatar Size | Small (48px) / Medium (72px) / Large (96px) | Medium |
| Alignment | Left / Center | Center |
Each member supports name, avatar (or auto-colored initials), rich-text bio, department, location, email, social links. Up to 20 members per macro.
Image Gallery [Advanced]
A photo gallery with grid or masonry layouts, hover effects, and a built-in lightbox.
| Setting | Options | Default |
|---|---|---|
| Layout | Grid / Masonry | Grid |
| Columns | 1 / 2 / 3 / 4 | 3 |
| Hover effect | None / Zoom / Lift / Darken | None |
| Lightbox | On / Off | On |
All images stored as base64 — no external URLs (Runs on Atlassian compliant). True browser fullscreen via Fullscreen API. Up to 30 images per macro.
QR Code [Advanced]
A scannable QR code generator with 7 content types and optional logo overlay.
| Setting | Options | Default |
|---|---|---|
| Content type | URL / Text / Email / Phone / SMS / WiFi / vCard | URL |
| Size | 128–512px | 256px |
| Error correction | L / M / Q / H | Q |
| Logo overlay | Optional upload | None |
100% client-side generation — no network calls. When logo overlay is present, ECC auto-locks to H (30% recovery).
Annotation [Advanced]
Inline annotations for terms, definitions, and callouts — rendered by @forge/react (UI Kit) with native Tooltip component.
| Setting | Options | Default |
|---|---|---|
| Term (trigger) | Any inline text | — |
| Body | Plain text on hover | — |
| Term style | Plain / Bold / Italic / Underline / Highlight / Badge | Plain |
| Position | Top / Bottom / Left / Right / Auto / Follow mouse | Top |
| Delay | 0–1500ms | 300ms |
Templates: 6 presets — Acronym, Definition, Hint, Citation, Highlight, Badge.
Article [Advanced]
A long-form reading macro with drop caps, typography templates, and bilingual mode.
| Setting | Options | Default |
|---|---|---|
| Template | Medium / Quora / Substack / NYT / GitHub / Minimal | Medium |
| Font family | 15 bundled open-source families | Per template |
| Drop cap | On / Off | Per template |
| Bilingual mode | On / Off | Off |
Bilingual mode: pairs a Native rich-text editor with a Translation editor per paragraph.
Form [Advanced]
Collect survey responses, feedback, RSVPs — the only macro with server-side persistence.
| Setting | Options | Default |
|---|---|---|
| Form title | Any string | Untitled form |
| Field types | Short text / Long text / Dropdown / Checkboxes / Star rating / Email / Date picker | Short text |
| Submit button text | Any string | Submit |
Where submissions go: Form Submissions space page (apps menu in your space). Space admins only. Export CSV, delete rows inline.
Form Submissions (Space Admin Page)
A dedicated space page for viewing collected form submissions.
Requires Advanced license. On the Standard tier, the Form Submissions page shows an upgrade prompt.
Layout: two-pane. Left lists every form with submission count badge. Right shows a sortable table.
Actions: Export CSV, Delete per-row with confirmation, Refresh.
Tips
- Live Preview: Every macro config panel shows a real-time preview on the right side
- Templates: Every macro opens with a "Start from a template" link — 76+ built-in presets
- Upgrade for more: Standard includes 16 macros (free for teams ≤10). Advanced unlocks 7 premium macros + Theme Editor
- Theme Consistency: Set brand colors once in the Theme Editor — all macros inherit
- Dark Mode: All macros automatically adapt to Confluence's dark/light theme
Related Blog Posts
- (Coming soon)
Related Apps
Modern Content Blocks works great alongside other NGPILOT apps. Here are apps that complement specific features:
- Modern Code Blocks for Confluence — Syntax-highlighted code blocks with Monaco editor, 85+ languages, diff view
- Modern FAQ for Confluence — Dedicated FAQ accordion sections with search
- Modern Numbered Headings for Confluence — Auto-number H1–H6 headings with 9 presets
- QRCode for Confluence — Standalone QR code macro
- Google Fonts for Confluence — 1798+ Google Fonts as a macro
- Enhanced Markdown for Confluence — WYSIWYG Markdown editing with charts and UML
- Excalidraw plus for Confluence — Freeform whiteboard drawings and diagrams
- Mermaid plus for Confluence — 26 diagram types with live preview
Cited by
Modern Content Blocks is referenced in the following guides:
- Enhanced Markdown for Confluence — Enhanced Markdown includes a live HTML preview that can render Modern Content Blocks macros for testing
- Modern FAQ for Confluence — The FAQ macro in Modern Content Blocks was inspired by Modern FAQ's design
Support
For issues or feature requests, please visit the app's listing on the Atlassian Marketplace.