Sample Page Code

Introduction

Having a sample page for an App, specifically when it provides page macros, is a very useful thing. It gives you a quick way to check on the App’s functionality when you get Incident reports about it from your users or after you upgraded your Confluence version.

This page describes a quick and easy way to create such a page and provides the complete code for it.

Requirement

In order to us this code you need the free “Confluence Source Editor” plugin from Atlassian installed on your site. You can find it here:

https://marketplace.atlassian.com/apps/1210722/confluence-source-editor?hosting=server&tab=overview

It will add a little button to the page editor menu bar (top right) that allows you to directly edit the page’s source code.

Steps to create the sample page

1. Create a new page. Give it a title and save it (the Confluence Source Editor only works on existing/saved pages)

2. Add the sample image (see below) as an attachment to the page.

3. Edit the page again

4. Click the Confluence Source Editor button. A new editor window will open on top.

5. Paste the sample code (see below). Tip: Expand the code and double-click in it. That will select all the code to copy to your clipboard.

6. Apply the source code editor

7. Save the page

Sample Images

Sample Code HTML Macros

<ac:layout>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Address</h1>
      <ac:structured-macro ac:macro-id="45d464cb-bc0f-4492-81ea-aeae4cbdb580" ac:name="html-address" ac:schema-version="1">
        <ac:rich-text-body>
          <p>Written by: George Lewe<br/>Visit us at: <a href="http://www.lewe.com">http://www.lewe.com</a> <br/>Street 123<br/>12345 Town<br/>Country</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Blockquote</h1>
      <ac:structured-macro ac:macro-id="a8947d70-960f-4ec8-978c-74facbdbe97f" ac:name="html-blockquote" ac:schema-version="1">
        <ac:rich-text-body>
          <p>I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.</p>
          <ac:structured-macro ac:macro-id="429d4437-c7e5-408c-bb67-16fd00597072" ac:name="html-cite" ac:schema-version="1">
            <ac:plain-text-body><![CDATA[Jon Snow]]></ac:plain-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="83c26da3-23ca-4f3e-ac85-6439f2327942" ac:name="html-blockquote" ac:schema-version="1">
        <ac:parameter ac:name="Design">Blue</ac:parameter>
        <ac:rich-text-body>
          <p>I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.</p>
          <ac:structured-macro ac:macro-id="0e986754-0e18-4675-8961-8955660d7935" ac:name="html-cite" ac:schema-version="1">
            <ac:plain-text-body><![CDATA[Jon Snow]]></ac:plain-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="5c570ae2-5ead-47e8-ba08-bfc88032a6b6" ac:name="html-blockquote" ac:schema-version="1">
        <ac:parameter ac:name="Design">Blue Rounded</ac:parameter>
        <ac:rich-text-body>
          <p>I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.</p>
          <ac:structured-macro ac:macro-id="4fdc19f3-eda5-40ec-9b95-2648e5a89e60" ac:name="html-cite" ac:schema-version="1">
            <ac:plain-text-body><![CDATA[Jon Snow]]></ac:plain-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="7e4037bb-620c-451d-aa01-fb4331028f5c" ac:name="html-blockquote" ac:schema-version="1">
        <ac:parameter ac:name="Design">Dark</ac:parameter>
        <ac:rich-text-body>
          <p>I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.</p>
          <ac:structured-macro ac:macro-id="81789b3c-0b78-4117-ba86-e6b69e2f611b" ac:name="html-cite" ac:schema-version="1">
            <ac:plain-text-body><![CDATA[Jon Snow]]></ac:plain-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Custom</h1>
      <p>
        <ac:structured-macro ac:macro-id="f301927d-f60d-4b26-b152-8e462d99d9c0" ac:name="html-custom" ac:schema-version="1">
          <ac:parameter ac:name="Custom">data-animal="cat" data-color="red"</ac:parameter>
          <ac:parameter ac:name="Marker">true</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Custom (Body)</h1>
      <ac:structured-macro ac:macro-id="fa40ab07-5897-4022-9cb1-a98f5520ed34" ac:name="html-custom-body" ac:schema-version="1">
        <ac:parameter ac:name="StripPWrap">true</ac:parameter>
        <ac:parameter ac:name="Custom">data-animal="cat" data-color="red"</ac:parameter>
        <ac:parameter ac:name="Marker">true</ac:parameter>
        <ac:rich-text-body>
          <p>
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Div</h1>
      <ac:structured-macro ac:macro-id="cf308e00-cb7b-401f-8d16-ba98183f1fcf" ac:name="html-div" ac:schema-version="1">
        <ac:parameter ac:name="StripPWrap">true</ac:parameter>
        <ac:parameter ac:name="Custom">data-animal="cat" data-color="red"</ac:parameter>
        <ac:parameter ac:name="Marker">true</ac:parameter>
        <ac:rich-text-body>
          <p>This is a DIV element</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Embed</h1>
      <p>
        <ac:structured-macro ac:macro-id="093a4245-8f3f-489f-9586-e44c91b51b96" ac:name="html-embed" ac:schema-version="1">
          <ac:parameter ac:name="Src">https://www.w3schools.com/tags/helloworld.swf</ac:parameter>
          <ac:parameter ac:name="name">
            <ri:attachment ri:filename="vendorLogo.png"/>
          </ac:parameter>
          <ac:parameter ac:name="Title">Flash Movie</ac:parameter>
          <ac:parameter ac:name="Height">200</ac:parameter>
          <ac:parameter ac:name="Width">200</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Footer</h1>
      <ac:structured-macro ac:macro-id="9f224048-ec75-4b8e-8275-3cd8505675ac" ac:name="html-footer" ac:schema-version="1">
        <ac:parameter ac:name="Id">my-footer</ac:parameter>
        <ac:rich-text-body>
          <p>Footer</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Figure / HTML Figure Caption</h1>
      <p>
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="137f0e4c-22e1-4519-ba44-44295bc1ef81" ac:name="html-figure" ac:schema-version="1">
        <ac:parameter ac:name="Style">margin:0px;</ac:parameter>
        <ac:parameter ac:name="Title">A Figure...</ac:parameter>
        <ac:parameter ac:name="Class">my-class</ac:parameter>
        <ac:parameter ac:name="Id">my-figure</ac:parameter>
        <ac:rich-text-body>
          <p>
            <ac:structured-macro ac:macro-id="e2bc01a2-1a3e-445f-bc54-c42e4fe7ec9f" ac:name="html-img" ac:schema-version="1">
              <ac:parameter ac:name="Usemap">#myMountain</ac:parameter>
              <ac:parameter ac:name="name">
                <ri:attachment ri:filename="mountain-2143877_640.jpg"/>
              </ac:parameter>
              <ac:parameter ac:name="Attachment">true</ac:parameter>
            </ac:structured-macro>
          </p>
          <ac:structured-macro ac:macro-id="31b45f69-ed45-4f43-adbf-f47b5ca33cab" ac:name="html-figcaption" ac:schema-version="1">
            <ac:parameter ac:name="Style">font-style:italic;color:#000099;</ac:parameter>
            <ac:rich-text-body>
              <p>Fig. 1 - This is a beautiful mountain.</p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Img</h1>
      <p>
        <ac:structured-macro ac:macro-id="b0cbc3d2-0412-46fd-b0d1-8e8e98be58f0" ac:name="html-img" ac:schema-version="1">
          <ac:parameter ac:name="Align">left</ac:parameter>
          <ac:parameter ac:name="Src">https://georgelewe.atlassian.net/wiki/download/attachments/98861059/BSV?version=1&amp;modificationDate=1505247766867&amp;cacheVersion=1&amp;api=v2</ac:parameter>
          <ac:parameter ac:name="Usemap">#myMap</ac:parameter>
          <ac:parameter ac:name="Alt">Lewe.com Logo</ac:parameter>
          <ac:parameter ac:name="name">
            <ri:attachment ri:filename="vendorLogo.png"/>
          </ac:parameter>
          <ac:parameter ac:name="Title">Lewe.com</ac:parameter>
          <ac:parameter ac:name="Attachment">true</ac:parameter>
        </ac:structured-macro> <strong>Lorem ipsum</strong> is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.</p>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Image Map</h1>
      <ac:structured-macro ac:macro-id="95320eda-7bba-46f0-b74f-a234a598adeb" ac:name="info" ac:schema-version="1">
        <ac:rich-text-body>
          <p>The HTMl Image Map here specifies a rectangle in the mountain image. From upper left corner, 100px width and height, link to Lewe.com.</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="97739782-0972-4900-a89e-44b5865c498b" ac:name="html-map" ac:schema-version="1">
        <ac:parameter ac:name="Name">myMountain</ac:parameter>
        <ac:rich-text-body>
          <p>
            <ac:structured-macro ac:macro-id="a1ed8314-1028-44e8-a0d0-d5a25bef620b" ac:name="html-area" ac:schema-version="1">
              <ac:parameter ac:name="Target">blank</ac:parameter>
              <ac:parameter ac:name="Rel">author</ac:parameter>
              <ac:parameter ac:name="Href">http://www.lewe.com</ac:parameter>
              <ac:parameter ac:name="Title">Lewe.com</ac:parameter>
              <ac:parameter ac:name="Coords">0,0,100,100</ac:parameter>
            </ac:structured-macro>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Srtikethrough</h1>
      <ac:structured-macro ac:macro-id="0d967cd0-885c-4bcc-af8d-5dca1f9c11f0" ac:name="html-strikethrough" ac:schema-version="1">
        <ac:rich-text-body>
          <p>This is strikethrough text</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Progress Bar</h1>
      <p>
        <ac:structured-macro ac:macro-id="6278d294-e227-4962-969e-13603db46110" ac:name="html-progress" ac:schema-version="1">
          <ac:parameter ac:name="Max">100</ac:parameter>
          <ac:parameter ac:name="Value">34</ac:parameter>
          <ac:parameter ac:name="Style">padding:20px;</ac:parameter>
          <ac:parameter ac:name="Height">20px</ac:parameter>
          <ac:parameter ac:name="Width">200px</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Script</h1>
      <ac:structured-macro ac:macro-id="a29fb87d-05c0-49cc-be63-7956085ca2f9" ac:name="html-script" ac:schema-version="1"/>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Small</h1>
      <ac:structured-macro ac:macro-id="5ab0f927-41eb-4055-9678-328c1a9d7a6f" ac:name="html-small" ac:schema-version="1">
        <ac:rich-text-body>
          <p>This small text.</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Spacer</h1>
      <ac:structured-macro ac:macro-id="d98aeca5-1edb-4cf7-aece-5351bd8d627b" ac:name="html-spacer" ac:schema-version="1">
        <ac:parameter ac:name="Height">80</ac:parameter>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Span</h1>
      <ac:structured-macro ac:macro-id="ac81bce2-683e-40a8-8733-f377ec4785b7" ac:name="html-span" ac:schema-version="1">
        <ac:parameter ac:name="StripPWrap">true</ac:parameter>
        <ac:parameter ac:name="Custom">data-animal="cat" data-color="red"</ac:parameter>
        <ac:parameter ac:name="Marker">true</ac:parameter>
        <ac:rich-text-body>
          <p>SPAN</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>HTML Style</h1>
      <ac:structured-macro ac:macro-id="d8ecd88f-4160-42c9-a6b0-956da87d1229" ac:name="html-style" ac:schema-version="1">
        <ac:plain-text-body><![CDATA[#my-footer {
   color: #ff0000;
   font-weight: bold;
   font-size: 2em;
}]]></ac:plain-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
</ac:layout>

Sample Code AIU Macros

<ac:layout>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Badge</h1>
      <p>
        <ac:structured-macro ac:macro-id="2343e7c8-86b2-42bd-b8f7-6a84eccf920a" ac:name="hat-aui-badge" ac:schema-version="1"/> <ac:structured-macro ac:macro-id="6504dfd5-9506-4708-b263-52c861105829" ac:name="hat-aui-badge" ac:schema-version="1">
          <ac:parameter ac:name="Primary">true</ac:parameter>
          <ac:parameter ac:name="Text">32+</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Button</h1>
      <p>The buttons are available in several variations:</p>
      <table class="wrapped relative-table" style="width: 36.9197%;">
        <colgroup> <col style="width: 27.6799%;"/> <col style="width: 11.8796%;"/> <col style="width: 11.1142%;"/> <col style="width: 5.77276%;"/> <col style="width: 43.6123%;"/> </colgroup>
        <tbody>
          <tr>
            <th>Sample</th>
            <th>Button Style</th>
            <th>Button Size</th>
            <th colspan="1">Icon</th>
            <th colspan="1">Comment</th>
          </tr>
          <tr>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="ca0b087c-7500-469d-9bc5-cb8edb1de0ed" ac:name="aui-button" ac:schema-version="1"/>
                </p>
              </div>
            </td>
            <td>Normal</td>
            <td>Normal</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">
              <br/>
            </td>
          </tr>
          <tr>
            <td colspan="1">
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="43683dbe-7c33-4437-96f5-4a9ac644a387" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="Size">compact</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td colspan="1">Normal</td>
            <td colspan="1">Compact</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">
              <br/>
            </td>
          </tr>
          <tr>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="d2b1e2ef-770b-4afa-a751-c5b10ed9e263" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="Style">primary</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>Primary</td>
            <td>Normal</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">
              <br/>
            </td>
          </tr>
          <tr>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="edda44ef-b2f2-4743-a4e5-093f8bb9311c" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="Size">compact</ac:parameter>
                    <ac:parameter ac:name="Style">primary</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>Primary</td>
            <td>Compact</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">
              <br/>
            </td>
          </tr>
          <tr>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="453cc284-5ae5-4756-81dd-92606cb3ad6a" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="Style">subtle</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>Subtle</td>
            <td>Normal</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">The button shape shows on mouse-over</td>
          </tr>
          <tr>
            <td colspan="1">
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="95dab8d8-8e00-4c38-8fd2-675570b73ee7" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="Size">compact</ac:parameter>
                    <ac:parameter ac:name="Style">subtle</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td colspan="1">Subtle</td>
            <td colspan="1">Compact</td>
            <td colspan="1">
              <br/>
            </td>
            <td colspan="1">The button shape shows on mouse-over</td>
          </tr>
          <tr>
            <td colspan="1">
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="af3d8e9c-831f-494e-9d07-757af611a406" ac:name="aui-button" ac:schema-version="1">
                    <ac:parameter ac:name="ButtonIcon">true</ac:parameter>
                    <ac:parameter ac:name="Style">primary</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td colspan="1">Primary</td>
            <td colspan="1">Normal</td>
            <td colspan="1">like</td>
            <td colspan="1">Any of the above can be combined with one of the AUI icons</td>
          </tr>
        </tbody>
      </table>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Dialog</h1>
      <p>
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="a79f1724-1a9a-4bd4-beb5-252e82d85309" ac:name="aui-dialog" ac:schema-version="1">
        <ac:parameter ac:name="Footer">This is a dialog footer</ac:parameter>
        <ac:parameter ac:name="ButtonTitle">Open normal dialog</ac:parameter>
        <ac:rich-text-body>
          <p>Hello, this is a normal dialog</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="1e6ba8ed-913f-49bd-acd0-fdaef37268bb" ac:name="aui-dialog" ac:schema-version="1">
        <ac:parameter ac:name="Warning">true</ac:parameter>
        <ac:parameter ac:name="ButtonPrimary">true</ac:parameter>
        <ac:parameter ac:name="Footer">This is a dialog footer</ac:parameter>
        <ac:parameter ac:name="Id">dialog-02</ac:parameter>
        <ac:parameter ac:name="ButtonTitle">Open warning dialog</ac:parameter>
        <ac:rich-text-body>
          <p>Hello, this is a warning dialog</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Dropdown Menu</h1>
      <ac:structured-macro ac:macro-id="e6561537-7a05-4030-889a-5277a61806bb" ac:name="aui-dropdown-button" ac:schema-version="1">
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <ac:structured-macro ac:macro-id="22c88745-86b3-48ce-93f4-75f7f80860a0" ac:name="aui-dropdown-menu-section" ac:schema-version="1">
            <ac:parameter ac:name="Label">Favorite Links</ac:parameter>
            <ac:rich-text-body>
              <p>
                <ac:structured-macro ac:macro-id="3f708260-66b3-4c94-837b-70f085aa90a7" ac:name="aui-dropdown-menu-link" ac:schema-version="1">
                  <ac:parameter ac:name="Title">Atlassian</ac:parameter>
                  <ac:parameter ac:name="Link">http://www.atlassian.com</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="445c9eea-bea6-4bb3-ad3c-52158096efa0" ac:name="aui-dropdown-menu-link" ac:schema-version="1">
                  <ac:parameter ac:name="Title">Lufthansa Systems</ac:parameter>
                  <ac:parameter ac:name="Link">http://www.lhsystems.com</ac:parameter>
                </ac:structured-macro>
              </p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <ac:structured-macro ac:macro-id="f6f27e44-da08-4acf-81b4-ba306a0f3b7e" ac:name="aui-dropdown-menu-section" ac:schema-version="1">
            <ac:parameter ac:name="Label">Other Links</ac:parameter>
            <ac:rich-text-body>
              <p>
                <ac:structured-macro ac:macro-id="8a3443e5-5cc6-4579-ab0f-759e3ed6791c" ac:name="aui-dropdown-menu-link" ac:schema-version="1">
                  <ac:parameter ac:name="Title">Lewe.com</ac:parameter>
                  <ac:parameter ac:name="Link">http://www.lewe.com</ac:parameter>
                </ac:structured-macro>
              </p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Flag</h1>
      <p>This macro shows a flag sliding in at the upper right and disappearing automatically.</p>
      <ac:structured-macro ac:macro-id="f5d638e2-063e-4bc4-93e4-0467c9f77ed6" ac:name="aui-flag" ac:schema-version="1">
        <ac:parameter ac:name="Close">auto</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message of the flag</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Icon</h1>
      <p>
        <ac:structured-macro ac:macro-id="b936bc08-ba40-4e87-b090-5092047203ed" ac:name="aui-icon" ac:schema-version="1">
          <ac:parameter ac:name="Size">large</ac:parameter>
          <ac:parameter ac:name="Style">color:#990000;</ac:parameter>
        </ac:structured-macro>
      </p>
      <p>.</p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Lozenge</h1>
      <table class="wrapped">
        <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
        <tbody>
          <tr>
            <th>Style</th>
            <th>Complete</th>
            <th>Current</th>
            <th>Default</th>
            <th>Error</th>
            <th>Moved</th>
            <th>Success</th>
          </tr>
          <tr>
            <td>Normal</td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="c33fc8af-d21b-4c0a-83c8-14a76c49bcaf" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">complete</ac:parameter>
                    <ac:parameter ac:name="Text">complete</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="d13260c0-e284-4976-a49a-5d5f4303f5da" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">current</ac:parameter>
                    <ac:parameter ac:name="Text">current</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <div class="content-wrapper">
                  <p>
                    <ac:structured-macro ac:macro-id="1ac27177-d750-4a64-a259-8a351a22c35e" ac:name="aui-lozenge" ac:schema-version="1">
                      <ac:parameter ac:name="Text">default</ac:parameter>
                    </ac:structured-macro>
                  </p>
                </div>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="41bcdf81-f1b5-456b-8401-d746cd7fecb8" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">error</ac:parameter>
                    <ac:parameter ac:name="Text">error</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="f49711ae-d098-4606-bf75-144414139897" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">moved</ac:parameter>
                    <ac:parameter ac:name="Text">moved</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="85a335ca-f74a-4f67-b5ca-05136ce83812" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">success</ac:parameter>
                    <ac:parameter ac:name="Text">success</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
          </tr>
          <tr>
            <td>Outlined</td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="94362e05-60da-45e5-9e8b-b79706864e35" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">complete</ac:parameter>
                    <ac:parameter ac:name="Style">outline</ac:parameter>
                    <ac:parameter ac:name="Text">complete</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="7b3cc262-30ad-4c99-ac69-3e1489f3bba3" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">current</ac:parameter>
                    <ac:parameter ac:name="Style">outline</ac:parameter>
                    <ac:parameter ac:name="Text">current</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <div class="content-wrapper">
                  <p>
                    <ac:structured-macro ac:macro-id="97e4749a-a352-45dd-8538-49d9dba50e0b" ac:name="aui-lozenge" ac:schema-version="1">
                      <ac:parameter ac:name="Style">outline</ac:parameter>
                      <ac:parameter ac:name="Text">default</ac:parameter>
                    </ac:structured-macro>
                  </p>
                </div>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="3609caa8-f342-47f3-b4c0-10a0f814d36c" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">error</ac:parameter>
                    <ac:parameter ac:name="Style">outline</ac:parameter>
                    <ac:parameter ac:name="Text">error</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="678f42a7-2b4d-4bfd-8294-4feac53b4f7a" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">moved</ac:parameter>
                    <ac:parameter ac:name="Style">outline</ac:parameter>
                    <ac:parameter ac:name="Text">moved</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
            <td>
              <div class="content-wrapper">
                <p>
                  <ac:structured-macro ac:macro-id="330349e1-2fb9-435c-b67c-2754a2c76000" ac:name="aui-lozenge" ac:schema-version="1">
                    <ac:parameter ac:name="Color">success</ac:parameter>
                    <ac:parameter ac:name="Style">outline</ac:parameter>
                    <ac:parameter ac:name="Text">success</ac:parameter>
                  </ac:structured-macro>
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Message</h1>
      <ac:structured-macro ac:macro-id="18fb4751-1d57-4838-97a7-5a6e21df1f69" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Title">My "info" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="ce79f0d5-9c07-4077-8e19-bb0ae40e54cb" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Closeable">true</ac:parameter>
        <ac:parameter ac:name="Color">error</ac:parameter>
        <ac:parameter ac:name="Title">My "error" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="a68c4034-9f76-4e75-804d-4e64b56dfc02" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Color">success</ac:parameter>
        <ac:parameter ac:name="Title">My "success" or "confirmation" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="dd56e33f-61e1-45fb-8ac6-7bd2cf72bdda" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Color">warning</ac:parameter>
        <ac:parameter ac:name="Title">My "warning" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="12a4f153-6572-41f6-bf6b-1417697d251f" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Color">change</ac:parameter>
        <ac:parameter ac:name="Title">My "change" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="f161679e-0f66-49ce-bacf-f5e60f637082" ac:name="aui-message" ac:schema-version="1">
        <ac:parameter ac:name="Color">confirmation</ac:parameter>
        <ac:parameter ac:name="Fadeout">true</ac:parameter>
        <ac:parameter ac:name="Title">My "confirmation" Message</ac:parameter>
        <ac:rich-text-body>
          <p>This is the message</p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Progress Bar</h1>
      <p>
        <ac:structured-macro ac:macro-id="592c08d4-7ebe-4dcd-ba00-7ddea2cc3d45" ac:name="aui-progress-bar" ac:schema-version="1">
          <ac:parameter ac:name="Progress">76</ac:parameter>
          <ac:parameter ac:name="Height">20px</ac:parameter>
          <ac:parameter ac:name="Width">400px</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <h1>AUI Progress Bar 2</h1>
      <p>
        <ac:structured-macro ac:macro-id="90a1df33-4f25-4712-9f1a-d366a826dd6d" ac:name="aui-progress-bar2" ac:schema-version="1">
          <ac:parameter ac:name="Progress">52</ac:parameter>
          <ac:parameter ac:name="Indeterminate">true</ac:parameter>
          <ac:parameter ac:name="Height">20px</ac:parameter>
          <ac:parameter ac:name="Width">400px</ac:parameter>
        </ac:structured-macro>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
</ac:layout>