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 Image

Historical City gate of the German town Dülmen in the state of North Rhine Westfalia.

Photo: (C) 2018 by George Lewe License: Open Source. You can use it for any commercial and noncommercial purpose.

Sample Code

<h1>Bootstrap Alertbox</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="38b0075c-b18e-45bb-871a-c27388c90f91" ac:name="alertbox" ac:schema-version="1">
  <ac:parameter ac:name="Dismissible">true</ac:parameter>
  <ac:parameter ac:name="Heading">My Alertbox</ac:parameter>
  <ac:parameter ac:name="Style">danger</ac:parameter>
  <ac:rich-text-body>
    <p>This is the body of the alertbox macro</p>
  </ac:rich-text-body>
</ac:structured-macro>
<h1>Bootstrap Badge</h1>
<p>
  <br/>
</p>
<p>
  <ac:structured-macro ac:macro-id="638c3dd8-d46d-4100-a558-b278443275ee" ac:name="badge" ac:schema-version="1"/>
</p>
<p>
  <ac:structured-macro ac:macro-id="f8b49b8b-6967-43d9-8a49-296aaa1fde08" ac:name="badge" ac:schema-version="1">
    <ac:parameter ac:name="Size">100%</ac:parameter>
    <ac:parameter ac:name="Style">warning</ac:parameter>
  </ac:structured-macro>
</p>
<p>
  <ac:structured-macro ac:macro-id="a37f5a55-ca62-485f-830e-c65bc96e0270" ac:name="badge" ac:schema-version="1">
    <ac:parameter ac:name="DisplayAs">Button</ac:parameter>
    <ac:parameter ac:name="Style">danger</ac:parameter>
    <ac:parameter ac:name="Prefix">In a button</ac:parameter>
    <ac:parameter ac:name="ButtonStyle">warning</ac:parameter>
  </ac:structured-macro>
</p>
<h1>Bootstrap Button</h1>
<p>
  <br/>
</p>
<p>
  <ac:structured-macro ac:macro-id="98c06476-e548-487f-a4cd-d825b1c43436" ac:name="button" ac:schema-version="1">
    <ac:parameter ac:name="LinkTooltip">Tooltip...</ac:parameter>
    <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
  </ac:structured-macro>
</p>
<p>
  <ac:structured-macro ac:macro-id="ddb9960c-543e-40f6-a900-140f25dccf15" ac:name="button" ac:schema-version="1">
    <ac:parameter ac:name="LinkTooltip">Tooltip...</ac:parameter>
    <ac:parameter ac:name="Style">danger</ac:parameter>
    <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
  </ac:structured-macro>
</p>
<p>
  <ac:structured-macro ac:macro-id="a857e410-b328-49e3-bd80-0bd8d9e0253c" ac:name="button" ac:schema-version="1">
    <ac:parameter ac:name="LinkTooltip">Tooltip...</ac:parameter>
    <ac:parameter ac:name="Style">success (3D)</ac:parameter>
    <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
  </ac:structured-macro>
</p>
<h1>Bootstrap Button Group</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="77163c07-87a5-4049-829a-3756845facc5" ac:name="buttongroup" ac:schema-version="1">
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="698c207a-0c5c-45e4-80a9-8ba6b47040e7" ac:name="button" ac:schema-version="1">
        <ac:parameter ac:name="Style">info</ac:parameter>
        <ac:parameter ac:name="Text">Button 1</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="f7e0652e-9062-47e1-b0fa-174da876c9fb" ac:name="button" ac:schema-version="1">
        <ac:parameter ac:name="Style">info</ac:parameter>
        <ac:parameter ac:name="Text">Button 2</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="a04f0382-9d6d-44b9-ab2e-1143c21896e4" ac:name="button" ac:schema-version="1">
        <ac:parameter ac:name="Style">info</ac:parameter>
        <ac:parameter ac:name="Text">Button 3</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="dfac3faa-1945-42aa-ab24-c0db2d87f0b1" ac:name="button" ac:schema-version="1">
        <ac:parameter ac:name="Style">info</ac:parameter>
        <ac:parameter ac:name="Text">Button 4</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<h1>Bootstrap Callout</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="0f825137-1f3d-4551-b2c5-bc329c6402d9" ac:name="callout" ac:schema-version="1">
  <ac:rich-text-body>
    <p>This is the body of the Callout macro</p>
  </ac:rich-text-body>
</ac:structured-macro>
<h1>Bootstrap Card</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="49329ffb-7d57-4a60-9059-634c802e304c" ac:name="card" ac:schema-version="1">
  <ac:parameter ac:name="Header">The Header</ac:parameter>
  <ac:parameter ac:name="Footer">The Footer</ac:parameter>
  <ac:parameter ac:name="name">
    <ri:attachment ri:filename="duelmen.jpg"/>
  </ac:parameter>
  <ac:parameter ac:name="Style">info</ac:parameter>
  <ac:parameter ac:name="Image">true</ac:parameter>
  <ac:parameter ac:name="Width">400px</ac:parameter>
  <ac:rich-text-body>
    <p>
      <em>City Gate of Dülmen</em>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
  <br/>
</p>
<h1>Bootstrap List Group</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="88e62a66-0c1e-4c4c-9190-21533b3c6b30" ac:name="bsvlistgroup" ac:schema-version="1">
  <ac:parameter ac:name="Width">300px</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="00dcd59d-5035-4cd1-9987-fd751c48912a" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="Status">Active</ac:parameter>
        <ac:parameter ac:name="ItemText">Active list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="936f54a9-e729-4986-8d6a-d216cba80b76" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">Another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="b463e48c-08d1-47a4-8699-daa28b899d27" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">And another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="0d207efe-d892-4217-9748-a31140c26644" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">Guess what... another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
  <ac:structured-macro ac:macro-id="ad2dd644-4787-4ea7-a9f4-f2b8bb11a402" ac:name="bsvspacer" ac:schema-version="1"/>
</p>
<ac:structured-macro ac:macro-id="2b166a39-6b74-47c8-b19e-5c0b094a55e7" ac:name="bsvlistgroup" ac:schema-version="1">
  <ac:parameter ac:name="Horizontal">true</ac:parameter>
  <ac:parameter ac:name="Width">1080px</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="3a35ec60-7cb3-4a80-bfd3-55b38169b2f9" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="Status">Active</ac:parameter>
        <ac:parameter ac:name="ItemText">Active list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="5d8ac6f9-db36-4cac-adb6-082b1d231e4e" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">Another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="d0de60ef-c538-49f5-8293-76c305fe199b" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">And another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="513f9061-bd6f-4df0-a5a1-5509f6720f96" ac:name="bsvlistgroupitem" ac:schema-version="1">
        <ac:parameter ac:name="ItemText">Guess what... another list group item</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
  <ac:structured-macro ac:macro-id="f812847f-8a0b-4e2e-a4c4-6b2397b1dc38" ac:name="bsvspacer" ac:schema-version="1"/>
</p>
<table class="wrapped relative-table" style="width: 61.4436%;">
  <colgroup> <col style="width: 32.9613%;"/> <col style="width: 33.3333%;"/> <col style="width: 33.7054%;"/> </colgroup>
  <tbody>
    <tr>
      <th>Default Items</th>
      <th>Active Items</th>
      <th>Disabled Items</th>
    </tr>
    <tr>
      <td>
        <div class="content-wrapper">
          <p class="auto-cursor-target">
            <br/>
          </p>
          <ac:structured-macro ac:macro-id="84a3a443-dd71-4699-8ce0-84eb781f78dd" ac:name="bsvlistgroup" ac:schema-version="1">
            <ac:parameter ac:name="Width">300px</ac:parameter>
            <ac:rich-text-body>
              <p>
                <ac:structured-macro ac:macro-id="a1d84c4a-d6a5-4700-9f35-9492f848428a" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="LinkTooltip">Lewe.com</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in default style</ac:parameter>
                  <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="d98974fc-9c81-49d4-8f6e-7c08cde6a453" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in danger style</ac:parameter>
                  <ac:parameter ac:name="Style">danger</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="c6ae0a02-0e4a-4567-94fc-bd6e8aeb0177" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in dark style</ac:parameter>
                  <ac:parameter ac:name="Style">dark</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="8b49dfc2-8507-48f9-baa3-60e8bab84130" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in info style</ac:parameter>
                  <ac:parameter ac:name="Style">info</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="f25982e0-aa81-4661-bb63-66812c7c42cf" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in light style</ac:parameter>
                  <ac:parameter ac:name="Style">light</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="beb388e9-5cce-4821-a03f-ef4b0cf585c7" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in primary style</ac:parameter>
                  <ac:parameter ac:name="Style">primary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="f7e8cd08-1ed9-4c8c-85ab-1df4b40969e0" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in secondary style</ac:parameter>
                  <ac:parameter ac:name="Style">secondary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="17b05ead-0f38-4420-b271-1d662078f018" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in success style</ac:parameter>
                  <ac:parameter ac:name="Style">success</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="b0228b21-e987-4e03-bb2b-261cb6854e87" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in warning style</ac:parameter>
                  <ac:parameter ac:name="Style">warning</ac:parameter>
                </ac:structured-macro>
              </p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p class="auto-cursor-target">
            <br/>
          </p>
          <ac:structured-macro ac:macro-id="b8930af0-3fa7-4ed5-b7d0-81bf87a31efd" ac:name="bsvlistgroup" ac:schema-version="1">
            <ac:parameter ac:name="Width">300px</ac:parameter>
            <ac:rich-text-body>
              <p>
                <ac:structured-macro ac:macro-id="06472188-6ba3-4d4e-bca4-a8f338406b92" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="LinkTooltip">Lewe.com</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in default style</ac:parameter>
                  <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="044b64e8-6c0f-4f6b-a78c-8fd1253b60ee" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in danger style</ac:parameter>
                  <ac:parameter ac:name="Style">danger</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="2ba40145-e52c-4573-af2d-bc73706b030d" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in dark style</ac:parameter>
                  <ac:parameter ac:name="Style">dark</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="c623f29f-bef0-416a-8e5a-da357be6c882" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in info style</ac:parameter>
                  <ac:parameter ac:name="Style">info</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="f7ace1f2-fd6d-441d-93e6-878d877c0fd8" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in light style</ac:parameter>
                  <ac:parameter ac:name="Style">light</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="ec09d7cc-e0ec-410d-ade4-a73fa4d0c23a" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in primary style</ac:parameter>
                  <ac:parameter ac:name="Style">primary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="9cd9ad32-0903-4e45-a68d-3db5d4a0a1f7" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in secondary style</ac:parameter>
                  <ac:parameter ac:name="Style">secondary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="26447a38-0cd4-48d3-87ff-3bf1d451ca92" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in success style</ac:parameter>
                  <ac:parameter ac:name="Style">success</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="1e4c79e1-e5fd-4846-94e0-1573ad0b3b9c" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Active</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">An active item in warning style</ac:parameter>
                  <ac:parameter ac:name="Style">warning</ac:parameter>
                </ac:structured-macro>
              </p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p class="auto-cursor-target">
            <br/>
          </p>
          <ac:structured-macro ac:macro-id="6950cd44-a0b1-478d-8446-43dc1415abf7" ac:name="bsvlistgroup" ac:schema-version="1">
            <ac:parameter ac:name="Width">300px</ac:parameter>
            <ac:rich-text-body>
              <p>
                <ac:structured-macro ac:macro-id="1ee9e705-b9d0-4704-b14f-fac27676ded3" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="LinkTooltip">Lewe.com</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in default style</ac:parameter>
                  <ac:parameter ac:name="Link">https://www.lewe.com</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="d366651b-9218-4b0a-89c0-8def1c3794a1" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in danger style</ac:parameter>
                  <ac:parameter ac:name="Style">danger</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="dd5d5767-c75f-44fc-9cc7-15fe2d52b559" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in dark style</ac:parameter>
                  <ac:parameter ac:name="Style">dark</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="a20c5f7a-324e-4d9d-9367-830916de2bc8" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A normal item in info style</ac:parameter>
                  <ac:parameter ac:name="Style">info</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="a92961ef-f4a0-44af-9183-fef82e9f352c" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in light style</ac:parameter>
                  <ac:parameter ac:name="Style">light</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="f0ba1144-0df6-49cc-b9e2-fb31c99d5c26" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in primary style</ac:parameter>
                  <ac:parameter ac:name="Style">primary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="13fa2043-a445-4c7b-876d-5a1ea7db6b21" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in secondary style</ac:parameter>
                  <ac:parameter ac:name="Style">secondary</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="359ed5d2-3278-4d3b-8082-de5e46ab9bb1" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in success style</ac:parameter>
                  <ac:parameter ac:name="Style">success</ac:parameter>
                </ac:structured-macro>
              </p>
              <p>
                <ac:structured-macro ac:macro-id="c6503672-6543-4490-b520-3101bc4c7e49" ac:name="bsvlistgroupitem" ac:schema-version="1">
                  <ac:parameter ac:name="Status">Disabled</ac:parameter>
                  <ac:parameter ac:name="Target">New page</ac:parameter>
                  <ac:parameter ac:name="ItemText">A disabled item in warning style</ac:parameter>
                  <ac:parameter ac:name="Style">warning</ac:parameter>
                </ac:structured-macro>
              </p>
            </ac:rich-text-body>
          </ac:structured-macro>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h1>Bootstrap Jumbotron</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="aabc1f0a-2fb7-422c-817b-83cf7ff305a6" ac:name="jumbotron" ac:schema-version="1">
  <ac:rich-text-body>
    <p>This is the body of the Jumbotron macro</p>
  </ac:rich-text-body>
</ac:structured-macro>
<h1>Bootstrap Panel</h1>
<p>
  <br/>
</p>
<ac:structured-macro ac:macro-id="8fee22aa-b79b-4310-a905-869a08cd69d2" ac:name="bsvpanel" ac:schema-version="1">
  <ac:parameter ac:name="CSS">width:400px;</ac:parameter>
  <ac:rich-text-body>
    <p>Text</p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>
  <ac:structured-macro ac:macro-id="f9554a48-00c7-4a29-8686-49e59bbd4167" ac:name="bsvspacer" ac:schema-version="1"/>
</p>
<ac:structured-macro ac:macro-id="af90e44a-e1fd-4135-a9a2-fb7544c994f3" ac:name="bsvpanel" ac:schema-version="1">
  <ac:parameter ac:name="BorderBottom">false</ac:parameter>
  <ac:parameter ac:name="CSS">padding:8px;border-width:8px !important;width:400px;</ac:parameter>
  <ac:parameter ac:name="BorderColor">warning</ac:parameter>
  <ac:parameter ac:name="BorderRadius">rounded</ac:parameter>
  <ac:parameter ac:name="TextColor">light</ac:parameter>
  <ac:parameter ac:name="BackgroundColor">info</ac:parameter>
  <ac:parameter ac:name="BorderRight">false</ac:parameter>
  <ac:parameter ac:name="BorderTop">false</ac:parameter>
  <ac:rich-text-body>
    <h2>Heading 2</h2>
    <p>
      <em>This macro adds a customizable Bootstrap panel to your page.</em>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>
  <ac:structured-macro ac:macro-id="fe3bfcf6-4bdc-456c-a490-b84a61f55e49" ac:name="bsvspacer" ac:schema-version="1"/>
</p>
<ac:structured-macro ac:macro-id="fa04a5ad-121c-4717-99ff-1a75da45f60a" ac:name="bsvpanel" ac:schema-version="1">
  <ac:parameter ac:name="CSS">width:50px;height:50px;border-width:4px !important;text-align:center;font-size:32px;</ac:parameter>
  <ac:parameter ac:name="BorderColor">warning</ac:parameter>
  <ac:parameter ac:name="BorderRadius">rounded-circle</ac:parameter>
  <ac:parameter ac:name="TextColor">white</ac:parameter>
  <ac:parameter ac:name="BackgroundColor">danger</ac:parameter>
  <ac:rich-text-body>A</ac:rich-text-body>
</ac:structured-macro>
<h1>Bootstrap Progress Bar</h1>
<p>
  <br/>
</p>
<p>
  <ac:structured-macro ac:macro-id="ce69dba2-77cb-4a12-a093-e71eece02062" ac:name="progressbar" ac:schema-version="1"/>
</p>
<p>
  <ac:structured-macro ac:macro-id="b5c5c91e-438d-478d-9920-76ec515715c4" ac:name="progressbar" ac:schema-version="1">
    <ac:parameter ac:name="Progress">44%</ac:parameter>
    <ac:parameter ac:name="Striped">true</ac:parameter>
    <ac:parameter ac:name="Style">success</ac:parameter>
  </ac:structured-macro>
</p>
<p>
  <ac:structured-macro ac:macro-id="cc96b36b-046f-42d4-bf08-71eca0d4f295" ac:name="progressbar" ac:schema-version="1">
    <ac:parameter ac:name="Progress">88%</ac:parameter>
    <ac:parameter ac:name="Animated">true</ac:parameter>
    <ac:parameter ac:name="Striped">true</ac:parameter>
    <ac:parameter ac:name="Style">warning</ac:parameter>
    <ac:parameter ac:name="Width">400px</ac:parameter>
  </ac:structured-macro>
</p>
<p>
  <ac:structured-macro ac:macro-id="9b74ce60-1532-41e9-8836-5e975809978e" ac:name="progressbar" ac:schema-version="1">
    <ac:parameter ac:name="Progress">88%</ac:parameter>
    <ac:parameter ac:name="Animated">true</ac:parameter>
    <ac:parameter ac:name="Striped">true</ac:parameter>
    <ac:parameter ac:name="Style">danger</ac:parameter>
    <ac:parameter ac:name="Width">400px</ac:parameter>
  </ac:structured-macro>
</p>
<table class="wrapped relative-table" style="width: 300.0px;">
  <colgroup> <col style="width: 50.0%;"/> <col style="width: 50.0%;"/> </colgroup>
  <tbody>
    <tr>
      <th>Start Date</th>
      <th style="text-align: right;">End Date</th>
    </tr>
    <tr>
      <td>2021-07-01</td>
      <td style="text-align: right;">2021-12-31</td>
    </tr>
    <tr>
      <td colspan="2">
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="aa022c89-c083-49d0-a212-f169cae2b215" ac:name="bsvprogressbar" ac:schema-version="1">
              <ac:parameter ac:name="StartDate">2021-07-01</ac:parameter>
              <ac:parameter ac:name="CalendaricProgress">true</ac:parameter>
              <ac:parameter ac:name="EndDate">2021-12-31</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>
  <br/>
</p>
<h1>Bootstrap Spacer</h1>
<p>
  <ac:structured-macro ac:macro-id="8d47cc02-8584-4e4d-b925-1da85de64938" ac:name="bsvspacer" ac:schema-version="1"/>
</p>
<h1>Bootstrap Spinner</h1>
<p>
  <br/>
</p>
<table class="wrapped">
  <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
  <tbody>
    <tr>
      <th>Shape</th>
      <th>Small</th>
      <th>Normal</th>
      <th>Medium</th>
      <th>Large</th>
      <th colspan="1">As Button</th>
    </tr>
    <tr>
      <td>Border</td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="8b4991c2-ade2-445a-bf27-132453aaadc3" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Size">Small</ac:parameter>
              <ac:parameter ac:name="Style">danger</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="9a692556-071a-472c-a593-6601157548f2" ac:name="spinner" ac:schema-version="1"/>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="e840cef1-e5f0-4da6-b394-48401f3e46d3" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Size">Medium</ac:parameter>
              <ac:parameter ac:name="Style">warning</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="55ac400f-2dbc-4e87-bd87-bf7fec873faf" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Size">Large</ac:parameter>
              <ac:parameter ac:name="Style">info</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td colspan="1">
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="363f8f7b-cef6-4479-9c98-1743393f17ed" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Size">Large</ac:parameter>
              <ac:parameter ac:name="Style">danger</ac:parameter>
              <ac:parameter ac:name="DisplayAsButton">true</ac:parameter>
              <ac:parameter ac:name="ButtonText">This page is currently being updated...</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
    </tr>
    <tr>
      <td>Growing</td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="d075188d-9d65-430c-b1fb-3f7b16bf281c" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Shape">Growing Circle</ac:parameter>
              <ac:parameter ac:name="Size">Small</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="00ebb5fb-d90b-4f05-beed-23a43fef039b" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Shape">Growing Circle</ac:parameter>
              <ac:parameter ac:name="Style">success</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="1906a31c-9625-4f09-a54e-0c0487bb4618" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Shape">Growing Circle</ac:parameter>
              <ac:parameter ac:name="Size">Medium</ac:parameter>
              <ac:parameter ac:name="Style">dark</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td>
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="7faded9e-f8c8-466e-866a-2c35c4d7de59" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Shape">Growing Circle</ac:parameter>
              <ac:parameter ac:name="Size">Large</ac:parameter>
              <ac:parameter ac:name="Style">danger</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
      <td colspan="1">
        <div class="content-wrapper">
          <p>
            <ac:structured-macro ac:macro-id="93de89f0-c7fa-479b-b4f1-97ab9cc00c8b" ac:name="spinner" ac:schema-version="1">
              <ac:parameter ac:name="Shape">Growing Circle</ac:parameter>
              <ac:parameter ac:name="Size">Large</ac:parameter>
              <ac:parameter ac:name="DisplayAsButton">true</ac:parameter>
            </ac:structured-macro>
          </p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p class="auto-cursor-target">
  <br/>
</p>
<p>
  <br/>
</p>