Don't have Mosaic for Confluence yet?
Try it free to start using HTML on your pages:
17 free Confluence HTML widgets that save you hours
Share on socials
17 free Confluence HTML widgets that save you hours
Jump to Section
Jump to section
Start here: How to add HTML elements to your page
Is Mosaic's HTML macro secure?
1. Delivery progress bar
2. Live search and filter directory
3. Holographic 3D multi-display
4. Colour gradient banner header
5. Masonry image gallery
6. Release countdown timer
7. Data doughnut chart
8. Animated data doughnut chart
Interactive card collection
- 9. Glass-effect panel card
- 10. Slide-and-fill action card
- 11. Border slide-and-lift card
- 12. Icon scale card
- 13. Solid colour fill card
- 14. Rotating gradient border card
- 15. Rotating light border card
- 16. Ambient glow card
- 17. Light sweep card
Skip the build time. Download these 17 free HTML elements for Confluence and customise them to your needs with Mosaic for Confluence.
Getting a Confluence page to look and behave exactly as you want can sometimes need a degree of compromise. Confluence, unfortunately, has its limitations. But with Mosaic for Confluence and its HTML macro, you can add custom, interactive elements to your pages in minutes.
Mosaic's HTML macro increases your creative freedom, so you can create incredible content with little effort. To help you create custom pages faster, you can use our vibe code prompt or read on to download the code for any of the sample widgets listed below.
How to add these HTML elements to your Confluence page
- First, install Mosaic for Confluence. You can try it completely free for 30 days.
- Next, scroll down to an element on this page that appeals to you, and then download the file.
- Type /html on your Confluence page to bring up the HTML macro.
- Click the Import button, then click Upload Code File. Select Add to editor.
- Edit the code to customise your widget, then save.
Once you’ve added the code to your HTML macro, you can follow the instructions on customising the widget to suit your needs.
Please note: JavaScript is only available to users with Mosaic’s Advanced Edition, so if you have Standard Edition, some of these tools will have limited features.
Is Mosaic’s HTML macro safe?
Yes, completely! What sets Mosaic’s HTML macro apart from other Confluence HTML macros is that all HTML, CSS, and JavaScript are fully sanitised automatically, meaning no intrusive scripts and you don’t have to be a cybersecurity expert to use it.
Here are the tools and widgets that you can download for free and start using on your Confluence pages today.
1. Delivery progress bar
A horizontal progress indicator that animates on load. Useful for tracking objectives, sprint goals, and quarterly targets.
Download the HTML and CSS file:
How to customise the delivery progress bar
Customising the progress bar requires making a quick update in both the HTML tab (for the data and text) and the CSS tab (for your brand colours).
Change the percentage and text (HTML tab)
To change the data, you need to update two things in your HTML: the visible text that the user reads, and the inline width style that tells the bar how far to fill up.
Find this section in your HTML:
<div class="progress-header">
<span class="progress-label">Q3 Delivery Target</span> <span class="progress-value">75%</span> </div>
<div class="progress-track">
<div class="progress-fill" style="width: 75%;"></div> </div>
Example of an updated version
If your new target is "Project Alpha" and it is 90% complete, your HTML should look like this:
<div class="progress-header">
<span class="progress-label">Project Alpha Completion</span>
<span class="progress-value">90%</span>
</div>
<div class="progress-track">
<div class="progress-fill" style="width: 90%;"></div>
</div>
Change the colours (CSS tab)
By default, the progress bar uses a left-to-right gradient. You can change this to match your corporate branding.
Find this section in your CSS:
.progress-fill {
height: 100%;
/* Change these two hex codes to your brand colours */
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 100px;
animation: fillUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform-origin: left;
}
To use a custom gradient: Replace #3b82f6 (the starting colour) and #8b5cf6 (the ending colour) with your own hex codes.
To use a solid colour instead: Delete the linear-gradient line entirely and replace it with a standard background colour rule, like this: “background: #FF0000;”.
2. Live search and filter directory
A searchable grid of cards that filters results in real time as the user types. It’s useful for team directories, architecture glossaries, and FAQ hubs.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
Download the HTML, CSS, and JS file:
How to customise the live search and filter directory
Because this component uses JS to securely inject the search bar, you will be making edits across all three tabs (HTML, CSS, and JS) to customise it.
Change the placeholder text (JS tab)
Since JS is responsible for building the search box, the placeholder text lives in the JS tab, not the HTML tab.
- Open the JS tab.
- Look for realInput.placeholder = "..." near the top of the script.
- Change the text inside the quotes to match your content:
E.g. realInput.placeholder = "Search for a team member, department, or role...";
Add or remove cards (HTML tab)
The JS automatically scans all the text inside the grid. You can add as many cards as you want, and the search will immediately know how to filter them.
To add a new card: Copy and paste an entire <div class="search-card">...</div> block and change the text inside.
To remove a card: Simply delete its block.
HTML
HTML
<div class="search-card">
<div class="sc-header">
<h4>Your New Title</h4>
<span class="sc-tag tag-blue">Your Tag</span>
</div>
<p class="sc-body">Your custom text goes here.</p>
</div>
Change the category tags & colours (HTML and CSS tabs)
The little coloured tags (like the blue Backend tag) are controlled by CSS classes.
To change the text: Just type a new word inside the <span class="sc-tag"> in your HTML.
To use a different colour: Change the class name on the span. The template includes tag-blue, tag-purple, tag-green, and tag-orange.
To create a brand new colour: Go to the CSS tab, find the tag colours, and add your own rule!
/* Add your own brand tag colour here! */
/* Add your own brand tag colour here! */
.tag-brand { background: #fee2e2; color: #ef4444; }
Change the search bar highlight colour (CSS tab)
When a user clicks into the search box to start typing, it highlights with a purple ring. To change this to your brand's primary colour, open the CSS tab and find the :focus rule.
CSS
.search-input-container input:focus {
/* Change these two hex codes to your brand colour */
border-color: #006d7a;
box-shadow: 0 0 0 4px rgba(0, 109, 122, 0.15); /* The last number is the opacity */
}
Change the grid layout (CSS tab)
Right now, the grid automatically figures out how many columns to show based on the screen size, with each card being at least 320px wide.
If you want fewer, wider cards (like 2 per row), increase that number to 400px.
If you want more, narrower cards (like 4 per row), decrease it to 250px.
CSS
.search-grid {
/* Change 320px to make the cards wider or narrower */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
3. Holographic 3D multi-display
A 3D spatial, mouse-tracking dashboard that tilts and reacts to the user's mouse position.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
Download the HTML, CSS, and JS file:
How to customise the holographic 3D multi-display
The "trick" of the holographic 3D display isn't just the visual effect; it is the deliberate spatial mapping of information. It forces context by placing content in three prioritised dimensions: a quiet background, a primary focal point, and an urgent foreground.
Strategic principles for 3D content
Customise this macro by thinking like an architect, not an editor. Map your data based on priority:
- Foreground (layer-fg): Immediate action. Reserved for critical incidents, active deployment alerts, or real-time blockers (DACI decisions). It should demand attention via its purple alert branding (background: rgba(139, 92, 246, 0.2)).
- Midground (layer-mid): Primary mission. This is the focal point. It holds the high-value performance data (OKRs, Uptime, Project Health) that the viewer must understand immediately.
- Background (layer-bg): Broad context. For low-priority health indicators, general system summaries, or long-form notes that provide foundational knowledge but do not require instant reaction.
Technical customisation points
The core visual mechanics are defined in the CSS, utilising translateZ to pull elements forward (negative values) or push them back (positive values) on the Z-axis.
1. Defining the depth hierarchy (translateZ)
The "pop" of the display is controlled entirely by the CSS depth.
- To make a card "float" further away (background), decrease the translateZ value (e.g., -50px to -150px in .layer-bg).
- To bring a card closer (foreground), increase the translateZ value (e.g., 120px to 200px in .layer-fg).
CSS
/* Example: Pushing the background layer deeper for dramatic context */
.layer-bg {
transform: translateZ(-150px); /* Changed from -50px */
}
2. Customising the grid floor (holo-floor)
The floor provides the spatial anchor. If your dashboard uses a different brand palette than sky blue, adjust the floor grid colours.
Change the sky blue (rgba(56, 189, 248, 0.2)) to your preferred primary status or brand colour.
CSS
/* Customising the floor to a subtle green status grid */
.holo-floor {
background-image:
linear-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px), /* Teal/Green */
linear-gradient(90deg, rgba(16, 185, 129, 0.15) 1px, transparent 1px);
}
3. Adjusting the mouse-tracking sensitivity (JS)
The 15 and -15 values in the JS determine how much the scene tilts in response to the mouse.
- Increase these values (e.g., to 30) for an exaggerated, rapid "holographic" responsiveness.
- Decrease these values (e.g., to 5) for a slower, more subtle spatial effect appropriate for high-traffic dashboards where excessive motion could become a distraction.
JS
/* JS sensitivity modification: Exaggerated spatial tilt */
const rotateX = (x - centerX) / centerX * 30; // Changed from 15
const rotateY = (y - centerY) / centerY * -30; // Changed from -15
By prioritising information and adjusting depth and responsiveness, you ensure the holographic 3D display is a functional tool for situational awareness, not merely a distracting effect.
4. Colour gradient banner header
A full-width header block featuring a gradient background and a call-to-action button. Useful for anchoring intranet homepages and driving users to key resources.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
Download the HTML, CSS, and JS file:
How to customise the colour gradient banner header
Because we had to hardcode values to survive the sanitiser, you will need to make updates directly within the respective tabs.
Content and text (HTML tab)
Update the <h1> (headline) and <p> (subheading) tags to match your campaign or portal name.
Change the button text inside the <a class="ms-hero-cta"> tag.
CTA destination (HTML tab)
Locate the <a href="#"...> tag and replace the # with your target URL.
Brand colours (CSS tab)
Background base: Find background-color: #0a192f; under .ms-hero-banner and swap the hex code.
Gradient blobs: Modify the rgba() values within the radial-gradient lines to change the teal and purple mesh effects.
Button: Find background-color: #64ffda; under .ms-hero-cta (and its hover state counterpart below it) to update the button colour.
Dimensions (CSS tab)
Adjust min-height: Edit 320px; under .ms-hero-banner if you need the banner to be taller or shorter on the page.
5. Masonry image gallery
A fluid, interlocking image grid that automatically calculates dimensions to prevent cropping. Useful for displaying team off-sites, product mockups, or event photos.
Download the HTML and CSS file:
How to customise the masonry image gallery
Content and structure (HTML tab)
Change the titles: Find the text Team Offsite & Events inside the <h2 class="ms-gallery-title"> tags and replace it with your own heading. Do the same for the subtitle just below it.
Remove the header entirely: If you just want a pure image grid without a title, simply delete the entire <div class="ms-gallery-header">...</div> block. The grid will naturally slide up to fill the space.
Add more images: To expand the gallery, copy an entire image block (from <div class="ms-masonry-item"> to its closing </div>) and paste it directly beneath the last one. You can add as many as you like; the grid will automatically calculate where to put them.
Update the images: Replace the placeholder src="..." URLs with the actual links to your company's images.
Layout and branding (CSS tab)
Change the number of columns: By default, desktop screens show 3 columns. To make the images smaller and fit 4 columns, scroll to the bottom of the CSS tab to find @media (min-width: 900px). Change column-count: 3; to column-count: 4;.
Adjust the image spacing: If you want tighter or wider gaps between your photos, you need to change two numbers. Find .ms-masonry-grid and change column-gap: 20px;. Then, find .ms-masonry-item and change margin-bottom: 20px; to match your new number perfectly.
Change the subtitle colours: To match your company branding, find .ms-gallery-subtitle. Change the color: #64748b; (the text colour) and the background: #f8fafc; (the pill shape colour) to your brand's hex codes.
Tweak the hover zoom: When a user hovers over an image, it slightly zooms in to feel premium. Find .ms-masonry-item:hover img at the very bottom. Change transform: scale(1.03); to scale(1.1); for a dramatic 10% zoom, or scale(1.0); to turn the zoom off entirely.
6. Release countdown timer
A dynamic countdown clock that displays days, hours, minutes, and seconds until a specified date. Useful for tracking product launches, IT migrations, or company-wide events.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
This tool uses JavaScript, which requires Mosaic Advanced Edition.
Download the HTML, CSS, and JS file:
How to customise the release countdown timer
Setting your target date (JS tab)
Open the JS tab and locate the targetDateString variable at the top. Change it to your exact launch date using the standard web format: YYYY-MM-DDTHH:MM:SS. For example, to count down to Christmas morning 2026, you would type '2026-12-25T08:00:00'.
Updating the titles (HTML tab)
In the HTML tab, look for Project Apollo Go-Live and replace it with your project's name. Directly below it, update the Target: text to reflect a human-readable version of your launch date.
The completion message (HTML tab)
By default, when the timer hits zero, the clock disappears and a success message appears. Scroll to the very bottom of the HTML tab to find 🎉 The launch window has arrived!. You can change this text to anything you like (e.g., "The new HR Portal is now live! Click here to login.").
Changing the brand colours (CSS tab)
The background: Find .ms-countdown-card and adjust the linear-gradient hex codes to match your company's primary colours.
The numbers: Find .ms-time-number and change the color: #38bdf8; to your preferred highlight colour.
7. Data doughnut chart
A static, CSS-rendered doughnut chart for data visualisation. Useful for displaying budget allocations, resource distribution, or project phases directly on the page.
Download the HTML and CSS file:
How to customise the data doughnut chart
Because this chart uses zero JS, the "slices" of the pie are drawn using a CSS conic-gradient. To change the data, you have to do a little bit of basic math to set the "start" and "stop" points for each colour.
Example: If your data is 40% Blue, 35% Green, and 25% Grey.
- Blue slice: Starts at 0% and ends at 40%.
- Green slice: Starts at 40% and ends at 75% (40 + 35 = 75).
- Grey slice: Starts at 75% and ends at 100% (75 + 25 = 100).
Think of it like a relay race: where one colour ends, the next colour must begin. All your slices added together must equal 100%.
Step 1: Do the maths for your slices
Let’s say you want to expand the chart from 3 items to 4 items with the following data and custom colours:
- Brand blue: 30%
- Brand purple: 20%
- Brand green: 35%
- Brand orange: 15%
To write the CSS, keep a running total of where each slice stops:
- Blue starts at 0% and ends at 30%.
- Purple starts at 30% and ends at 50% (30 + 20 = 50).
- Green starts at 50% and ends at 85% (50 + 35 = 85).
- Orange starts at 85% and ends at 100% (85 + 15 = 100).
Step 2: Update the CSS tab
Find the .donut-chart class in your CSS. You can add as many colours as you want, as long as you follow the [Colour] [Start%] [End%], format.
CSS
.donut-chart {
border-radius: 50%;
/* Add your custom hex colours and sequential percentages here */
background: conic-gradient(
#3B82F6 0% 30%, /* Blue: 0 to 30 */
#8B5CF6 30% 50%, /* Purple: 30 to 50 */
#10B981 50% 85%, /* Green: 50 to 85 */
#F59E0B 85% 100% /* Orange: 85 to 100 */
);
}
Step 3: Update the HTML tab (the legend)
If you added a 4th colour to the CSS, you must add a 4th item to the legend in your HTML so your users know what the data means!
- Change the large centre text (.donut-number).
- Add a new <li> for your new data point.
- Update the style="background: #..." on each legend dot so it matches the exact hex codes you just used in your CSS.
HTML
<div class="donut-hole">
<span class="donut-number">30%</span>
<span class="donut-label">Blue Segment</span>
</div>
<ul class="donut-legend">
<li><span class="dot" style="background:#3B82F6;"></span> Brand Blue (30%)</li>
<li><span class="dot" style="background:#8B5CF6;"></span> Brand Purple (20%)</li>
<li><span class="dot" style="background:#10B981;"></span> Brand Green (35%)</li>
<li><span class="dot" style="background:#F59E0B;"></span> Brand Orange (15%)</li>
</ul>
8. Animated data doughnut chart
An animated version of the doughnut chart with a sweeping reveal and live number counter. Useful for displaying key completion metrics and reporting data.
Download the HTML and CSS file:
How to customise the animated data doughnut chart
Change the data slices
Look for .donut-chart in the CSS and update the conic-gradient hex codes and percentages exactly as you did for the static version.
Change the number animation target
Look for @keyframes countUp at the bottom of the CSS. Change the to { --num: 82; } rule to match your main data point. If your target is 95%, change it to --num: 95;.
Change the background colour
If you change the .donut-card background from #ffffff (white) to a dark colour, you must also change the #ffffff in the .donut-sweep and .donut-hole rules so the sweeping mask blends perfectly with the new card colour!
The interactive card collection
Whether you need a call-to-action, a sleek navigation menu, or a subtle way to highlight critical alerts, these eye-catching cards bring a level of polish to your Confluence pages. They all share the same core functions, acting as a header, breaking up text, introducing something new and so on; simply choose the animation style that best fits your layout.
9. Glass-effect panel card
A layered information card featuring a frosted-glass depth effect over a shifting background. Useful for framing executive summaries, mission statements, or strategic goals.
Download the HTML and CSS file:
How to customise the glass-effect panel card
Change the floating blob colours (CSS tab)
Find the .glass-blob rule. The blob is just a blurred circle with a gradient.
CSS
.glass-blob {
/* Swap these two hex codes to change the blob's color */
background: linear-gradient(135deg, #FF5722, #FFC107);
}
Make the glass more or less transparent (CSS tab)
Find the .glass-card rule. The background uses an RGBA colour where the last number 0.05 is the opacity (5%). Increase it to 0.1 or 0.2 for a more solid "frosted" look.
CSS
.glass-card {
/* Change 0.05 to 0.15 for more solid white frosting */
background: rgba(255, 255, 255, 0.05);
/* Change 16px to 8px for less blur, or 24px for more blur */
backdrop-filter: blur(16px);
}
10. Slide-and-fill action card
An interactive display card that floods with a solid colour from left to right on hover, instantly inverting the text colour for maximum contrast.
Download the HTML and CSS file:
How to customise the slide and fill action card
Change the fill colour (CSS tab)
Find the .action-card::before rule. This controls the invisible colour block that waits on the left side of the card before you hover over it.
CSS
.action-card::before {
/* Change this to the colour you want the card to become when hovered */
background: #0f172a;
}
Change the text colour when hovered (CSS tab)
If your fill colour is dark, your text needs to turn white so people can read it. If your fill colour is light, your text should turn dark.
CSS
/* This flips the text colour when the user hovers over the card */
.action-card:hover h3,
.action-card:hover p {
color: #ffffff; /* Change to #000000 if your fill background is light */
}
11. Border slide-and-lift card
A fun interactive card that lifts smoothly off the page on hover while a bright gradient border slides in along the bottom edge and the emoji tilts.
Download the HTML and CSS file:
How to customise the border slide and lift card
Change the slide colour (CSS tab)
Find .bs-card::after and alter the background gradient to match your corporate identity.
Disable the lift (CSS tab)
Delete transform: translateY(-8px); from the .bs-card:hover rule if you only want the border to slide.
Change the icon behaviour (CSS tab)
In .bs-card:hover .bs-icon, change scale(1.2) to scale(1.5) for a massive zoom, or change rotate(5deg) to rotate(0deg) to stop it from tilting.
12. Icon scale card
Another eye-catching card that keeps the body completely stationary while the icon tilts and scales up without shifting your surrounding grid layout.
Download the HTML and CSS file:
How to customise the icon scale card
Adjust the bounce (CSS tab)
The transition: transform rule uses a custom cubic-bezier that forces the icon to scale up slightly past 100% and "bounce" back. Change it to ease for a standard, smooth zoom.
Adjust the spin (CSS tab)
In .scale-card:hover .scale-icon, change rotate(-10deg) to rotate(360deg) to make the icon do a complete flip when hovered!
13. Solid colour fill card
An impactful card that floods rapidly with a solid block of colour from the bottom up on hover, creating a bold and immediate visual change.
Download the HTML and CSS file:
How to customise the solid colour fill card
Change the fill direction (CSS tab)
In .fill-card::before, change transform-origin: bottom; to transform-origin: top; to make it fill downwards.
Change the fill colour (CSS tab)
Update the blue background: #0ea5e9; to your preferred brand colour. Ensure it is dark enough that white text remains legible on it.
14. Rotating gradient border card
A static card that features a continuous, seamless conic-gradient border that slowly rotates around the card container.
Download the HTML and CSS file:
How to customise the rotating gradient border card
Change the border colours (CSS tab)
Look for background: conic-gradient(...) in the CSS. Swap out the hex codes.
Crucial rule: The first and last colours must be exactly the same (e.g., #3b82f6) so the loop is seamless!
Change the border thickness (CSS tab)
Change padding: 3px; inside the .anim-border-card::before rule.
Change the speed (CSS tab)
In animation: borderSpin 4s linear infinite;, lower the 4s to 2s for a faster spin.
15. Rotating light border card
Creates the illusion of a single, looping beam of coloured light travelling around the edge of the card.
Download the HTML and CSS file:
How to customise the rotating light border card
The effect is created by a rotating background layer that peeks through a thin margin. Use these tips to tweak the movement and colours.
Adjust the border thickness (CSS tab)
The thickness of the glowing line is controlled by the padding on the .animated-card class.
Subtle: Set padding to 1px or 2px.
Bold: Increase padding to 5px or 8px for a chunky neon look.
Refine the colour palette (CSS tab)
Locate the conic-gradient inside the .animated-card::before rule. This list determines which colours "orbit" the card.
The comet effect: Start and end your list with transparent to create a single beam of light that fades in and out.
The full ring: Remove the transparent entries and list 3–4 solid colours to create a continuous, multi-coloured glowing border.
Control the spin speed (CSS tab)
Inside the .animated-card::before rule, find the animation property (e.g., borderSpin 4s linear infinite).
High energy: Change 4s to 1s or 2s for a rapid, high-tech pulse.
Elegant glow: Change 4s to 10s or 15s for a very slow, premium ambient rotation.
Prevent "flickering" during the animation (CSS tab)
To ensure the animation is perfectly smooth, always ensure your gradient has at least two "stops" of the same colour at the start. This prevents the light from appearing to "jump" when the 360-degree rotation resets.
16. Ambient glow card
An interactive card that sits quietly in dark mode until hovered over, triggering a deep, layered radial shadow that mimics a physical, intensifying glow.
Download the HTML and CSS file:
How to customise the ambient glow effect card
The glow uses RGBA colours. Currently, it uses 13, 148, 136 (teal).
Change the glow colour (CSS tab)
Find the RGB values for your brand colour and replace those three numbers across all the box-shadow rules. Leave the last decimal (e.g., 0.2 or 0.5) exactly as it is—that controls the fading opacity!
Change the background colour and transparency (CSS tab)
Inside .glow-panel-wrapper, replace the hex code with your chosen hex code to change its colour (e.g. #000000 for black, #ffffff for white).
Add two digits to the end of this to set the colour’s transparency (e.g., #00000080 will display a black background with 80% opacity).
Add two digits to the end of this to set the colour’s transparency (e.g., #00000080 will display a black background with 80% opacity).
17. Light sweep card
A minimalist static card with a subtle white gradient that sweeps continuously across the card on a loop, mimicking the reflection of light off a polished surface.
Download the HTML and CSS file:
How to customise the light sweep card
Change the sweep speed (CSS tab)
In animation: shimmerSweep 3s ease-in-out infinite;, change 3s to 1.5s for a rapid flash, or 6s for a very slow, lazy gleam.
Make the light beam wider (CSS tab)
In the .shimmer-card::after rule, change width: 40%; to width: 80%;.
Make the light brighter (CSS tab)
In the linear-gradient, change rgba(255, 255, 255, 0.15) to 0.3 or 0.5 for a much harsher, brighter reflection.
Why use Mosaic's HTML macro in Confluence?
You can use the HTML macro for high-impact, custom elements, while using the standard formatting macros for the body of your content. This gives you the best of both worlds: when you need to update a line of text quickly, you can do it instantly in a formatting macro without having to hunt through lines of code to find the right string. Meanwhile, the HTML macro can handle complex and custom headers, charts, and interactive tools to keep your day-to-day edits seamless. Or if you are creating pages that don’t need updating, you can create whole pages using HTML that feature multiple elements and tools.
Your Confluence pages, but better
Give your Confluence pages the love they deserve. Discover Mosaic today and start building pages that users care about.
Related Content
Read more
Written by
Related Content
Read more