update Noora docs

content/styles/noorahealth/index.rst

@@ -1,50 +1,84 @@
 NooraHealth Style
 ====================
 
+For this style, the page content in Moodle needs to be edited/updated when using the HTML code view, these styles can't
+be applied only using the WYSIWYG editor view.
 
-Title Slide
+Intro Section
 --------------
 
-Usage:
-~~~~~~
+Example:: 
+
+    <intro-section>
+        <img src="image.jpg" alt="" role="presentation" class="img-fluid atto_image_button_text-bottom">
+        <content>
+            <module-title>MODULE 1:</module-title>
+            <module-description>Getting started with the Care Companion Program</module-description>
+            <lesson-title>LESSON 1:</lesson-title>
+            <lesson-description>Setting Context</lesson-description>
+        </content>
+    </intro-section>
+
 
-Example::
-~~~~~~~~~
 
 Example output:
-~~~~~~~~~~~~~~~
 
-.. image:: images/title.png
-    :width: 400 px
+.. image:: images/intro-section.png
+    :width: 200 px
 
 
-Video Slide
+Video Section
 --------------
 
-Usage:
-~~~~~~
-
 Example::
-~~~~~~~~~
+
+    <video-section>
+        <video poster="video.png" controls="true">
+            <source src="video.mp4">video.mp4
+        </video>
+    </video-section>
 
 Example output:
-~~~~~~~~~~~~~~~
 
-.. image:: images/video.png
-    :width: 400 px
+.. image:: images/video-section.png
+    :width: 200 px
 
 
-Noor Slide
+Noor Section
 --------------
 
-Usage:
-~~~~~~
+Example::
+
+Example output:
+
+
+
+Content Section
+----------------
 
 Example::
-~~~~~~~~~
 
 Example output:
-~~~~~~~~~~~~~~~
 
-.. image:: images/noor.png
-    :width: 400 px
+
+Info Section
+----------------
+
+Example::
+
+Example output:
+
+
+What we learned Section
+-----------------------
+
+Example::
+
+Example output:
+
+Next Lesson Section
+-----------------------
+
+Example::
+
+Example output: