From 01105282906383b1ce54d00ba19ca4fb1f2f85fb Mon Sep 17 00:00:00 2001
From: Chan Yu Cheng <77204346+yucheng11122017@users.noreply.github.com>
Date: Wed, 4 Dec 2024 23:59:07 +0800
Subject: [PATCH] Update custom annotations documentation

---
 docs/userGuide/syntax/annotations.md | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md
index 107edddb0..a0ad72ebe 100644
--- a/docs/userGuide/syntax/annotations.md
+++ b/docs/userGuide/syntax/annotations.md
@@ -72,17 +72,12 @@ Style the shape to achieve the same effect.
 
 <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 x="40%" y="-2%" content="Look within this box">
+    <div style="width: 330px; height: 150px; border: 2px solid red; margin: 20px auto;"></div>
   </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 x="50%" y="75%" content="You should pay attention to this!">
+    <div style="opacity: 90%; color: red; font-size: 40px">!!</div>
   </a-point>
 </annotate>
 </variable>