HTML

Embed HTML code directly into your Confluence Cloud pages, and set custom CSS styling with the Mosaic HTML Macro. This secure, lightweight editor enables you to add HTML and CSS to your page, providing precise control over layout and presentation.

The HTML Macro extends Confluence's native formatting tools, making it ideal for users who want flexible customisation options. With a live preview, a clean editing interface, and built-in sanitisation, you can safely craft and display custom content however you want.

In addition to the aesthetic benefits, the HTML macro provides an embedded code-editing environment within the Confluence editor. This allows technical users to produce structured content more efficiently by:

Interacting with a code editor interface rather than selecting formatting from the macro list.
Applying familiar formatting and syntax patterns which can be easily replicated.
Creating precise layouts and structures without additional workarounds.

Add an HTML Macro

Navigate to the page you would like to edit.
Click the Edit icon in the top-right of the page, or press `e` on your keyboard to display the page in Edit mode.
Type /html and select the HTML Mosaic macro.
In the macro editing window, you have the option to enter your HTML code under the HTML tab, CSS under the CSS tab.

View the Preview pane to check how your code renders.
If part of your code is flagged by the sanitation rules, an error message will be displayed.
Click Save.
In the cloud editor, the HTML macro will render the code as expected.

Under the CSS tab, you can apply a custom style to a page. The style sheet can optionally be restricted to specific media types.

Edit the macro

To make changes to the macro HTML or CSS, click the macro placeholder, then click the Edit icon. Make the required changes, then click Save.

Code Sanitisation

To keep your workspace secure, all HTML you add is automatically sanitised before the Macro can be saved. Sanitisation refers to cleaning your HTML code to remove any elements that could harm your site or other users. In the Mosaic HTML Macro, we ensure your site's safety by checking and filtering your HTML before saving it, ensuring only safe, supported tags and attributes have been entered. Sanitisation protects users against threats such as cross-site scripting (XSS).

Allow List

Category	Allowed	Allowed attributes (on specific tags)
Text & Layout	`p, div, span, h1–h6, ul, ol, li, pre, code, blockquote, hr, br`	Global: `id` (name-clobbering checked), `class, title`
Formatting	`strong, em, b, i`
Links & Media	`a, img`	`a: href` (protocol-filtered), `target, rel img: src` (protocol-filtered), `srcset` (protocol-filtered), `alt, width, height`
Tables	`table, thead, tbody, tr, th, td`	`td/th: colspan, rowspan`
CSS (Inline)	N/A (Via style attribute)	CSS Handling: Must be parsed and filtered against a specific property allow-list (layout, typography, color, spacing). `@import` and `url()` calls are blocked.

If you have entered code flagged as potentially malicious, the offending code is highlighted, and you are prevented from saving until the HTML meets all sanitisation rules.

Limitations

Any code entered into the HTML macro is page-specific and cannot be applied to spaces or a set of pages.
JavaScript is not currently supported for security reasons.
All code must pass the sanitisation rules to reduce threats.
To keep your Confluence environment safe, the HTML macro doesn't support full iframe embeds. Only Atlassian domains can be used for iframe functionality. For help with supported options or domain whitelisting, get in touch, or see here for information on how to insert an iframe using the Atlassian iFrame Macro.

Examples

html
<body>
    <div class="image-card">
        <img src="https://images.unsplash.com/photo-1574158622682-e40e69881006?w=400&h=300&fit=crop"
            alt="Orange cat in blue background">
        <div class="image-card-content">
            <h3>Lorem ipsum title</h3>
            <p>This card includes <strong>ALT text</strong> for accessibility.</p>
        </div>
    </div>
</body>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .image-card {
            background: #fff;
            gap: 30px;
            align-items: center;
            display: flex;
            width: 592px;
            padding: 16px;
            align-items: center;
            gap: 10px;
            border-radius: 20px;
            border: 1px solid #E1E1E1;
        }

        .image-card img {
            object-fit: cover;
            border-radius: 12px;
            width: 409px;
            height: 234px;
        }

        .image-card-content h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #000;
        }

        .image-card-content p {
            font-size: 16px;
            color: #6b7280;
        }

        .image-card-content strong {
            color: #6b7280;
        }

        @media (max-width: 640px) {
            .image-card {
                flex-direction: column;
            }

            .image-card img {
                width: 100%;
            }
        }

html
<body>
  <div class="bullet-card">
          <div class="decorative-icons">
              <span class="icon-star">✦</span>
              <span class="icon-star">✦</span>
          </div>
          <h2>Lorem ipsum title</h2>
          <p class="subtitle">Lorem ipsum in two short bullets.</p>
          <ul>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
          </ul>
      </div>
</body>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .bullet-card {
            background: #fff;
            padding: 40px;
            border-radius: 20px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .bullet-card h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
            color: #000;
            border-bottom: 3px solid #6366f1;
            display: inline-block;
            padding-bottom: 4px;
        }

        .bullet-card .subtitle {
            font-size: 16px;
            color: #6b7280;
            margin-bottom: 24px;
        }

        .bullet-card ul {
            list-style: none;
        }

        .bullet-card li {
            font-size: 15px;
            color: #333;
            margin-bottom: 8px;
            padding-left: 20px;
            position: relative;
        }

        .bullet-card li:nth-child(1)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 8px;
            height: 8px;
            background-color: #6366f1;
            border-radius: 50%;
        }

        .bullet-card li:nth-child(2)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 8px;
            height: 8px;
            background-color: #10b981;
            border-radius: 50%;
        }

        .decorative-icons {
            position: absolute;
            right: 40px;
            top: 40px;
            display: flex;
            gap: 10px;
        }

        .icon-star {
            color: #6366f1;
            font-size: 48px;
            opacity: 0.6;
        }

        .icon-star:nth-child(2) {
            font-size: 36px;
        }TIME Card

html
<div class="timeline-card">
        <h4>Timeline</h4>
        <div class="timeline-item">
            <div class="timeline-dot blue"></div>
            <div class="timeline-content">
                <h5>Kickoff</h5>
                <p>Week 1</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot green"></div>
            <div class="timeline-content">
                <h5>Design</h5>
                <p>Weeks 2 - 3</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-dot red"></div>
            <div class="timeline-content">
                <h5>Launch</h5>
                <p>Week 4</p>
            </div>
        </div>
    </div>

css
body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .timeline-card {
            background: #fff;
            padding: 30px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border-radius: 20px;
            border: 1px solid #E1E1E1;
        }

        .timeline-card h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 24px;
            color: #000;
        }

        .timeline-item {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            position: relative;
        }

        .timeline-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 9px;
            top: 30px;
            width: 2px;
            height: calc(100% + 10px);
            background-color: #e5e7eb;
        }

        .timeline-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .timeline-dot.blue {
            background-color: #6366f1;
        }

        .timeline-dot.green {
            background-color: #10b981;
        }

        .timeline-dot.red {
            background-color: #ef4444;
        }

        .timeline-content h5 {
            margin-bottom: 4px;
            color: #000;
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
        }

        .timeline-content p {
            font-size: 12px;
            color: #6b7280;
        }

html
<div class="progress-card">
        <h4>Setup progress</h4>
        <div class="progress-bar-container">
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <span class="progress-percentage">65%</span>
        </div>
    </div>

css
body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .progress-card {
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            border: 1px solid #E1E1E1;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .progress-card h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #000;
        }

        .progress-bar-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .progress-bar {
            flex: 1;
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #6366f1;
            width: 65%;
            border-radius: 10px;
        }

        .progress-percentage {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }