Styling Macros with CSS

Rendered macro styles cannot affect the outer HTML in any way. For example, changing the page title color in Cloud is not possible. For more details, see Limitations.

Macro styling varies significantly between Dynamic and Static Content macros.

Dynamic macros support full CSS styling.
Static macros only allow inline styles.

For more information, see User Macro: Static vs. Dynamic.

CSS in Dynamic Macros

By default, the Atlassian User Interface (AUI) library (v10.1.1) is used for UI styling.

This ensures that your HTML elements resemble those in Confluence Data Center/Confluence Server, which closely matches the Cloud UI while remaining simple and easy to use.

Additionally, one can apply custom styles using the following options:

Inline styles — Add styles directly using the style attribute inside HTML elements.
Internal styles — Place styles inside a <style> element.
External styles — Link to an external CSS file using a <link> element.

AUI Usage Examples

AUI provides a wide range of components — here are a few examples:

A sortable interactive table with hover effect:

<style>
  table {
    display: inline-table;
    border: 1px solid #dfe1e6;
  }
</style>

<table id="table-example" class="aui aui-table-sortable aui-table-interactive aui-table-rowhover">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Company</th>
      <th>Market Cap</th>
      <th>Stock Price</th>
      <tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Apple</td>
          <td>$3.5599 T</td>
          <td>$239.34</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Microsoft</td>
          <td>$3.087 T</td>
          <td>$415.27</td>
        </tr>
        <tr>
          <td>3</td>
          <td>NVIDIA</td>
          <td>$2.975 T</td>
          <td>$121.50</td>
        </tr>
      </tbody>
    </table>

Button variations for different use cases:

<button class="aui-button">Standard</button>
<button class="aui-button aui-button-primary">Primary</button>
<button class="aui-button aui-button-warning">Warning</button>
<button class="aui-button aui-button-danger">Danger</button>
<button class="aui-button aui-button-link">Link</button>

<style>
  .custom-button {
    --aui-btn-bg: #36B37E;
    --aui-btn-text: #FFF;
    --aui-btn-border: #006644;
  }
</style>
<button class="aui-button custom-button">Custom</button>

Avatars for better clarity and understanding:

<aui-avatar size="small"></aui-avatar>
<aui-avatar size="xxlarge" type="user"></aui-avatar>
<aui-avatar size="large" type="user"
  src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" title="my-customer-avatar"
  alt="image-avatar">
</aui-avatar>

<aui-avatar type="project"></aui-avatar>
<aui-avatar type="project" size="small"></aui-avatar>
<aui-avatar type="project" size="xxlarge"></aui-avatar>
</aui-avatar>

Badges for quick visual identification for numeric values and lozenges for displaying statuses:

<aui-badge class="aui-badge-primary">1</aui-badge>
<aui-badge class="aui-badge">2</aui-badge>
<aui-badge class="aui-badge-primary">3</aui-badge> <br />

<span class="aui-lozenge aui-lozenge-success">Success</span>
<span class="aui-lozenge aui-lozenge-removed">Removed</span>
<span class="aui-lozenge aui-lozenge-new">New</span>
<span class="aui-lozenge aui-lozenge-moved">Moved</span>

Messages for providing system feedback:

<div class="aui-message aui-message-success">
    <p class="title">
        <strong>The task has been completed!</strong>
    </p>
    <p>Message content goes here</p>
</div>

<div class="aui-message aui-message-info">
    <p class="title">
        <strong>The task has been updated!</strong>
    </p>
    <p>Message content goes here</p>
</div>

<div class="aui-message aui-message-change">
    <p class="title">
        <strong>The task has been modified!</strong>
    </p>
    <p>Message content goes here</p>
</div>

Tabs for alternating between views within the same context:

<div class="aui-tabs horizontal-tabs">
  <ul class="tabs-menu">
    <li class="menu-item active-tab">
      <a href="#tabs-space">Space</a>
    </li>
    <li class="menu-item">
      <a href="#tabs-page">Page</a>
    </li>
  </ul>
  <div class="tabs-pane active-pane" id="tabs-space">
    <h2>This is tab 1</h2>
    <p>
      Space info can be added here
    </p>
  </div>
  <div class="tabs-pane" id="tabs-page">
    <h2>This is tab 2</h2>
    <p>
      Page info can be added here
    </p>
  </div>
</div>

CSS in Static Macros

The primary limitation of static macros is their restriction to the Confluence Storage Format (Confluence custom XHTML-based syntax).

✅ Only inline CSS (using the style attribute within HTML elements) is supported. However, not all inline CSS rules are supported. For example, display: flex and display: grid are removed by Atlassian and won’t be included in the final page code.

✅ Some AUI components are preserved in Confluence Cloud's static context and can be safely used inside static content macros. This allows enhancing the macro's UI with familiar Atlassian-styled elements.

Below are examples of supported components:

Component	Code snippet	Rendered output
Lozenge	<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-success">Success</span> <span class="aui-lozenge aui-lozenge-subtle aui-lozenge-moved">Moved</span>
Message (partly supported)	<div role="note" aria-labelledby="css-message-example-title" class="aui-message aui-message-success" style="width: 45%;"> <p id="css-message-example-title" aria-hidden="true" class="title"> <strong hidden>Done: </strong> <strong>It is ready to go!</strong> </p> <p>And this is just content of the message.</p> </div>
Table	<table class="aui"> <thead> <tr> <th id="basic-number">#</th> <th id="basic-fname">First name</th> <th id="basic-lname">Last name</th> <th id="basic-username">Username</th> </tr> </thead> <tbody> <tr> <td headers="basic-number">1</td> <td headers="basic-fname">Matt</td> <td headers="basic-lname">Bond</td> <td headers="basic-username">mbond</td> </tr> <tr> <td headers="basic-number">2</td> <td headers="basic-fname">Ross</td> <td headers="basic-lname">Chaldecott</td> <td headers="basic-username">rchaldecott</td> </tr> <tr> <td headers="basic-number">3</td> <td headers="basic-fname">Henry</td> <td headers="basic-lname">Tapia</td> <td headers="basic-username">htapia</td> </tr> </tbody> </table>

Component

Code snippet

Rendered output

Lozenge

<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-success">Success</span>
<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-moved">Moved</span>

Message (partly supported)

<div role="note" aria-labelledby="css-message-example-title" class="aui-message aui-message-success" style="width: 45%;">
  <p id="css-message-example-title" aria-hidden="true" class="title">
    <strong hidden>Done: </strong>
    <strong>It is ready to go!</strong>
  </p>
  <p>And this is just content of the message.</p>
</div>

Table

<table class="aui">
      <thead>
        <tr>
          <th id="basic-number">#</th>
          <th id="basic-fname">First name</th>
          <th id="basic-lname">Last name</th>
          <th id="basic-username">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td headers="basic-number">1</td>
          <td headers="basic-fname">Matt</td>
          <td headers="basic-lname">Bond</td>
          <td headers="basic-username">mbond</td>
        </tr>
        <tr>
          <td headers="basic-number">2</td>
          <td headers="basic-fname">Ross</td>
          <td headers="basic-lname">Chaldecott</td>
          <td headers="basic-username">rchaldecott</td>
        </tr>
        <tr>
          <td headers="basic-number">3</td>
          <td headers="basic-fname">Henry</td>
          <td headers="basic-lname">Tapia</td>
          <td headers="basic-username">htapia</td>
        </tr>
      </tbody>
    </table>

❌ Internal (<style>) and external (<link>) CSS are ignored and won’t be applied to the page.

Storage Format Usage Examples

Here are some examples of Storage Format in action, showcasing both code and rendered macros:

XHTML-based code	Rendered output
<ac:task-list> <ac:task> <ac:task-status>incomplete</ac:task-status> <ac:task-body>task list item</ac:task-body> </ac:task> </ac:task-list>
<ac:emoticon ac:name="yellow-star" /> <ac:emoticon ac:name="laugh" /> <ac:emoticon ac:name="thumbs-up" /> <ac:emoticon ac:name="information" /> <ac:emoticon ac:name="light-on" /> <ac:emoticon ac:name="blue-star" />
<ac:image> <ri:url ri:value="https://marketplace.atlassian.com/product-listing/files/2278c429-4e11-4a9b-bf40-4d82d33bbdcd?fileType=image&mode=full-fit" /></ac:image>

XHTML-based code

Rendered output

<ac:task-list>
    <ac:task>
        <ac:task-status>incomplete</ac:task-status>
        <ac:task-body>task list item</ac:task-body>
    </ac:task>
</ac:task-list>

<ac:emoticon ac:name="yellow-star" />
<ac:emoticon ac:name="laugh" />
<ac:emoticon ac:name="thumbs-up" />
<ac:emoticon ac:name="information" />
<ac:emoticon ac:name="light-on" />
<ac:emoticon ac:name="blue-star" />

<ac:image>
  <ri:url ri:value="https://marketplace.atlassian.com/product-listing/files/2278c429-4e11-4a9b-bf40-4d82d33bbdcd?fileType=image&mode=full-fit" /></ac:image>

To summarize, the table below provides a final comparison of the key differences and limitations between dynamic and static macros:

Feature	Dynamic Content Macro	Static Content Macro
Inline CSS	✅	✅ (limited)
Styles in `<style>` tag	✅	❌
External styles via `<link>`	✅	❌
Storage format	❌	✅
AUI components	✅	✅ (limited)