diff --git a/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk b/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk
index d631dd4dd..bd8680689 100644
--- a/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk
+++ b/src/wmnds/components/content-tiles/travel-updates/travel-updates.njk
@@ -168,9 +168,9 @@
    </div>
    {% from "wmnds/components/message/help/_help.njk" import wmndsMsgHelp %}
    {{
-   wmndsMsgHelp({
-   message: 'Save bus routes to your homepage by pressing the star icon'
-   })
-      }}
+      wmndsMsgHelp({
+         contentText: 'Save bus routes to your homepage by pressing the star icon'
+      })
+   }}
 </div>
 {% endmacro %}
\ No newline at end of file
diff --git a/src/wmnds/components/message/help/_example.njk b/src/wmnds/components/message/help/_example.njk
new file mode 100644
index 000000000..8b9be7685
--- /dev/null
+++ b/src/wmnds/components/message/help/_example.njk
@@ -0,0 +1,11 @@
+{% raw %}
+{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgHelp %}
+
+{{
+   wmndsMsgHelp({
+      contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
+      contentHTML: null,
+      dismissable: false
+    })
+}}
+{% endraw %}
diff --git a/src/wmnds/components/message/help/_help.njk b/src/wmnds/components/message/help/_help.njk
index 3f5976811..7e0ec8ddf 100644
--- a/src/wmnds/components/message/help/_help.njk
+++ b/src/wmnds/components/message/help/_help.njk
@@ -1,18 +1,22 @@
 {% macro wmndsMsgHelp(params) %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
-{# Set vars and defaults #}
+{# Set content #}
+{% set _content = params.contentHTML | safe if params.contentHTML else params.contentText %}
+{% set dismissable = params.dismissable if params.dismissable === false else true %}
 
 <div class="wmnds-msg-help">
+{% if dismissable %}
   <button class="wmnds-msg-help__close-btn" aria-label="Close help message">
     {# Get SVG icon #}
     {{-
       wmndsIcon({
         icon: 'general-cross',
         class: 'wmnds-msg-help__close-icon'
-      }) | indent(4) | trim
+      })
     }}
   </button>
-  {{ params.message | safe }}
+  {% endif %}
+  {{ _content }}
 </div>
 
 {% endmacro %}
\ No newline at end of file
diff --git a/src/wmnds/components/message/help/_properties.njk.json b/src/wmnds/components/message/help/_properties.njk.json
new file mode 100644
index 000000000..031bd9ebb
--- /dev/null
+++ b/src/wmnds/components/message/help/_properties.njk.json
@@ -0,0 +1,19 @@
+{
+  "wmndsMsgHelpProps": [
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> The text that displays in the help message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, this option is not required and is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> The HTML to use within the help message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, <code class='wmnds-website-inline-code'>contentText</code> is not required and is ignored."
+    },
+    {
+      "name": "dismissable",
+      "type": "boolean",
+      "description": "If dismissable is set to true, the component will display a close icon. Defaults to <code class='wmnds-website-inline-code'>true</code>"
+    }
+  ]
+}
diff --git a/src/wmnds/components/message/summary/_example.njk b/src/wmnds/components/message/summary/_example.njk
new file mode 100644
index 000000000..3caa567d2
--- /dev/null
+++ b/src/wmnds/components/message/summary/_example.njk
@@ -0,0 +1,15 @@
+{% raw %}
+{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
+
+{{
+   wmndsMsgSummary({
+      type: "info",
+      title: "Information about XXXXXXXXX was successfully updated!",
+      subtitle: null,
+      contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
+      contentHTML: null,
+      dismissable: false,
+      classes: null
+    })
+}}
+{% endraw %}
diff --git a/src/wmnds/components/message/summary/_properties.njk.json b/src/wmnds/components/message/summary/_properties.njk.json
new file mode 100644
index 000000000..7a11e7fde
--- /dev/null
+++ b/src/wmnds/components/message/summary/_properties.njk.json
@@ -0,0 +1,39 @@
+{
+  "wmndsMsgSummaryProps": [
+    {
+      "name": "type",
+      "type": "string",
+      "description": "Type of the message component. As default it is <code class='wmnds-website-inline-code'>info</code>. Available types: <code class='wmnds-website-inline-code'>info</code>, <code class='wmnds-website-inline-code'>success</code>, <code class='wmnds-website-inline-code'>success-fill-no-icon</code>, <code class='wmnds-website-inline-code'>warning</code>, <code class='wmnds-website-inline-code'>error</code>"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "description": "The title text for the message displayed as <code class='wmnds-website-inline-code'>h3</code>."
+    },
+    {
+      "name": "subtitle",
+      "type": "string",
+      "description": "The subtitle text for the message."
+    },
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> The text that displays in the message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, this option is not required and is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> The HTML to use within the message component. You can use any string with this option. If you set <code class='wmnds-website-inline-code'>contentHTML</code>, <code class='wmnds-website-inline-code'>contentText</code> is not required and is ignored."
+    },
+    {
+      "name": "dismissable",
+      "type": "boolean",
+      "description": "If dismissable is set to true, the component will display a close icon."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the summary container."
+    }
+  ]
+}
diff --git a/src/wmnds/components/message/summary/_summary.njk b/src/wmnds/components/message/summary/_summary.njk
index bc56af365..5dc49fe82 100644
--- a/src/wmnds/components/message/summary/_summary.njk
+++ b/src/wmnds/components/message/summary/_summary.njk
@@ -21,6 +21,8 @@
 {% endif %}
 {# Set classes #}
 {% set classes = " " + params.classes if params.classes %}
+{# Set content #}
+{% set _content = params.contentHTML | safe if params.contentHTML else params.contentText %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 
 <div class="wmnds-msg-summary wmnds-msg-summary--{{ params.type }} {{ classes }}">
@@ -45,7 +47,7 @@
     {% endif %}
   </div>
   <div class="wmnds-msg-summary__info">
-    {{ params.message | safe }}
+    {{ _content }}
   </div>
 </div>
 {% endmacro %}
diff --git a/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk b/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk
index 250b927c2..01f5d5fbf 100644
--- a/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk
+++ b/src/wmnds/patterns/content-cards/travel-updates/_travel-updates.njk
@@ -18,11 +18,11 @@
         <div class="wmnds-m-t-sm">
             {{
                 largeDisruption({
-                strongText: area,
-                text: "Usual traffic",
-                iconLeft: "modes-isolated-roads",
-                iconRight: "general-success"
-                }) | trim | indent(8)
+                    strongText: area,
+                    text: "Usual traffic",
+                    iconLeft: "modes-isolated-roads",
+                    iconRight: "general-success"
+                })
             }}
         </div>
         {% endfor %}
@@ -34,11 +34,11 @@
             <div class="wmnds-col-auto wmnds-m-r-md">
                 {{
                     mediumDisruption({
-                    text: bus,
-                    classModifiers: "wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus",
-                    iconLeft: "modes-isolated-bus",
-                    iconRight: "general-success"
-                    }) | trim | indent(12)
+                        text: bus,
+                        classModifiers: "wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus",
+                        iconLeft: "modes-isolated-bus",
+                        iconRight: "general-success"
+                    })
                 }}
                 <div class="wmnds-grid wmnds-grid--justify-around wmnds-p-t-sm wmnds-p-b-sm">
                     <svg class="wmnds-disruption-indicator-medium-star">
@@ -51,8 +51,8 @@
         <!-- Help message -->
         {{
             wmndsMsgHelp({
-                message: 'Save bus routes to your homepage by pressing the star icon'
-            }) | indent(12) | trim
+                contentText: 'Save bus routes to your homepage by pressing the star icon'
+            })
         }}
     </div>
 {% endcall %}
diff --git a/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk b/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk
index 9741c8340..325f53411 100644
--- a/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk
+++ b/src/wmnds/patterns/question/confirmation-message/_confirmation-message.njk
@@ -2,14 +2,14 @@
 
 {% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
 
-{{-
+{{
     wmndsMsgSummary({
         type: 'success-fill-no-icon',
         title: 'Request complete',
         subtitle: 'You can now start using your Swift card',
-        message: 'Your reference number is <b>12345</b>',
+        contentHTML: 'Your reference number is <b>12345</b>',
         classes: 'wmnds-text-align-center'
-    }) | trim 
--}}
+    })
+}}
 
 {% endmacro %}
\ No newline at end of file
diff --git a/src/www/pages/components/message/index.njk b/src/www/pages/components/message/index.njk
deleted file mode 100644
index 6cc10cfa7..000000000
--- a/src/www/pages/components/message/index.njk
+++ /dev/null
@@ -1,153 +0,0 @@
-{% extends "www/_layouts/layout-left-pane.njk" %} 
-{% set pageTitle="Message" %}
-
-{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
-{% from "wmnds/components/message/help/_help.njk" import wmndsMsgHelp %}
-{% from "www/_partials/component-example/component-example.njk" import compExample %}
-
-{% block content %}
-{# About #}
-<h2>About</h2>
-<h3>What does it do?</h3>
-<ul>
-  <li>
-    Gives user feedback during the interaction with a website (informs about error, warning, success). Messages are
-    colour coded and use symbols to reinforce the message. The structure of the message: what happened? what does it
-    mean? what can user do about it?)
-  </li>
-</ul>
-
-<h3>When to use it?</h3>
-<ul>
-  <li>
-    When user needs explicit indication that something has gone wrong (user error or website/app error)
-  </li>
-  <li>
-    When user is about to do something that is destructive or when the result of an action is unexpected but it is not
-    an error (Warning Message)
-  </li>
-  <li>
-    When user needs confirmation of success (Success message)
-  </li>
-  <li>
-    When user needs key information about upcoming change (Information message).
-  </li>
-  <li>
-    Real time inline validation to inform users about the correctness of provided data.
-  </li>
-</ul>
-<hr />
-<br /><br />
-{# Info message #}
-<h2>Information</h2>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'info',
-      title: 'Information about XXXXXXXXX was successfully updated!',
-      message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.'
-    })
-  ])
-}}
-{# End info message #}
-
-<br /><br />
-{# Success message #}
-<h2>Success</h2>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'success',
-      title: 'Success confirmation',
-      message: 'Details added if needed to confirm action.'
-    })
-  ])
-}}
-{# End success message #}
-
-<br /><br />
-{# Success message #}
-<h2>Success (fill)</h2>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'success-fill',
-      title: 'Success confirmation',
-      message: 'Details added if needed to confirm action.'
-    })
-  ])
-}}
-{# End success message #}
-
-<br /><br />
-{# Warning message #}
-<h2>Warning</h2>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'warning',
-      title: 'Warning message',
-      message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
-    })
-  ])
-}}
-{# End Warning message #}
-
-<br /><br />
-{# Error message #}
-<h2>Error</h2>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'error',
-      title: 'Error message',
-      message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
-    })
-  ])
-}}
-
-{# End error message #}
-<br /><br />
-
-{# Close message variant #}
-<h2>Close message variant</h2>
-
-<h3>What does it do?</h3>
-<ul>
-  <li>Allows the user to dismiss an Information, Success, Warning or Error message.</li>
-</ul>
-
-<h3>When to use it?</h3>
-<ul>
-  <li>
-    When the information in the message is a response to a users action, or if the information is of low importance and
-    only applies to a small set of users.
-  </li>
-</ul>
-{{
-  compExample([
-    wmndsMsgSummary({
-      type: 'info',
-      title: 'Information about XXXXXXXXX was successfully updated!',
-      dismissable: true,
-      message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
-    })
-  ])
-}}
-{# End close message variant #}
-
-<br /><br />
-{# Help message #}
-<h2>Help</h2>
-
-<h3>When to use it?</h3>
-<ul>
-  <li>
-    The help message should be used when a user requires guidance on how to complete a digital task successfully.
-  </li>
-  <li>
-    The user will be able to close the help message once they understand how to complete the task.
-  </li>
-</ul>
-{{ compExample([ wmndsMsgHelp({ message: 'Details added what happened and what to do next.<br />
-Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.' }) ]) }} {# End Help message #} {% endblock %}
diff --git a/src/www/pages/components/message/index.njk.md b/src/www/pages/components/message/index.njk.md
new file mode 100644
index 000000000..e58d739b3
--- /dev/null
+++ b/src/www/pages/components/message/index.njk.md
@@ -0,0 +1,220 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Message" %}
+
+{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
+{% from "wmnds/components/message/help/_help.njk" import wmndsMsgHelp %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
+{% markdown %}
+{# About #}
+
+## About
+
+### What does it do?
+
+- Gives user feedback during the interaction with a website (informs about error, warning, success). Messages are colour coded and use symbols to reinforce the message. The structure of the message: what happened? what does it mean? what can user do about it?)
+
+<h3>When to use it?</h3>
+
+- When user needs explicit indication that something has gone wrong (user error or website/app error)
+- When user is about to do something that is destructive or when the result of an action is unexpected but it is not an error (Warning Message)
+- When user needs confirmation of success (Success message)
+- When user needs key information about upcoming change (Information message).
+- Real time inline validation to inform users about the correctness of provided data.
+
+---
+
+{# Info message #}
+
+## Information
+
+{% endmarkdown %}
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'info',
+      title: 'Information about XXXXXXXXX was successfully updated!',
+      contentText: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End info message #}
+
+{% markdown %}
+
+{# Success message #}
+
+## Success
+
+{% endmarkdown %}
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'success',
+      title: 'Success confirmation',
+      contentText: 'Details added if needed to confirm action.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End success message #}
+
+{% markdown %}
+
+{# Success message #}
+
+## Success (fill)
+
+{% endmarkdown %}
+
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'success-fill',
+      title: 'Success confirmation',
+      contentText: 'Details added if needed to confirm action.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End success message #}
+
+{% markdown %}
+
+{# Warning message #}
+
+## Warning
+
+{% endmarkdown %}
+
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'warning',
+      title: 'Warning message',
+      contentText: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End Warning message #}
+
+{% markdown %}
+
+{# Error message #}
+
+## Error
+
+{% endmarkdown %}
+
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'error',
+      title: 'Error message',
+      contentText: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+
+{# End error message #}
+
+{% markdown %}
+
+{# Close message variant #}
+
+## Close message variant
+
+<h3>What does it do?</h3>
+
+- Allows the user to dismiss an Information, Success, Warning or Error message.
+
+<h3>When to use it?</h3>
+
+- When the information in the message is a response to a users action, or if the information is of low importance and only applies to a small set of users.
+
+{% endmarkdown %}
+
+{{
+  compExample([
+    wmndsMsgSummary({
+      type: 'info',
+      title: 'Information about XXXXXXXXX was successfully updated!',
+      dismissable: true,
+      contentText: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/summary/",
+    njk: true,
+    njkProps: wmndsMsgSummaryProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End close message variant #}
+
+{% markdown %}
+
+{# Help message #}
+
+## Help
+
+<h3>When to use it?</h3>
+
+- The help message should be used when a user requires guidance on how to complete a digital task successfully.
+- The user will be able to close the help message once they understand how to complete the task.
+
+{% endmarkdown %}
+
+{{ compExample
+  ([
+    wmndsMsgHelp({
+      contentHTML: 'Details added what happened and what to do next.<br /> Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.'
+    })
+  ],
+  {
+    componentPath: "wmnds/components/message/help/",
+    njk: true,
+    njkProps: wmndsMsgHelpProps,
+    js: false,
+    iframe: false
+  })
+}}
+
+{# End Help message #}
+{% endblock %}