diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md
index 78aaa92c88..524a87b515 100644
--- a/docs/userGuide/syntax/annotations.md
+++ b/docs/userGuide/syntax/annotations.md
@@ -22,15 +22,49 @@ The x and y coordinates of each Annotate Point are relative to the image and are
<!-- Customize Point Header (default is empty) -->
<a-point x="75%" y="25%" content="This point is 75% from the left and 25% from the top" header="This has a header"/>
<!-- Customize Point Color (default color is green) -->
- <a-point x="33%" y="50%" content="This point is 33% from the left and 50% from the top" color="red"/>
+ <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top" color="red"/>
<!-- Customize Point Opacity (default opacity is 0.3) -->
- <a-point x="66%" y="50%" content="This point is 66% from the left and 50% from the top" opacity="0.7"/>
+ <a-point x="50%" y="50%" content="This point is 50% from the left and 50% from the top" opacity="0.7"/>
<!-- Customize Point Label (default is empty) -->
<a-point x="25%" y="75%" content="This point is 25% from the left and 75% from the top" label="1"/>
<!-- Customize Text Color (default color is black) -->
<a-point x="50%" y="75%" content="This point is 50% from the left and 75% from the top" textColor="white" color="black" label="2" opacity="1"/>
<!-- Customize Font Size (default font size is 14) -->
<a-point x="75%" y="75%" content="This point is 75% from the left and 75% from the top" fontSize="30" label="3"/>
+ <!-- Customize Label (default is a rounded button) -->
+ <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
+ <span class="badge bg-primary">Badge label</span>
+ </a-point>
+</annotate>
+</variable>
+</include>
+
+**Customising shapes for Annotate Point** <br>
+
+Annotate Points supports different shapes and customisation.
+
+The default shape used is a rounded button.
+
+<box type="warning" seamless>
+When using a customised shape, the options shape, color and opacity will not work.
+
+Style the shape to achieve the same effect.
+</box>
+
+<include src="codeAndOutput.md" boilerplate>
+<variable name="code">
+
+<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+ <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
+ <span class="badge bg-primary">Badge label</span>
+ </a-point>
+ <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top">
+ <pic src="../../images/deer.jpg" width="50" height="50">
+ </a-point>
+ <!-- Customised Annotate Point with styling-->
+ <a-point x="50%" y="50%" content="This point is 25% from the left and 50% from the top">
+ <div style="opacity: 90%; color: red">Custom</div>
+ </a-point>
</annotate>
</variable>
</include>
@@ -119,21 +153,21 @@ Here we showcase some use cases of the Annotate feature.
****`<a-point>` Options****
-| Name | Type | Default | Description |
-| --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| x | `String` | | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
-| y | `String` | | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
-| content | `String` | `''` | Annotate Point content.<br>The annotation content will be omitted if this is not provided. |
-| header | `String` | `''` | Annotate Point header.<br>The header will be omitted if this is not provided. |
-| trigger | `String` | `click` | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these. |
-| placement | `String` | `top` | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`. |
-| label | `String` | `''` | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>Note that labels should not be too long as they might overflow out of the point. |
-| size | `String` | `'40'` | The size of the point in pixels. |
-| color | `String` | `'green'` | The color of the point.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. |
-| opacity | `String` | `'0.3'` | The opacity of the point.<br>Supports range of values from `0` to `1`. |
-| fontSize | `String` | `'14'` | The font size of the label.<br>Supports any pixel size smaller than size of the point. |
-| textColor | `String` | `'black'` | The color of the label.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. |
-| legend | `String` | `'popover'` | The position of the Annotate Point content and header.<br>Supports: `popover`, `bottom`, `both`. |
+| Name | Type | Default | Description |
+| --------- | -------- | ----------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| x | `String` | | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
+| y | `String` | | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
+| content | `String` | `''` | Annotate Point content.<br>The annotation content will be omitted if this is not provided. |
+| header | `String` | `''` | Annotate Point header.<br>The header will be omitted if this is not provided. |
+| trigger | `String` | `click` | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these. |
+| placement | `String` | `top` | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`. |
+| label | `String` | `''` | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>Note that labels should not be too long as they might overflow out of the point. |
+| size | `String` | `'40'` | The size of the point in pixels. <br> Does not work with customised shapes |
+| color | `String` | `'green'` | The color of the point.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. <br> Does not work with customised shapes |
+| opacity | `String` | `'0.3'` | The opacity of the point.<br>Supports range of values from `0` to `1`. <br> Does not work with customised shapes |
+| fontSize | `String` | `'14'` | The font size of the label.<br>Supports any pixel size smaller than size of the point. |
+| textColor | `String` | `'black'` | The color of the label.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. |
+| legend | `String` | `'popover'` | The position of the Annotate Point content and header.<br>Supports: `popover`, `bottom`, `both`. |
****`<annotate>` Options****
diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.html b/packages/cli/test/functional/test_site/expected/testAnnotate.html
index 3778c72035..580a95e3b3 100644
--- a/packages/cli/test/functional/test_site/expected/testAnnotate.html
+++ b/packages/cli/test/functional/test_site/expected/testAnnotate.html
@@ -266,6 +266,18 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
<a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"></a-point>
<a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"></a-point>
</annotate>
+ <p><strong>Annotate Point customised shapes</strong></p>
+ <annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
+ <a-point x="25%" y="25%">
+ <span class="badge rounded-pill bg-primary">Label</span>
+ </a-point>
+ <a-point x="50%" y="25%">
+ <pic src="/test_site/images/deer.jpg" width="50" height="50"></pic>
+ </a-point>
+ <a-point x="75%" y="25%">
+ <div style="background-color: black; color: white; width: 100px; height: 50px;">Text label</div>
+ </a-point>
+ </annotate>
</div>
<overlay-source id="page-nav" tag-name="nav" to="page-nav">
<div class="nav-component slim-scroll">
diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
index aa21b753be..63688f287d 100644
--- a/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
+++ b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
@@ -1,7 +1,7 @@
var pageVueRenderFn = function anonymous(
) {
-with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',[_c('navbar',{attrs:{"type":"dark","default-highlight-on":"sibling-or-child"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind Test Site")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs")])])]),_v(" "),_m(0)],1),_v(" "),_m(1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_c('div',[_c('h2',{attrs:{"id":"default-layout"}},[_v("Default Layout"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#default-layout","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('div',[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Home 🏠")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs 🐛")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-0"},[_c('h3',{attrs:{"id":"testing-site-nav"}},[_v("Testing Site-Nav"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#testing-site-nav","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Dropdown ")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-search",attrs:{"aria-hidden":"true"}}),_v(" title ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Html within site-nav "),_c('span',{staticStyle:{"color":"red"}},[_v("should")]),_v(" be displayed properly")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown title 📐\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('mark',[_v("Third Link")]),_v(" 📋")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Filler text "),_c('a',{attrs:{"href":"https://www.youtube.com/"}},[_c('span',{staticClass:"glyphicon glyphicon-facetime-video",attrs:{"aria-hidden":"true"}}),_v(" Youtube 📺")]),_v(" filler text"),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}},[_v("The answer to everything in the universe")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('mark',[_v("Dropdown title")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-comment",attrs:{"aria-hidden":"true"}}),_v(" ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown Title\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Hello Doge Hello Doge 🐶")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_c('strong',[_v("NESTED LINK")]),_v(" Home 🏠")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Test line break in navigation layout\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Nested line break text ✂️")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Nested line break href")]),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Nested Nested line break text ✂️")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested line break dropdown menu\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Line break item 2 📘")])])])])])])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_m(2),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(3),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(4),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"Lorem ipsum dolor sit amet","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"Lorem ipsum dolor sit amet","header":"Lorem ipsum"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"Lorem ipsum dolor sit amet","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"Lorem ipsum dolor sit amet","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"Lorem ipsum dolor sit amet","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"Lorem ipsum dolor sit amet","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"Lorem ipsum dolor sit amet","fontSize":"30","label":"3"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"33%","y":"33%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"right"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"2","legend":"bottom","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"3","legend":"both","header":"some test text"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"some test text","label":"1","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"some test text","label":"2","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"some test text","label":"3","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"4","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"5","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"6","legend":"both","header":"some test text"}})],1)],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(5)])}
+with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',[_c('navbar',{attrs:{"type":"dark","default-highlight-on":"sibling-or-child"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind Test Site")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs")])])]),_v(" "),_m(0)],1),_v(" "),_m(1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_c('div',[_c('h2',{attrs:{"id":"default-layout"}},[_v("Default Layout"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#default-layout","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('div',[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Home 🏠")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs 🐛")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-0"},[_c('h3',{attrs:{"id":"testing-site-nav"}},[_v("Testing Site-Nav"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#testing-site-nav","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Dropdown ")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-search",attrs:{"aria-hidden":"true"}}),_v(" title ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Html within site-nav "),_c('span',{staticStyle:{"color":"red"}},[_v("should")]),_v(" be displayed properly")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown title 📐\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('mark',[_v("Third Link")]),_v(" 📋")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Filler text "),_c('a',{attrs:{"href":"https://www.youtube.com/"}},[_c('span',{staticClass:"glyphicon glyphicon-facetime-video",attrs:{"aria-hidden":"true"}}),_v(" Youtube 📺")]),_v(" filler text"),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}},[_v("The answer to everything in the universe")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('mark',[_v("Dropdown title")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-comment",attrs:{"aria-hidden":"true"}}),_v(" ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown Title\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Hello Doge Hello Doge 🐶")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_c('strong',[_v("NESTED LINK")]),_v(" Home 🏠")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Test line break in navigation layout\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Nested line break text ✂️")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Nested line break href")]),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Nested Nested line break text ✂️")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested line break dropdown menu\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Line break item 2 📘")])])])])])])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_m(2),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(3),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(4),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"Lorem ipsum dolor sit amet","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"Lorem ipsum dolor sit amet","header":"Lorem ipsum"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"Lorem ipsum dolor sit amet","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"Lorem ipsum dolor sit amet","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"Lorem ipsum dolor sit amet","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"Lorem ipsum dolor sit amet","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"Lorem ipsum dolor sit amet","fontSize":"30","label":"3"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"33%","y":"33%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"right"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"2","legend":"bottom","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"3","legend":"both","header":"some test text"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"some test text","label":"1","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"some test text","label":"2","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"some test text","label":"3","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"4","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"5","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"6","legend":"both","header":"some test text"}})],1),_v(" "),_m(5),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"}},[_c('span',{staticClass:"badge rounded-pill bg-primary"},[_v("Label")])]),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%"}},[_c('pic',{attrs:{"src":"/test_site/images/deer.jpg","width":"50","height":"50"}})],1),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"}},[_c('div',{staticStyle:{"background-color":"black","color":"white","width":"100px","height":"50px"}},[_v("Text label")])])],1)],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(6)])}
};
var pageVueStaticRenderFns = [function anonymous(
) {
@@ -20,6 +20,9 @@ with(this){return _c('p',[_c('strong',[_v("Annotate point positions")])])}
with(this){return _c('p',[_c('strong',[_v("Annotate point attributes")])])}
},function anonymous(
) {
+with(this){return _c('p',[_c('strong',[_v("Annotate Point customised shapes")])])}
+},function anonymous(
+) {
with(this){return _c('div',[_c('footer',[_c('h1',{attrs:{"id":"heading-in-footer-should-not-be-indexed"}},[_v("Heading in footer should not be indexed"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-in-footer-should-not-be-indexed","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"text-center"},[_v("\n This is a dynamic height footer that supports markdown "),_c('span',[_v("😄")]),_v("!\n ")])])])}
}];
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/testAnnotate.md b/packages/cli/test/functional/test_site/testAnnotate.md
index b3004eae37..bfa25d5cc9 100644
--- a/packages/cli/test/functional/test_site/testAnnotate.md
+++ b/packages/cli/test/functional/test_site/testAnnotate.md
@@ -70,3 +70,16 @@
<a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"/>
<a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"/>
</annotate>
+
+**Annotate Point customised shapes**
+<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
+ <a-point x="25%" y="25%">
+ <span class="badge rounded-pill bg-primary">Label</span>
+ </a-point>
+ <a-point x="50%" y="25%">
+ <pic src="./images/deer.jpg" width="50" height="50" />
+ </a-point>
+ <a-point x="75%" y="25%">
+ <div style="background-color: black; color: white; width: 100px; height: 50px;">Text label</div>
+ </a-point>
+</annotate>
diff --git a/packages/vue-components/src/annotations/AnnotatePoint.vue b/packages/vue-components/src/annotations/AnnotatePoint.vue
index bd3bc4c95c..870a1ef736 100644
--- a/packages/vue-components/src/annotations/AnnotatePoint.vue
+++ b/packages/vue-components/src/annotations/AnnotatePoint.vue
@@ -26,8 +26,10 @@
shift-cross-axis
>
<div class="hover-wrapper">
- <button class="hover-point" :style="pointStyle">
- </button>
+ <slot>
+ <button class="hover-point" :style="pointStyle">
+ </button>
+ </slot>
<div class="hover-label" :style="labelStyle">
{{ label }}
</div>