diff --git a/.eslintignore b/.eslintignore
index 31e0c6686b..5855520002 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,6 @@
 *.min.*
 src/lib/markbind/src/lib/markdown-it/*
+src/lib/markbind/src/lib/vue-attribute-renderer/*
+src/lib/markbind/src/lib/markdown-it-shared/*
 
 !.eslintrc.js
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/asset/css/markbind.css
+++ b/asset/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/docs/index.md b/docs/index.md
index 4f4741fc53..339b06ccc2 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -70,7 +70,7 @@ The example paragraph below has the following dynamic elements: a tooltip, a pop
 
 In <tooltip content="Computer Science">CS</tooltip>, a binary tree is a <trigger for="pop:index-tree">tree data structure</trigger> in which each node has at most two children, which are referred to as the _left child_ and the _right child_. <trigger trigger="click" for="modal:index-primitive">Primitive data types</trigger> on the other hand ...
 
-<popover id="pop:index-tree" title="An example tree data structure" placement="top">
+<popover id="pop:index-tree" header="An example tree data structure" placement="top">
   <div slot="content">
 
 ![](https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg)<br>
@@ -79,7 +79,7 @@ In <tooltip content="Computer Science">CS</tooltip>, a binary tree is a <trigger
   </div>
 </popover>
 
-<modal large title="Some examples of primitive data types" id="modal:index-primitive">
+<modal large header="Some examples of primitive data types" id="modal:index-primitive">
   <include src="pages/primitiveDataTypes.md" />
 </modal>
 
@@ -153,7 +153,7 @@ In CS, a binary tree is a tree data structure in which each node has at most two
   <include src="pages/primitiveDataTypes.md" />
 </panel>
 
-<modal large title="Some examples of primitive data types" id="modal:index-primitive2">
+<modal large header="Some examples of primitive data types" id="modal:index-primitive2">
   <include src="pages/primitiveDataTypes.md" />
 </modal>
 
diff --git a/docs/userGuide/addingPages.md b/docs/userGuide/addingPages.md
index 5bed9b62e8..c6d9662ddb 100644
--- a/docs/userGuide/addingPages.md
+++ b/docs/userGuide/addingPages.md
@@ -40,7 +40,7 @@ Here are the steps to add a new page to your site:
 1. Update the [`pages` attribute of the `site.json`](siteConfiguration.html#pages) to cover the new file, if necessary.
 1. Use the <trigger trigger="click" for="modal:addingPages-livePreview">live preview</trigger> to view the generated web page for the new file.
 
-<modal large title="Live Preview" id="modal:addingPages-livePreview">
+<modal large header="Live Preview" id="modal:addingPages-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 
diff --git a/docs/userGuide/cliCommands.md b/docs/userGuide/cliCommands.md
index 57dcd468a6..e0586d1be3 100644
--- a/docs/userGuide/cliCommands.md
+++ b/docs/userGuide/cliCommands.md
@@ -97,7 +97,7 @@ MarkBind Command Line Interface (CLI) can be run in the following ways:
 1. Starts a web server instance locally and makes the site available at `http://127.0.0.1:8080`.
 1. Opens a <trigger trigger="click" for="modal:cliCommands-livePreview">live preview</trigger> of the website.
 
-<modal large title="Live Preview" id="modal:cliCommands-livePreview">
+<modal large header="Live Preview" id="modal:cliCommands-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 
diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md
index c6b22569e6..f4fbe22187 100644
--- a/docs/userGuide/components/advanced.md
+++ b/docs/userGuide/components/advanced.md
@@ -74,15 +74,22 @@ Using the normal syntax, you are only able to use markdown formatting on heading
 **Panel Slot Options:**
 Slot name | Default class | Notes
 --- | --- | --- 
-`header` | `card-title` | Aligning text to the center of the panel is not possible, as the header element does not take up the entire container.
+header | `card-title` | Aligning text to the center of the panel is not possible, as the header element does not take up the entire container.
 
 **Modal Slot Options:**
 When using slots for Modals, you need to add a single blank line before each `<modal>` tag, in order for the customization to render correctly.
 
 Slot name | Default class | Notes
 --- | --- | ---
-`modal-header` | `modal-title` |
-`modal-footer` | `modal-footer` | Specifying `modal-footer` will override the `ok-text` attribute, and the OK button will not render.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`modal-header` <br> (deprecated)</small>  | `modal-title` |
+footer <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`modal-footer` <br> (deprecated)</small> | `modal-footer` | Specifying `modal-footer` will override the `ok-text` attribute, and the OK button will not render.
+
+**Popover Slot Options:**
+Slot name | Default class
+--- | --- | ---
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`title` <br> (deprecated)</small>  | `popover-header`
+content | `popover-body` 
+
 
 ### Inserting custom classes into components
 
diff --git a/docs/userGuide/gettingStarted.md b/docs/userGuide/gettingStarted.md
index 9efe454e6a..748fac72c6 100644
--- a/docs/userGuide/gettingStarted.md
+++ b/docs/userGuide/gettingStarted.md
@@ -73,7 +73,7 @@ By default, you will initialize Markbind with a feature filled [template](https:
 
 Run the following command in the same directory. It will generate a website from your source files, start a web server, and open a <trigger trigger="click" for="modal:quickStart-livePreview">live preview</trigger> of your site in your default Browser.
 
-<modal large title="Live Preview" id="modal:quickStart-livePreview">
+<modal large header="Live Preview" id="modal:quickStart-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 
diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
index 9c9e8dab4e..7f579abad3 100644
--- a/docs/userGuide/makingTheSiteSearchable.md
+++ b/docs/userGuide/makingTheSiteSearchable.md
@@ -18,7 +18,7 @@
 **MarkBind comes with with an in-built _site search_ facility**. You can add a [Search Bar](usingComponents.html#search-bar) component to your pages %%(e.g., into the top navigation bar)%% to allow readers to search your website for keywords.
 </span>
 
-**All headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`](siteConfiguration.html#headingindexinglevel).
+**All markdown and html headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`](siteConfiguration.html#headingindexinglevel).
 
 <box type="info">
 
diff --git a/docs/userGuide/syntax/badges.mbdf b/docs/userGuide/syntax/badges.mbdf
index f1df59445e..aadf1a8c11 100644
--- a/docs/userGuide/syntax/badges.mbdf
+++ b/docs/userGuide/syntax/badges.mbdf
@@ -65,8 +65,8 @@ Buttons:
 
 Headings:
 
-### Feature X <span class="badge badge-danger">beta</span>
-##### Feature Y <span class="badge badge-pill badge-success">stable</span>
+### Feature X <span class="badge badge-danger">beta</span> {.no-index}
+##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}
 ```
 </span>
 <span id="output">
@@ -82,8 +82,8 @@ Buttons:
 
 Headings:
 
-### Feature X <span class="badge badge-danger">beta</span>
-##### Feature Y <span class="badge badge-pill badge-success">stable</span>
+### Feature X <span class="badge badge-danger">beta</span> {.no-index}
+##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}
 </span>
 </include>
 
@@ -111,6 +111,6 @@ Headings:
 <span class="badge badge-pill badge-success">Success</span>
 <button type="button" class="btn btn-primary">
   Difficulty Level <span class="badge badge-light">4</span>
-##### Feature Y <span class="badge badge-pill badge-warning">stable</span>
+##### Feature Y <span class="badge badge-pill badge-warning">stable</span> {.no-index}
 </button>
-</span>
\ No newline at end of file
+</span>
diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
index bbbcf6b571..391d21ca3d 100644
--- a/docs/userGuide/syntax/boxes.mbdf
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -33,10 +33,11 @@
 <box type="info" dismissible>
     dismissible info
 </box>
-<box type="success" heading="Tip box heading">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-<box type="warning" heading="Tip box heading" dismissible>
+<box type="success" header="Tip box header">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    <box type="warning" header="Tip box header" dismissible>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </box>
 </box>
 ```
 </span>
@@ -69,10 +70,11 @@
 <box type="info" dismissible>
     dismissible info
 </box>
-<box type="success" heading="Tip box heading">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-<box type="warning" heading="Tip box heading" dismissible>
+<box type="success" header="Tip box header">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    <box type="warning" header="Tip box header" dismissible>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </box>
 </box>
 
 </span>
@@ -166,7 +168,8 @@ border-color | `String` | `null` |
 border-left-color | `String` | `null` | Overrides border-color for the left border.
 color | `String` | `null` | Color of the text.
 dismissible | `Boolean` | `false` | Adds a button to close the box to the top right corner.
-icon | `String` | `null` |
+icon | `String` | `null` | Inline MarkDown text of the icon displayed on the left.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>heading <br> (deprecated)</small> | `String` | `null` | Plain text of the header on the top right corner.
 type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
 light | `Boolean` | `false` | Uses a light color scheme for the box.
 
diff --git a/docs/userGuide/syntax/dropdowns.mbdf b/docs/userGuide/syntax/dropdowns.mbdf
index 181ebfabcb..46d3f7372f 100644
--- a/docs/userGuide/syntax/dropdowns.mbdf
+++ b/docs/userGuide/syntax/dropdowns.mbdf
@@ -6,7 +6,7 @@
 <span id="code">
 
 ```html
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
@@ -14,21 +14,21 @@
   <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
 </dropdown>
 
-<!-- For segmented dropdown, ignore text and add a "before" slot -->
+<!-- For segmented dropdown, ignore header and add a "before" slot -->
 <dropdown type="info">
   <button slot="before" type="button" class="btn btn-info">Segmented</button>
   <li><a href="#dropdown" class="dropdown-item">...</a></li>
 </dropdown>
 
 <!-- Right aligned list -->
-<dropdown text="Right aligned list" type="primary" menu-align-right>
+<dropdown header="Right aligned list" type="primary" menu-align-right>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
 </dropdown>
 ```
 </span>
 <span id="output">
 
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
@@ -41,7 +41,7 @@
   <li><a href="#dropdown" class="dropdown-item">...</a></li>
 </dropdown>
 
-<dropdown text="Right aligned list" type="primary" menu-align-right>
+<dropdown header="Right aligned list" type="primary" menu-align-right>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
 </dropdown>
 </span>
@@ -102,7 +102,7 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 disabled | `Boolean` | `false` | Whether Dropdown can be opened.
 menu-align-right | `Boolean` | `false` | Whether the dropdown list will be right-aligned.
-text | `String` | `''` | Dropdown button text.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>text <br> (deprecated)</small> | `String` | `''` | Dropdown button header text.
 type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.
 
 <div class="indented">
@@ -114,7 +114,7 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,
 <span id="short" class="d-none">
 
 ```markdown
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li role="separator" class="dropdown-divider"></li>
@@ -125,7 +125,7 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,
 
 <span id="examples" class="d-none">
 
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
@@ -133,7 +133,7 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,
   <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
 </dropdown>
 
-<!-- For segmented dropdown, ignore text and add a "before" slot -->
+<!-- For segmented dropdown, ignore header and add a "before" slot -->
 <dropdown type="info">
   <button slot="before" type="button" class="btn btn-info">Segmented</button>
   <li><a href="#dropdown" class="dropdown-item">...</a></li>
diff --git a/docs/userGuide/syntax/indexing.mbdf b/docs/userGuide/syntax/indexing.mbdf
index 7e7c0741d0..fa2c0b09c8 100644
--- a/docs/userGuide/syntax/indexing.mbdf
+++ b/docs/userGuide/syntax/indexing.mbdf
@@ -1,6 +1,6 @@
 ## Including or Excluding Headings
 
-**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
+**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.
 
 If you wish to index a specific heading outside the specified `headingIndexLevel`, you may add the `.always-index` attribute to the heading. Similarly, if you wish for a specific heading inside the specified `headingIndexLevel` not to be indexed, you may add the `.no-index` attribute to the heading.
 
@@ -13,4 +13,11 @@ If you wish to index a specific heading outside the specified `headingIndexLevel
 
 # Heading inside heading index level that will not be indexed {.no-index}
 ```
+
+Equivalently,
+```html
+<h6 class="always-index"> Heading outside heading index level that will be indexed </h6>
+
+<h1 class="no-index"> Heading inside heading index level that will not be indexed </h1>
+```
 </div>
diff --git a/docs/userGuide/syntax/modals.mbdf b/docs/userGuide/syntax/modals.mbdf
index fc6a1f47f0..cdfbe0abea 100644
--- a/docs/userGuide/syntax/modals.mbdf
+++ b/docs/userGuide/syntax/modals.mbdf
@@ -7,7 +7,7 @@
 
 ```html
 More about <trigger for="modal:loremipsum">trigger</trigger>.
-<modal title="**Modal title** :rocket:" id="modal:loremipsum">
+<modal header="**Modal header** :rocket:" id="modal:loremipsum">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
   magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
@@ -18,7 +18,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 
 <trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
 
-<modal title="**Centered** :rocket:" id="modal:centered" center>
+<modal header="**Centered** :rocket:" id="modal:centered" center>
   Centered
 </modal>
 
@@ -27,7 +27,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 <span id="output">
 
   More about <trigger for="modal:loremipsum">trigger</trigger>.
-  <modal title="**Modal title** :rocket:" id="modal:loremipsum">
+  <modal header="**Modal header** :rocket:" id="modal:loremipsum">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
       magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
@@ -38,7 +38,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 
   <trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
 
-  <modal title="**Centered** :rocket:" id="modal:centered" center>
+  <modal header="**Centered** :rocket:" id="modal:centered" center>
     Centered
   </modal>
 </span>
@@ -51,7 +51,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 ****Options****
 Name | type | Default | Description
 --- | --- | --- | ---
-title | `String` | `''` | Title of the Modal component.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>title <br> (deprecated)</small> | `String` | `''` | Header of the Modal component. Supports inline markdown text.
 ok-text | `String` | `''` | Text for the OK button.
 effect | `String` | `zoom` | Supports: `zoom`, `fade`.
 id | `String` | | Used by [Trigger](#trigger) to activate the Modal by id.
@@ -65,7 +65,7 @@ backdrop | `Boolean` | `true` | Enables closing the Modal by clicking on the bac
 
 ```html
 Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
-<modal title="Modal title" id="modal:unused">
+<modal header="Modal header" id="modal:unused">
     Modal content
 </modal>
 ```
@@ -74,7 +74,7 @@ Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal
 <span id="examples" class="d-none">
 
 Hover <trigger large for="modal:unused">here</trigger> to open a modal.
-<modal title="Modal title" ok-text="OK" id="modal:unused">
+<modal header="Modal header" ok-text="OK" id="modal:unused">
   Modal content
 </modal>
-</span>
\ No newline at end of file
+</span>
diff --git a/docs/userGuide/syntax/navBars.mbdf b/docs/userGuide/syntax/navBars.mbdf
index 40631e3709..80a67f661f 100644
--- a/docs/userGuide/syntax/navBars.mbdf
+++ b/docs/userGuide/syntax/navBars.mbdf
@@ -16,7 +16,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -29,7 +29,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -42,7 +42,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -60,7 +60,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -73,7 +73,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -86,7 +86,7 @@ Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguid
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -118,7 +118,7 @@ If you wish to further customize your navbar beyond the primary, dark, and light
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -136,7 +136,7 @@ If you wish to further customize your navbar beyond the primary, dark, and light
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -149,7 +149,7 @@ If you wish to further customize your navbar beyond the primary, dark, and light
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
@@ -162,7 +162,7 @@ If you wish to further customize your navbar beyond the primary, dark, and light
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <!-- You can use dropdown component -->
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a href="#navbar" class="dropdown-item">Option</a></li>
   </dropdown>
   <!-- For right positioning use slot -->
diff --git a/docs/userGuide/syntax/panels.mbdf b/docs/userGuide/syntax/panels.mbdf
index e1b1e39ec6..db2e11ace0 100644
--- a/docs/userGuide/syntax/panels.mbdf
+++ b/docs/userGuide/syntax/panels.mbdf
@@ -277,10 +277,10 @@
 </include>
 
 ****Options****
-Name | Type | Default | Description 
+Name | Type | Default | Description
 --- | --- | --- | ---
-header | `String` | `''` | The clickable text on the Panel's header.
-alt | `String` | Panel header | The clickable text on the minimised Panel.
+header | `String` | `''` | The clickable text on the Panel's header. Supports MarkDown text.
+alt | `String` | Panel header | The clickable text on the minimised Panel. Supports MarkDown text.
 expandable | `Boolean`| `true` | Whether Panel is expandable.
 expanded | `Boolean` | `false` | Whether Panel is expanded or collapsed when loaded in.
 minimized | `Boolean` | `false` | Whether Panel is minimized.
@@ -335,4 +335,4 @@ type | `String` | `light` | The type or color scheme of the panel (single).<br>S
 </panel>
 
 
-</span>
\ No newline at end of file
+</span>
diff --git a/docs/userGuide/syntax/popovers.mbdf b/docs/userGuide/syntax/popovers.mbdf
index 2581e8ae70..279fab7fc4 100644
--- a/docs/userGuide/syntax/popovers.mbdf
+++ b/docs/userGuide/syntax/popovers.mbdf
@@ -17,37 +17,37 @@
   <button class="btn btn-secondary">Popover on bottom</button>
 </popover>
 <hr>
-<h4>Title</h4>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="top">
+<h4 class="no-index">Header</h4>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="top">
   <button class="btn btn-secondary">Popover on top</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="left">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="left">
   <button class="btn btn-secondary">Popover on left</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="right">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="right">
   <button class="btn btn-secondary">Popover on right</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="bottom">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="bottom">
   <button class="btn btn-secondary">Popover on bottom</button>
 </popover>
 <hr />
-<h4>Trigger</h4>
+<h4 class="no-index">Trigger</h4>
 <p>
-  <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
     <button class="btn btn-secondary">Mouseenter</button>
   </popover>
-  <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
     <button class="btn btn-secondary">Contextmenu (right click)</button>
   </popover>
 </p>
-<h4>Markdown</h4>
+<h4 class="no-index">Markdown</h4>
 <p>
-  <popover effect="scale" title="**Emoji title** :rocket:" content="++emoji++ content :cat:">
+  <popover effect="scale" header="**Emoji header** :rocket:" content="++emoji++ content :cat:">
     <button class="btn btn-secondary">Hover</button>
   </popover>
 </p>
-<h4>Content using slot</h4>
-<popover effect="scale" title="**Emoji title** :rocket:">
+<h4 class="no-index">Content using slot</h4>
+<popover effect="scale" header="**Emoji header** :rocket:">
   <div slot="content">
     This is a long content...
   </div>
@@ -55,7 +55,7 @@
 </popover>
 <br />
 <br />
-<h4>Wrap Text</h4>
+<h4 class="no-index">Wrap Text</h4>
 <popover header="false" content="Nice!">What do you say</popover>
 ```
 </span>
@@ -74,37 +74,37 @@
   <button class="btn btn-secondary">Popover on bottom</button>
 </popover>
 <hr>
-<h4>Title</h4>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="top">
+<h4 class="no-index">Header</h4>
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="top">
   <button class="btn btn-secondary">Popover on top</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="left">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="left">
   <button class="btn btn-secondary">Popover on left</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="right">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="right">
   <button class="btn btn-secondary">Popover on right</button>
 </popover>
-<popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="bottom">
+<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="bottom">
   <button class="btn btn-secondary">Popover on bottom</button>
 </popover>
 <hr />
-<h4>Trigger</h4>
+<h4 class="no-index">Trigger</h4>
 <p>
-  <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
     <button class="btn btn-secondary">Mouseenter</button>
   </popover>
-  <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
     <button class="btn btn-secondary">Contextmenu (right click)</button>
   </popover>
 </p>
-<h4>Markdown</h4>
+<h4 class="no-index">Markdown</h4>
 <p>
-  <popover effect="scale" title="**Emoji title** :rocket:" content="++emoji++ content :cat:">
+  <popover effect="scale" header="**Emoji header** :rocket:" content="++emoji++ content :cat:">
     <button class="btn btn-secondary">Hover</button>
   </popover>
 </p>
-<h4>Content using slot</h4>
-<popover effect="scale" title="**Emoji title** :rocket:">
+<h4 class="no-index">Content using slot</h4>
+<popover effect="scale" header="**Emoji header** :rocket:">
   <div slot="content">
     This is a long content...
   </div>
@@ -112,7 +112,7 @@
 </popover>
 <br />
 <br />
-<h4>Wrap Text</h4>
+<h4 class="no-index">Wrap Text</h4>
 <popover header="false" content="Nice!">What do you say</popover>
 </span>
 </include>
@@ -148,9 +148,8 @@ Name | Type | Default | Description
 ---- | ---- | ------- | ------
 trigger | `String` |	`hover`	| How the Popover is triggered.<br>Supports: `click`, `focus`, `hover`, `contextmenu`.
 effect | `String` | `fade` | Transition effect for Popover.<br>Supports: `scale`, `fade`.
-title | `String` | `''` | Popover title, supports inline markdown text.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>title <br> (deprecated)</small> | `String` | `''` | Popover header, supports inline markdown text.
 content | `String` | `''` | Popover content, supports inline markdown text.
-header | `Boolean` | `true` |	Whether to show the header.
 placement | `String` | `top` | How to position the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.
 
 
@@ -159,7 +158,7 @@ placement | `String` | `top` | How to position the Popover.<br>Supports: `top`,
 ```html
 Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
 
-<popover id="pop:context-target" title="Popover title" placement="top">
+<popover id="pop:context-target" header="Popover header" placement="top">
 <div slot="content">
 
 description :+1:
@@ -173,7 +172,7 @@ description :+1:
 
 Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.
 
-<popover id="pop:context-target" title="Popover title" placement="top">
+<popover id="pop:context-target" header="Popover header" placement="top">
 <div slot="content">
 
 description :+1:
diff --git a/docs/userGuide/syntax/tabs.mbdf b/docs/userGuide/syntax/tabs.mbdf
index 2fce82e2c2..3618fb7ae0 100644
--- a/docs/userGuide/syntax/tabs.mbdf
+++ b/docs/userGuide/syntax/tabs.mbdf
@@ -6,20 +6,20 @@
 ```html
 <tabs>
   <tab header="First tab">
-    ...
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
   </tab>
   <tab header="Disabled second tab :x:" disabled>
   </tab>
   <tab-group header="Third tab group :milky_way:">
     <tab header="Stars :star:">
-      star facts
+      Some stuff about stars ...
     </tab>
     <tab header="Disabled Moon :new_moon:" disabled>
     </tab>
   </tab-group>
   <tab-group header="Disabled fourth tab group" disabled>
     <tab header="Hidden tab">
-      ...
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
     </tab>
   </tab-group>
 </tabs>
@@ -29,7 +29,7 @@
 
   <tabs>
     <tab header="First tab">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. Aenean leo lacus, congue vel auctor a, tincidunt sed nunc. Integer in odio sed nunc porttitor venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam fringilla tincidunt augue a pulvinar.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
     </tab>
     <tab header="Disabled second tab :x:" disabled>
     </tab>
@@ -108,4 +108,4 @@ disabled | `Boolean` | `false` | Whether Tab Group is clickable and can be activ
     </tab>
   </tab-group>
 </tabs>
-</span>
\ No newline at end of file
+</span>
diff --git a/docs/userGuide/syntax/tooltips.mbdf b/docs/userGuide/syntax/tooltips.mbdf
index a7c70931a7..b8c9949ac5 100644
--- a/docs/userGuide/syntax/tooltips.mbdf
+++ b/docs/userGuide/syntax/tooltips.mbdf
@@ -4,16 +4,16 @@
 <span id="code">
 
 ```html
-<tooltip header content="Lorem ipsum dolor sit amet" placement="top">
+<tooltip content="Lorem ipsum dolor sit amet" placement="top">
   <button class="btn btn-secondary">Popover on top</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="left">
+<tooltip content="Lorem ipsum dolor sit amet" placement="left">
   <button class="btn btn-secondary">Popover on left</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="right">
+<tooltip content="Lorem ipsum dolor sit amet" placement="right">
   <button class="btn btn-secondary">Popover on right</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="bottom">
+<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
   <button class="btn btn-secondary">Popover on bottom</button>
 </tooltip>
 <hr />
@@ -43,16 +43,16 @@ Trigger
 </span>
 <span id="output">
 
-<tooltip header content="Lorem ipsum dolor sit amet" placement="top">
+<tooltip content="Lorem ipsum dolor sit amet" placement="top">
   <button class="btn btn-secondary">Popover on top</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="left">
+<tooltip content="Lorem ipsum dolor sit amet" placement="left">
   <button class="btn btn-secondary">Popover on left</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="right">
+<tooltip content="Lorem ipsum dolor sit amet" placement="right">
   <button class="btn btn-secondary">Popover on right</button>
 </tooltip>
-<tooltip header content="Lorem ipsum dolor sit amet" placement="bottom">
+<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
   <button class="btn btn-secondary">Popover on bottom</button>
 </tooltip>
 <hr />
diff --git a/package-lock.json b/package-lock.json
index 394a9514e4..e466221389 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6302,6 +6302,16 @@
       "resolved": "https://registry.npmjs.org/markdown-it-regexp/-/markdown-it-regexp-0.4.0.tgz",
       "integrity": "sha1-1k1xPuzsVc5M/esyF1DswJniwtw="
     },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g="
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M="
+    },
     "markdown-it-table-of-contents": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz",
diff --git a/package.json b/package.json
index 1a4e9c4dce..dbf5fbe2c8 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,8 @@
     "markdown-it-table-of-contents": "^0.4.4",
     "markdown-it-task-lists": "^1.4.1",
     "markdown-it-video": "^0.6.3",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
     "nunjucks": "^3.2.0",
     "path-is-inside": "^1.0.2",
     "progress": "^2.0.3",
diff --git a/src/Page.js b/src/Page.js
index 8ec1d80dbd..880ed32198 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -91,6 +91,7 @@ class Page {
     this.keywords = {};
     this.navigableHeadings = {};
     this.pageSectionsHtml = {};
+    this.headerIdMap = {};
 
     // Flag to indicate whether this page has a site nav
     this.hasSiteNav = false;
@@ -148,7 +149,8 @@ class Page {
   }
 
   /**
-   * Collect headings outside of models and panels
+   * Collect headings outside of models and unexpanded panels.
+   * Collects headings from the header slots of unexpanded panels, but not its content.
    * @param content, html content of a page
    */
   collectNavigableHeadings(content) {
@@ -158,40 +160,49 @@ class Page {
       return;
     }
     const $ = cheerio.load(content);
-    $('modal')
-      .remove();
-    $(elementSelector)
-      .each((i, elem) => {
-        // Check if heading or panel is already inside an unexpanded panel
-        let isInsideUnexpandedPanel = false;
-        $(elem)
-          .parents('panel')
-          .each((j, elemParent) => {
-            if (elemParent.attribs.expanded === undefined) {
-              isInsideUnexpandedPanel = true;
-              return false;
-            }
-            return true;
-          });
-        if (isInsideUnexpandedPanel) {
-          return;
-        }
-        if (elem.name === 'panel') {
-          // Get heading from Panel header attribute
-          if (elem.attribs.header) {
-            this.collectNavigableHeadings(md.render(elem.attribs.header));
-          }
-        } else if ($(elem)
-          .attr('id') !== undefined) {
-          // Headings already in content, with a valid ID
-          this.navigableHeadings[$(elem)
-            .attr('id')] = {
-            text: $(elem)
-              .text(),
-            level: elem.name.replace('h', ''),
-          };
+    $('modal').remove();
+    this._collectNavigableHeadings($, $.root()[0], elementSelector);
+  }
+
+
+  _collectNavigableHeadings($, context, pageNavSelector) {
+    $(pageNavSelector, context).each((i, elem) => {
+      // Check if heading or panel is already inside an unexpanded panel
+      let isInsideUnexpandedPanel = false;
+      const panelParents = $(elem).parentsUntil(context).filter('panel').not(elem);
+      panelParents.each((j, elemParent) => {
+        if (elemParent.attribs.expanded === undefined) {
+          isInsideUnexpandedPanel = true;
+          return false;
         }
+        return true;
       });
+      if (isInsideUnexpandedPanel) {
+        return;
+      }
+
+      // Check if heading / panel is under a panel's header slots, which is handled specially below.
+      const slotParents = $(elem).parentsUntil(context).filter('[slot="header"], [slot="_header"]').not(elem);
+      const panelSlotParents = slotParents.parent('panel');
+      if (panelSlotParents.length) {
+        return;
+      }
+
+      if (elem.name === 'panel') {
+        // Recurse only on the slot which has priority
+        let headings = $(elem).children('[slot="header"]');
+        headings = headings.length ? headings : $(elem).children('[slot="_header"]');
+        if (!headings.length) return;
+
+        this._collectNavigableHeadings($, headings.first(), pageNavSelector);
+      } else if ($(elem).attr('id') !== undefined) {
+        // Headings already in content, with a valid ID
+        this.navigableHeadings[$(elem).attr('id')] = {
+          text: $(elem).text(),
+          level: elem.name.replace('h', ''),
+        };
+      }
+    });
   }
 
   /**
@@ -214,14 +225,19 @@ class Page {
   collectHeadingsAndKeywordsInContent(content, lastHeading, excludeHeadings, sourceTraversalStack) {
     let $ = cheerio.load(content);
     const headingsSelector = Page.generateHeadingSelector(this.headingIndexingLevel);
-    $('modal')
-      .remove();
-    $('panel')
-      .not('panel panel')
+    $('modal').remove();
+    $('panel').not('panel panel')
       .each((index, panel) => {
-        if (panel.attribs.header) {
-          this.collectHeadingsAndKeywordsInContent(
-            md.render(panel.attribs.header), lastHeading, excludeHeadings, sourceTraversalStack);
+        const slotHeader = $(panel).children('[slot="header"]');
+        if (slotHeader.length) {
+          this.collectHeadingsAndKeywordsInContent(slotHeader.html(),
+                                                   lastHeading, excludeHeadings, sourceTraversalStack);
+        } else {
+          const headerAttr = $(panel).children('[slot="_header"]');
+          if (headerAttr.length) {
+            this.collectHeadingsAndKeywordsInContent(headerAttr.html(),
+                                                     lastHeading, excludeHeadings, sourceTraversalStack);
+          }
         }
       })
       .each((index, panel) => {
@@ -230,11 +246,13 @@ class Page {
         if (!closestHeading) {
           closestHeading = lastHeading;
         }
-        if (panel.attribs.header) {
-          const panelHeader = md.render(panel.attribs.header);
-          if ($(panelHeader)
-            .is(headingsSelector)) {
-            closestHeading = $(panelHeader);
+        const slotHeadings = $(panel).children('[slot="header"]').find(':header');
+        if (slotHeadings.length) {
+          closestHeading = slotHeadings.first();
+        } else {
+          const attributeHeadings = $(panel).children('[slot="_header"]').find(':header');
+          if (attributeHeadings.length) {
+            closestHeading = attributeHeadings.first();
           }
         }
         if (panel.attribs.src) {
@@ -709,7 +727,8 @@ class Page {
     $('dropdown')
       .each((i, element) => {
         const attributes = element.attribs;
-        const placeholder = `<div>${attributes.text || ''}</div>`;
+        // TODO remove attributes.text once text attribute is fully deprecated
+        const placeholder = `<div>${attributes.header || attributes.text || ''}</div>`;
         $(element)
           .before(placeholder);
         $(element)
@@ -743,6 +762,8 @@ class Page {
 
   generate(builtFiles) {
     this.includedFiles = new Set([this.sourcePath]);
+    this.headerIdMap = {}; // Reset for live reload
+
     const markbinder = new MarkBind({
       errorHandler: logger.error,
     });
@@ -750,6 +771,7 @@ class Page {
       baseUrlMap: this.baseUrlMap,
       rootPath: this.rootPath,
       userDefinedVariablesMap: this.userDefinedVariablesMap,
+      headerIdMap: this.headerIdMap,
     };
     return new Promise((resolve, reject) => {
       markbinder.includeFile(this.sourcePath, fileConfig)
@@ -1034,6 +1056,7 @@ class Page {
         .then(() => markbinder.renderFile(tempPath, {
           baseUrlMap: this.baseUrlMap,
           rootPath: this.rootPath,
+          headerIdMap: {},
         }))
         .then(result => markbinder.processDynamicResources(file, result))
         .then((result) => {
diff --git a/src/lib/markbind/package-lock.json b/src/lib/markbind/package-lock.json
index 8d6f6beb02..f4453a3550 100644
--- a/src/lib/markbind/package-lock.json
+++ b/src/lib/markbind/package-lock.json
@@ -2353,6 +2353,16 @@
       "resolved": "https://registry.npmjs.org/markdown-it-regexp/-/markdown-it-regexp-0.4.0.tgz",
       "integrity": "sha1-1k1xPuzsVc5M/esyF1DswJniwtw="
     },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g="
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M="
+    },
     "markdown-it-table-of-contents": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz",
diff --git a/src/lib/markbind/package.json b/src/lib/markbind/package.json
index 7d403cec48..9965ed3e6f 100644
--- a/src/lib/markbind/package.json
+++ b/src/lib/markbind/package.json
@@ -28,6 +28,8 @@
     "markdown-it-ins": "^2.0.0",
     "markdown-it-mark": "^2.0.0",
     "markdown-it-regexp": "^0.4.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
     "markdown-it-table-of-contents": "^0.4.4",
     "markdown-it-task-lists": "^1.4.1",
     "markdown-it-video": "^0.6.3",
diff --git a/src/lib/markbind/src/lib/markdown-it/markdown-it-dimmed.js b/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-dimmed.js
similarity index 99%
rename from src/lib/markbind/src/lib/markdown-it/markdown-it-dimmed.js
rename to src/lib/markbind/src/lib/markdown-it-shared/markdown-it-dimmed.js
index 479d810e98..65c574e604 100644
--- a/src/lib/markbind/src/lib/markdown-it/markdown-it-dimmed.js
+++ b/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-dimmed.js
@@ -122,4 +122,4 @@ module.exports = function dimmed_plugin(md) {
 
   md.inline.ruler.before('emphasis', 'dimmed', tokenize);
   md.inline.ruler2.before('emphasis', 'dimmed', postProcess);
-};
\ No newline at end of file
+};
diff --git a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-emoji-fixed.js b/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-emoji-fixed.js
new file mode 100644
index 0000000000..cc1ddba25a
--- /dev/null
+++ b/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-emoji-fixed.js
@@ -0,0 +1,15 @@
+// fix emoji numbers
+const emojiData = require('markdown-it-emoji/lib/data/full.json');
+// Extend emoji here
+emojiData['zero'] = emojiData['0'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0030-20e3.png">';
+emojiData['one'] = emojiData['1'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0031-20e3.png">';
+emojiData['two'] = emojiData['2'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0032-20e3.png">';
+emojiData['three'] = emojiData['3'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0033-20e3.png">';
+emojiData['four'] = emojiData['4'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0034-20e3.png">';
+emojiData['five'] = emojiData['5'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0035-20e3.png">';
+emojiData['six'] = emojiData['6'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0036-20e3.png">';
+emojiData['seven'] = emojiData['7'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0037-20e3.png">';
+emojiData['eight'] = emojiData['8'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0038-20e3.png">';
+emojiData['nine'] = emojiData['9'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0039-20e3.png">';
+
+module.exports = emojiData;
\ No newline at end of file
diff --git a/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js b/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons.js
similarity index 100%
rename from src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js
rename to src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons.js
diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js
index 15c8d17e4a..4d7c4d7cf4 100644
--- a/src/lib/markbind/src/lib/markdown-it/index.js
+++ b/src/lib/markbind/src/lib/markdown-it/index.js
@@ -20,16 +20,15 @@ const slugify = require('@sindresorhus/slugify');
 // markdown-it plugins
 markdownIt.use(require('markdown-it-mark'))
   .use(require('markdown-it-ins'))
-  .use(require('markdown-it-anchor'), {slugify: (str) => slugify(str, { decamelize: false })})
   .use(require('markdown-it-imsize'), {autofill: false})
   .use(require('markdown-it-table-of-contents'))
   .use(require('markdown-it-task-lists'), {enabled: true})
   .use(require('markdown-it-linkify-images'), {imgClass: 'img-fluid'})
   .use(require('markdown-it-attrs'))
-  .use(require('./markdown-it-dimmed'))
+  .use(require('../markdown-it-shared/markdown-it-dimmed'))
   .use(require('./markdown-it-radio-button'))
   .use(require('./markdown-it-block-embed'))
-  .use(require('./markdown-it-icons'))
+  .use(require('../markdown-it-shared/markdown-it-icons'))
   .use(require('./markdown-it-footnotes'));
 
 // fix link
@@ -60,21 +59,9 @@ markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
   }
 };
 
-// fix emoji numbers
-const emojiData = require('markdown-it-emoji/lib/data/full.json');
-// Extend emoji here
-emojiData['zero'] = emojiData['0'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0030-20e3.png">';
-emojiData['one'] = emojiData['1'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0031-20e3.png">';
-emojiData['two'] = emojiData['2'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0032-20e3.png">';
-emojiData['three'] = emojiData['3'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0033-20e3.png">';
-emojiData['four'] = emojiData['4'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0034-20e3.png">';
-emojiData['five'] = emojiData['5'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0035-20e3.png">';
-emojiData['six'] = emojiData['6'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0036-20e3.png">';
-emojiData['seven'] = emojiData['7'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0037-20e3.png">';
-emojiData['eight'] = emojiData['8'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0038-20e3.png">';
-emojiData['nine'] = emojiData['9'] = '<img style="height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;" src="https://assets.cdn.github.com/images/icons/emoji/unicode/0039-20e3.png">';
+const fixedNumberEmojiDefs = require('../markdown-it-shared/markdown-it-emoji-fixed');
 markdownIt.use(require('markdown-it-emoji'), {
-  defs: emojiData
+  defs: fixedNumberEmojiDefs
 });
 
 module.exports = markdownIt;
diff --git a/src/lib/markbind/src/lib/vue-attribute-renderer/index.js b/src/lib/markbind/src/lib/vue-attribute-renderer/index.js
new file mode 100644
index 0000000000..aa3f724955
--- /dev/null
+++ b/src/lib/markbind/src/lib/vue-attribute-renderer/index.js
@@ -0,0 +1,28 @@
+/*
+ * markdownIt instance using a different set of plugins for parsing and rendering
+ * markdown in vue components' attributes.
+ *
+ * Todo standardise this with the main markdown parser
+ */
+
+const markdownIt = require('markdown-it')({
+  html: true,
+  linkify: true,
+});
+
+markdownIt.use(require('markdown-it-mark'))
+  .use(require('markdown-it-ins'))
+  .use(require('markdown-it-sub'))
+  .use(require('markdown-it-sup'))
+  .use(require('../markdown-it-shared/markdown-it-dimmed'))
+  .use(require('../markdown-it-shared/markdown-it-icons'))
+  .use(require('markdown-it-imsize'), {
+    autofill: false,
+  });
+
+const fixedNumberEmojiDefs = require('../markdown-it-shared/markdown-it-emoji-fixed');
+markdownIt.use(require('markdown-it-emoji'), {
+  defs: fixedNumberEmojiDefs,
+});
+
+module.exports = markdownIt;
diff --git a/src/lib/markbind/src/parser.js b/src/lib/markbind/src/parser.js
index 179dbce9db..7a8fc3a11c 100644
--- a/src/lib/markbind/src/parser.js
+++ b/src/lib/markbind/src/parser.js
@@ -6,6 +6,8 @@ const path = require('path');
 const Promise = require('bluebird');
 const url = require('url');
 const pathIsInside = require('path-is-inside');
+const slugify = require('@sindresorhus/slugify');
+const componentParser = require('./parsers/componentParser');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -458,6 +460,23 @@ class Parser {
     if (element.name) {
       element.name = element.name.toLowerCase();
     }
+
+    if ((/^h[1-6]$/).test(element.name) && !element.attribs.id) {
+      const textContent = utils.getTextContent(element);
+      const slugifiedHeading = slugify(textContent, { decamelize: false });
+
+      let headerId = slugifiedHeading;
+      const { headerIdMap } = config;
+      if (headerIdMap[slugifiedHeading]) {
+        headerId = `${slugifiedHeading}-${headerIdMap[slugifiedHeading]}`;
+        headerIdMap[slugifiedHeading] += 1;
+      } else {
+        headerIdMap[slugifiedHeading] = 2;
+      }
+
+      element.attribs.id = headerId;
+    }
+
     switch (element.name) {
     case 'md':
       element.name = 'span';
@@ -492,11 +511,17 @@ class Parser {
     default:
       break;
     }
+
+    componentParser.parseComponents(element, this._onError);
+
     if (element.children) {
       element.children.forEach((child) => {
         self._parse(child, context, config);
       });
     }
+
+    componentParser.postParseComponents(element, this._onError);
+
     return element;
   }
 
diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js
new file mode 100644
index 0000000000..3bbc235cc6
--- /dev/null
+++ b/src/lib/markbind/src/parsers/componentParser.js
@@ -0,0 +1,246 @@
+const cheerio = require('cheerio');
+
+const _ = {};
+_.has = require('lodash/has');
+
+const vueAttrRenderer = require('../lib/vue-attribute-renderer');
+
+cheerio.prototype.options.xmlMode = true; // Enable xml mode for self-closing tag
+cheerio.prototype.options.decodeEntities = false; // Don't escape HTML entities
+
+/*
+ * Private utility functions
+ */
+
+/**
+ * Parses the markdown attribute of the provided element, inserting the corresponding <slot> child
+ * if there is no pre-existing slot child with the name of the attribute present.
+ * @param element Element to parse
+ * @param attribute Attribute name to parse
+ * @param isInline Whether to parse the attribute with only inline markdown-it rules
+ * @param slotName Name attribute of the <slot> element to insert, which defaults to the attribute name
+ */
+function _parseAttributeWithoutOverride(element, attribute, isInline, slotName = attribute) {
+  const el = element;
+
+  const hasAttributeSlot = el.children
+    && el.children.some(child => _.has(child.attribs, 'slot') && child.attribs.slot === slotName);
+
+  if (!hasAttributeSlot && _.has(el.attribs, attribute)) {
+    let rendered;
+    if (isInline) {
+      rendered = vueAttrRenderer.renderInline(el.attribs[attribute]);
+    } else {
+      rendered = vueAttrRenderer.render(el.attribs[attribute]);
+    }
+
+    const attributeSlotElement = cheerio.parseHTML(
+      `<template slot="${slotName}">${rendered}</template>`, true);
+    el.children = el.children ? attributeSlotElement.concat(el.children) : attributeSlotElement;
+  }
+
+  delete el.attribs[attribute];
+}
+
+/*
+ * Panels
+ */
+
+function _parsePanelAttributes(element) {
+  const el = element;
+
+  _parseAttributeWithoutOverride(element, 'alt', false, '_alt');
+
+  const slotChildren = el.children && el.children.filter(child => _.has(child.attribs, 'slot'));
+  const hasAltSlot = slotChildren && slotChildren.some(child => child.attribs.slot === '_alt');
+  const hasHeaderSlot = slotChildren && slotChildren.some(child => child.attribs.slot === 'header');
+
+  // If both are present, the header attribute has no effect, and we can simply remove it.
+  if (hasAltSlot && hasHeaderSlot) {
+    delete el.attribs.header;
+    return;
+  }
+
+  _parseAttributeWithoutOverride(element, 'header', false, '_header');
+}
+
+/**
+ * Traverses the dom breadth-first from the specified element to find a html heading child.
+ * @param element Root element to search from
+ * @returns {undefined|*} The header element, or undefined if none is found.
+ */
+function _findHeaderElement(element) {
+  const elements = element.children;
+  if (!elements || !elements.length) {
+    return undefined;
+  }
+
+  const elementQueue = elements.slice(0);
+  while (elementQueue.length) {
+    const nextEl = elementQueue.shift();
+    if ((/^h[1-6]$/).test(nextEl.name)) {
+      return nextEl;
+    }
+
+    if (nextEl.children) {
+      nextEl.children.forEach(child => elementQueue.push(child));
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Assigns an id to the root element of a panel component using the heading specified in the
+ * panel's header slot or attribute (if any), with the header slot having priority if present.
+ * This is to ensure anchors still work when panels are in their minimized form.
+ * @param element The root panel element
+ */
+function _assignPanelId(element) {
+  const el = element;
+
+  const slotChildren = el.children && el.children.filter(child => _.has(child.attribs, 'slot'));
+  const headerSlot = slotChildren.find(child => child.attribs.slot === 'header');
+  const headerAttributeSlot = slotChildren.find(child => child.attribs.slot === '_header');
+
+  const slotElement = headerSlot || headerAttributeSlot;
+  if (slotElement) {
+    const header = _findHeaderElement(slotElement);
+    if (!header) {
+      return;
+    }
+
+    if (!header.attribs || !_.has(header.attribs, 'id')) {
+      throw new Error('Found a panel heading without an assigned id.\n'
+        + 'Please report this to the MarkBind developers. Thank you!');
+    }
+
+    el.attribs.id = header.attribs.id;
+  }
+}
+
+
+/*
+ * Popovers
+ */
+
+function _parsePopoverAttributes(element) {
+  _parseAttributeWithoutOverride(element, 'content', true);
+  _parseAttributeWithoutOverride(element, 'header', true);
+  // TODO deprecate title attribute for popovers
+  _parseAttributeWithoutOverride(element, 'title', true, 'header');
+}
+
+/*
+ * Tooltips
+ */
+
+function _parseTooltipAttributes(element) {
+  _parseAttributeWithoutOverride(element, 'content', true, '_content');
+}
+
+/*
+ * Modals
+ */
+
+function _renameSlot(element, originalName, newName) {
+  if (element.children) {
+    element.children.forEach((c) => {
+      const child = c;
+
+      if (_.has(child.attribs, 'slot') && child.attribs.slot === originalName) {
+        child.attribs.slot = newName;
+      }
+    });
+  }
+}
+
+function _parseModalAttributes(element) {
+  _parseAttributeWithoutOverride(element, 'header', true, '_header');
+  // TODO deprecate title attribute for modals
+  _parseAttributeWithoutOverride(element, 'title', true, '_header');
+
+  // TODO deprecate modal-header, modal-footer attributes for modals
+  _renameSlot(element, 'modal-header', 'header');
+  _renameSlot(element, 'modal-footer', 'footer');
+}
+
+/*
+ * Tabs
+ */
+
+function _parseTabAttributes(element) {
+  _parseAttributeWithoutOverride(element, 'header', true, '_header');
+}
+
+/*
+ * Tip boxes
+ */
+
+function _parseBoxAttributes(element) {
+  _parseAttributeWithoutOverride(element, 'icon', true, '_icon');
+}
+
+/*
+ * API
+ */
+
+function parseComponents(element, errorHandler) {
+  try {
+    switch (element.name) {
+    case 'panel':
+      _parsePanelAttributes(element);
+      break;
+    case 'popover':
+      _parsePopoverAttributes(element);
+      break;
+    case 'tooltip':
+      _parseTooltipAttributes(element);
+      break;
+    case 'modal':
+      _parseModalAttributes(element);
+      break;
+    case 'tab':
+    case 'tab-group':
+      _parseTabAttributes(element);
+      break;
+    case 'box':
+      _parseBoxAttributes(element);
+      break;
+    default:
+      break;
+    }
+  } catch (error) {
+    if (!errorHandler) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      return;
+    }
+    errorHandler(error);
+  }
+}
+
+function postParseComponents(element, errorHandler) {
+  try {
+    switch (element.name) {
+    case 'panel':
+      _assignPanelId(element);
+      break;
+    default:
+      break;
+    }
+  } catch (error) {
+    if (!errorHandler) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      return;
+    }
+    errorHandler(error);
+  }
+}
+
+
+module.exports = {
+  parseComponents,
+  postParseComponents,
+};
diff --git a/src/lib/markbind/src/utils.js b/src/lib/markbind/src/utils.js
index c2098adfca..4e6eee399f 100644
--- a/src/lib/markbind/src/utils.js
+++ b/src/lib/markbind/src/utils.js
@@ -72,4 +72,32 @@ module.exports = {
   createErrorElement(error) {
     return `<div style="color: red">${error.message}</div>`;
   },
+
+  /**
+   * Traverses the dom depth-first from the specified element to concatenate
+   * all text of the specified element.
+   * @param element Root element to search from
+   * @returns string The concatenated text, or undefined if it is an empty string.
+   */
+  getTextContent(element) {
+    const elements = element.children;
+    if (!elements || !elements.length) {
+      return undefined;
+    }
+
+    const elementStack = elements.slice();
+    const text = [];
+    while (elementStack.length) {
+      const nextEl = elementStack.shift();
+      if (nextEl.type === 'text') {
+        text.push(nextEl.data);
+      }
+
+      if (nextEl.children && nextEl.type !== 'comment') {
+        elementStack.unshift(...nextEl.children);
+      }
+    }
+
+    return text.join('').trim();
+  },
 };
diff --git a/src/plugins/default/markbind-plugin-anchors.js b/src/plugins/default/markbind-plugin-anchors.js
index 1499038335..11b5bf1353 100644
--- a/src/plugins/default/markbind-plugin-anchors.js
+++ b/src/plugins/default/markbind-plugin-anchors.js
@@ -1,5 +1,4 @@
 const cheerio = module.parent.require('cheerio');
-const md = require('./../../lib/markbind/src/lib/markdown-it');
 
 const {
   ANCHOR_HTML,
@@ -17,14 +16,6 @@ module.exports = {
         $(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));
       }
     });
-    $('panel[header]').each((i, panel) => {
-      const panelHeading = cheerio.load(md.render(panel.attribs.header), { xmlMode: false });
-      if (panelHeading(HEADER_TAGS).length >= 1) {
-        const headingId = $(panelHeading(HEADER_TAGS)[0]).attr('id');
-        const anchorIcon = ANCHOR_HTML.replace(/"/g, "'").replace('#', `#${headingId}`);
-        $(panel).attr('header', `${$(panel).attr('header')}${anchorIcon}`);
-      }
-    });
     return $.html();
   },
 };
diff --git a/src/template/default/_markbind/headers/header.md b/src/template/default/_markbind/headers/header.md
index 2ef08b7a74..cadbbb5a5c 100644
--- a/src/template/default/_markbind/headers/header.md
+++ b/src/template/default/_markbind/headers/header.md
@@ -3,7 +3,7 @@
     <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">Your Logo</a>
     <li><a href="{{baseUrl}}/contents/topic1.html" class="nav-link">Topic 1</a></li>
     <li><a href="{{baseUrl}}/contents/topic2.html" class="nav-link">Topic 2</a></li>
-    <dropdown text="Topic 3" class="nav-link">
+    <dropdown header="Topic 3" class="nav-link">
       <li><a href="{{baseUrl}}/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
       <li><a href="{{baseUrl}}/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
     </dropdown>
@@ -13,4 +13,4 @@
       </form>
     </li>
   </navbar>
-</header>
\ No newline at end of file
+</header>
diff --git a/src/template/default/index.md b/src/template/default/index.md
index 231d945f88..8668ea84fb 100755
--- a/src/template/default/index.md
+++ b/src/template/default/index.md
@@ -9,7 +9,7 @@
 
 <div class="jumbotron jumbotron-fluid bg-primary text-white">
   <div class="container">
-    <h1 class="display-4">Landing Page Title</h1>
+    <h1 class="display-4 no-index">Landing Page Title</h1>
     <p class="lead">A tagline can go here</p>
   </div>
 </div>
@@ -41,7 +41,7 @@ Some text some text some text some text some text some text some text. **Some te
 
 A <tooltip effect="scale" content=":exclamation: some **important explanation**" placement="top" trigger="hover">tooltip</tooltip>, a <trigger for="modal:modalinfo" trigger="click">modal</trigger>, a <a href="https://markbind.org/">link</a>, a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.
 
-<modal title="Modal Title" id="modal:modalinfo">
+<modal header="Modal Title" id="modal:modalinfo">
 Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
 </modal>
 
diff --git a/test/functional/test_site/bugs/modal.md b/test/functional/test_site/bugs/modal.md
index 99e7557c03..6a09255b1c 100644
--- a/test/functional/test_site/bugs/modal.md
+++ b/test/functional/test_site/bugs/modal.md
@@ -1,5 +1,5 @@
 This is to reproduce <trigger trigger="click" for="modal:bugRepro">multiple inclusions of a modal bug</trigger> 
 
-<modal large title="Establishing Requirements" id="modal:bugRepro">
+<modal large header="Establishing Requirements" id="modal:bugRepro">
 <include src="../requirements/EstablishingRequirements.md#preview"/>
 </modal>
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 2bcde6c1cc..ef7877e2e0 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -58,7 +58,7 @@
             <p>This is to reproduce
               <trigger trigger="click" for="modal:bugRepro">multiple inclusions of a modal bug</trigger>
             </p>
-            <modal large="" title="Establishing Requirements" id="modal:bugRepro">
+            <modal large="" id="modal:bugRepro"><template slot="_header">Establishing Requirements</template>
               <div>
                 <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
                   do.
@@ -70,7 +70,7 @@
             <p>This is to reproduce
               <trigger trigger="click" for="modal:bugRepro">multiple inclusions of a modal bug</trigger>
             </p>
-            <modal large="" title="Establishing Requirements" id="modal:bugRepro">
+            <modal large="" id="modal:bugRepro"><template slot="_header">Establishing Requirements</template>
               <div>
                 <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
                   do.
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index bf9ac77b7d..9ad3ba5a13 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -200,18 +200,18 @@ <h1 id="heading-with-multiple-keywords">Heading with multiple keywords<a class="
           <p><span class="keyword">keyword 1</span>
             <span class="keyword">keyword 2</span></p>
           <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel<a class="fa fa-anchor" href="#heading-with-keyword-in-panel"></a></h1>
-          <panel header="Panel with keyword" expanded="">
+          <panel expanded=""><template slot="_header"><p>Panel with keyword</p></template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Panel with heading with keyword</strong></p>
-          <panel header="# Panel with heading<a class='fa fa-anchor' href='#panel-with-heading'></a>" expanded="">
+          <panel expanded="" id="panel-with-heading"><template slot="_header"><h1 id="panel-with-heading">Panel with heading<a class="fa fa-anchor" href="#panel-with-heading"></a></h1></template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Expanded panel without heading with keyword</strong></p>
-          <panel header="# Panel without heading with keyword<a class='fa fa-anchor' href='#panel-without-heading-with-keyword'></a>" expanded="">
+          <panel expanded="" id="panel-without-heading-with-keyword"><template slot="_header"><h1 id="panel-without-heading-with-keyword">Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword"></a></h1></template>
             <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading"></a></h1>
             <p><span class="keyword">panel keyword</span></p>
           </panel>
           <p><strong>Unexpanded panel with heading with keyword</strong>
-            <panel header="# Panel with heading with keyword<a class='fa fa-anchor' href='#panel-with-heading-with-keyword'></a>"></panel>
+            <panel id="panel-with-heading-with-keyword"><template slot="_header"><h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword"></a></h1></template></panel>
           </p>
           <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading"></a></h1>
           <p><span class="keyword">panel keyword</span></p>
@@ -285,7 +285,7 @@ <h4 id="user-surveys">User surveys<a class="fa fa-anchor" href="#user-surveys"><
             <p>Carefully designed questionnaires can be used to solicit responses and opinions from a large number of users regarding any current system or a new innovation.</p>
             <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"></a></h4>
             <p>Focus groups are a kind of informal interview within an interactive group setting. A
-              <tooltip content="e.g. potential users, beta testers">group of people</tooltip>
+              <tooltip><template slot="_content">e.g. potential users, beta testers</template>group of people</tooltip>
               are asked about their understanding of a specific issue or a process. Focus groups can bring out undiscovered conflicts and misunderstandings among stakeholder interests which can then be resolved or clarified as necessary.</p>
           </div>
           <p><strong>Include segment</strong></p>
@@ -295,16 +295,16 @@ <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"><
           </div>
           <p><strong>Dynamic include</strong></p>
           <p>
-            <panel src="/test_site/requirements/SpecifyingRequirements._include_.html" name="Dynamic Include" no-close="true" no-switch="true" header="Dynamic Include"></panel>
+            <panel src="/test_site/requirements/SpecifyingRequirements._include_.html" name="Dynamic Include" no-close="true" no-switch="true"><template slot="_header"><p>Dynamic Include</p></template></panel>
           </p>
           <p><strong>Boilerplate include</strong></p>
           <div name="Boilerplate Referencing">
             <p>
-              <panel src="/test_site/requirements/UserStories._include_.html" header="Boilerplate Includes" no-close=""></panel>
+              <panel src="/test_site/requirements/UserStories._include_.html" no-close=""><template slot="_header"><p>Boilerplate Includes</p></template></panel>
             </p>
           </div>
           <p>
-            <panel src="/test_site/requirements/notInside._include_.html" name="Referencing specified path in boilerplate" no-close="true" no-switch="true" header="Referencing specified path in boilerplate"></panel>
+            <panel src="/test_site/requirements/notInside._include_.html" name="Referencing specified path in boilerplate" no-close="true" no-switch="true"><template slot="_header"><p>Referencing specified path in boilerplate</p></template></panel>
           </p>
           <p><strong>Nested include</strong></p>
           <div>
@@ -421,44 +421,44 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
         Heading
     </span></panel>
           <p><strong>Panel without src</strong></p>
-          <panel header="## Panel without src header<a class='fa fa-anchor' href='#panel-without-src-header'></a>" expanded="">
+          <panel expanded="" id="panel-without-src-header"><template slot="_header"><h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header"></a></h2></template>
             <div>
               <p><strong>Panel without src content heading</strong></p>
             </div>
           </panel>
           <p><strong>Panel with normal src</strong></p>
-          <panel header="## Panel with normal src header<a class='fa fa-anchor' href='#panel-with-normal-src-header'></a>" src="/test_site/testPanels/PanelNormalSource._include_.html" expanded=""></panel>
+          <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded="" id="panel-with-normal-src-header"><template slot="_header"><h2 id="panel-with-normal-src-header">Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header"></a></h2></template></panel>
           <p><strong>Panel with src from a page segment</strong></p>
-          <panel header="## Panel with src from a page segment header<a class='fa fa-anchor' href='#panel-with-src-from-a-page-segment-header'></a>" src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment"></panel>
+          <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment" id="panel-with-src-from-a-page-segment-header"><template slot="_header"><h2 id="panel-with-src-from-a-page-segment-header">Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header"></a></h2></template></panel>
           <p><strong>Panel with boilerplate</strong></p>
-          <panel header="## Boilerplate referencing<a class='fa fa-anchor' href='#boilerplate-referencing'></a>" src="/test_site/testPanels/boilerTestPanel._include_.html" expanded=""></panel>
-          <panel header="## Referencing specified path in boilerplate<a class='fa fa-anchor' href='#referencing-specified-path-in-boilerplate'></a>" src="/test_site/testPanels/notInside._include_.html" expanded=""></panel>
+          <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded="" id="boilerplate-referencing"><template slot="_header"><h2 id="boilerplate-referencing">Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing"></a></h2></template></panel>
+          <panel src="/test_site/testPanels/notInside._include_.html" expanded="" id="referencing-specified-path-in-boilerplate"><template slot="_header"><h2 id="referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate"></a></h2></template></panel>
           <p><strong>Nested panel</strong></p>
-          <panel header="## Outer nested panel<a class='fa fa-anchor' href='#outer-nested-panel'></a>" src="/test_site/testPanels/NestedPanel._include_.html" expanded=""></panel>
+          <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded="" id="outer-nested-panel"><template slot="_header"><h2 id="outer-nested-panel">Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel"></a></h2></template></panel>
           <p><strong>Nested panel without src</strong></p>
-          <panel header="## Outer nested panel without src<a class='fa fa-anchor' href='#outer-nested-panel-without-src'></a>" expanded="">
+          <panel expanded="" id="outer-nested-panel-without-src"><template slot="_header"><h2 id="outer-nested-panel-without-src">Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src"></a></h2></template>
             <p><strong>Panel content of outer nested panel</strong></p>
-            <panel header="## Inner panel header without src<a class='fa fa-anchor' href='#inner-panel-header-without-src'></a>" expanded="">
+            <panel expanded="" id="inner-panel-header-without-src"><template slot="_header"><h2 id="inner-panel-header-without-src">Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src"></a></h2></template>
               <p><strong>Panel content of inner nested panel</strong></p>
             </panel>
           </panel>
           <p><strong>Panel with src from another Markbind site</strong></p>
-          <panel header="## Panel with src from another Markbind site header<a class='fa fa-anchor' href='#panel-with-src-from-another-markbind-site-header'></a>" src="/test_site/sub_site/index._include_.html" expanded=""></panel>
-          <panel header="## Panel with src from another Markbind site header<a class='fa fa-anchor' href='#panel-with-src-from-another-markbind-site-header'></a>" src="/test_site/sub_site/testReuse._include_.html" expanded=""></panel>
+          <panel src="/test_site/sub_site/index._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header"><template slot="_header"><h2 id="panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header"></a></h2></template></panel>
+          <panel src="/test_site/sub_site/testReuse._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header-2"><template slot="_header"><h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2"></a></h2></template></panel>
         </div>
         <p><strong>Modal with panel inside</strong></p>
         <p>
           <trigger for="modal-with-panel">trigger</trigger>
         </p>
-        <modal title="modal title with panel inside" id="modal-with-panel">
-          <panel header="## Panel inside modal<a class='fa fa-anchor' href='#panel-inside-modal'></a>" expanded="">
+        <modal id="modal-with-panel"><template slot="_header">modal title with panel inside</template>
+          <panel expanded="" id="panel-inside-modal"><template slot="_header"><h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal"></a></h2></template>
             <p><strong>Panel content inside modal</strong></p>
           </panel>
         </modal>
         <p><strong>Unexpanded panel</strong></p>
-        <panel header="## Unexpanded panel header<a class='fa fa-anchor' href='#unexpanded-panel-header'></a>">
+        <panel id="unexpanded-panel-header"><template slot="_header"><h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header"></a></h2></template>
           <p><strong>Panel content of unexpanded panel should not appear in search data</strong></p>
-          <panel header="## Panel header inside unexpanded panel should not appear in search data<a class='fa fa-anchor' href='#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data'></a>" expanded="">
+          <panel expanded="" id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template slot="_header"><h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data">Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2></template>
             <p><strong>Panel content inside unexpanded panel should not appear in search data</strong></p>
           </panel>
         </panel>
@@ -568,6 +568,7 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
               <a class="nav-link py-1" href="#outer-nested-panel-without-src">Outer nested panel without src&#x200E;</a>
               <a class="nav-link py-1" href="#inner-panel-header-without-src">Inner panel header without src&#x200E;</a>
               <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header&#x200E;</a>
+              <a class="nav-link py-1" href="#panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header&#x200E;</a>
               <a class="nav-link py-1" href="#unexpanded-panel-header">Unexpanded panel header&#x200E;</a>
             </nav>
             <a class="nav-link py-1" href="#markbind-plugin-pre-render">Markbind Plugin Pre-render&#x200E;</a>
diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site/expected/markbind/css/markbind.css
+++ b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/functional/test_site/expected/requirements/notInside._include_.html b/test/functional/test_site/expected/requirements/notInside._include_.html
index 6c66d584a0..3f9e278036 100644
--- a/test/functional/test_site/expected/requirements/notInside._include_.html
+++ b/test/functional/test_site/expected/requirements/notInside._include_.html
@@ -3,4 +3,4 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within
 <p>Like static include, pages within the site should be able to use files located in folders within boilerplate.</p>
 <p>Also, the boilerplate file name (e.g. <code>inside.md</code>) and the file that it is supposed to act as (<code>notInside.md</code>) can be different.</p>
 <p>This file should behaves as if it is in the <code>requirements</code> folder:</p>
-<panel header="Tested with the folllowing include" src="/test_site/requirements/NonFunctionalRequirements._include_.html"></panel>
\ No newline at end of file
+<panel src="/test_site/requirements/NonFunctionalRequirements._include_.html"><template slot="_header"><p>Tested with the folllowing include</p></template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/siteData.json b/test/functional/test_site/expected/siteData.json
index e7d31b4113..83b3ff88d2 100644
--- a/test/functional/test_site/expected/siteData.json
+++ b/test/functional/test_site/expected/siteData.json
@@ -23,6 +23,7 @@
         "outer-nested-panel": "Outer nested panel",
         "outer-nested-panel-without-src": "Outer nested panel without src",
         "panel-with-src-from-another-markbind-site-header": "Panel with src from another Markbind site header",
+        "panel-with-src-from-another-markbind-site-header-2": "Panel with src from another Markbind site header",
         "unexpanded-panel-header": "Unexpanded panel header",
         "keyword-should-be-tagged-to-this-heading-not-the-panel-heading": "Keyword should be tagged to this heading, not the panel heading | panel keyword",
         "panel-normal-source-content-headings": "Panel normal source content headings",
@@ -140,24 +141,26 @@
     },
     {
       "headings": {
-        "should-have-anchor": "should have anchor",
         "should-have-anchor-7": "should have anchor",
+        "should-have-anchor-20": "should have anchor",
         "should-have-anchor-8": "should have anchor",
         "should-have-anchor-9": "should have anchor",
         "should-have-anchor-10": "should have anchor",
-        "should-have-anchor-19": "should have anchor",
-        "should-have-anchor-20": "should have anchor",
+        "should-have-anchor-11": "should have anchor",
         "should-have-anchor-21": "should have anchor",
         "should-have-anchor-22": "should have anchor",
+        "should-have-anchor-23": "should have anchor",
+        "should-have-anchor-24": "should have anchor",
         "root-file": "Root file",
+        "should-have-anchor": "should have anchor",
         "should-have-anchor-2": "should have anchor",
         "should-have-anchor-3": "should have anchor",
         "should-have-anchor-4": "should have anchor",
         "included-file": "Included File",
-        "should-have-anchor-13": "should have anchor",
         "should-have-anchor-14": "should have anchor",
         "should-have-anchor-15": "should have anchor",
-        "should-have-anchor-16": "should have anchor"
+        "should-have-anchor-16": "should have anchor",
+        "should-have-anchor-17": "should have anchor"
       },
       "title": "Anchor Generation Test",
       "src": "testAnchorGeneration.md",
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index bf2b31a70d..2853fd0f6b 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -33,10 +33,9 @@ <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#s
         <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
         <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
         <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
-        <panel header="#### should have anchor<a class='fa fa-anchor' href='#should-have-anchor'></a>">
-          Lorem ipsum
+        <panel id="should-have-anchor-7"><template slot="_header"><h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4></template> Lorem ipsum
         </panel>
-        <panel header="Collapsed">
+        <panel><template slot="_header"><p>Collapsed</p></template>
           <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
           <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
           <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
@@ -45,29 +44,28 @@ <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor"
           <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
           <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6>
         </panel>
-        <panel header="Expanded" expanded="">
+        <panel expanded=""><template slot="_header"><p>Expanded</p></template>
           <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-          <h1 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h1>
-          <h2 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h2>
-          <h3 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h3>
-          <h4 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h4>
-          <h5 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h5>
-          <h6 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h6>
+          <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
+          <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
+          <h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
+          <h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
+          <h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
+          <h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6>
         </panel>
         <hr>
         <div>
           <h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
           <br>
-          <h1 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h1>
-          <h2 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h2>
-          <h3 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h3>
-          <h4 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h4>
-          <h5 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h5>
-          <h6 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h6>
-          <panel header="#### should have anchor<a class='fa fa-anchor' href='#should-have-anchor'></a>">
-            Lorem ipsum
+          <h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
+          <h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
+          <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
+          <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
+          <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
+          <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
+          <panel id="should-have-anchor-20"><template slot="_header"><h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4></template> Lorem ipsum
           </panel>
-          <panel header="Collapsed">
+          <panel><template slot="_header"><p>Collapsed</p></template>
             <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
             <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
             <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
@@ -76,14 +74,14 @@ <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor"
             <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
             <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6>
           </panel>
-          <panel header="Expanded" expanded="">
+          <panel expanded=""><template slot="_header"><p>Expanded</p></template>
             <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-            <h1 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h1>
-            <h2 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h2>
-            <h3 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h3>
-            <h4 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h4>
-            <h5 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h5>
-            <h6 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h6>
+            <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
+            <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
+            <h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
+            <h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
+            <h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
+            <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6>
           </panel>
         </div>
       </div>
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index d47743771c..0a82231c34 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -31,7 +31,7 @@
           <li><a href="/" class="nav-link">One</a></li>
           <li><a href="/" class="nav-link">Two</a></li>
           <div class="nav-link temp-dropdown-placeholder">Dropdown</div>
-          <dropdown text="Dropdown" class="nav-link temp-dropdown">
+          <dropdown header="Dropdown" class="nav-link temp-dropdown">
             <li><a class="dropdown-item" href="/">Dropdown One</a></li>
             <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
           </dropdown>
@@ -39,7 +39,7 @@
 
         <p><strong>Test dropdown in body with text and class attributes</strong></p>
         <div class="test-class temp-dropdown-placeholder">Test One</div>
-        <dropdown text="Test One" class="test-class temp-dropdown">
+        <dropdown header="Test One" class="test-class temp-dropdown">
           <li><a class="dropdown-item" href="/">Dropdown One</a></li>
           <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
         </dropdown>
diff --git a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
index c4c0445879..a4b5b4139a 100644
--- a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
@@ -1 +1 @@
-<panel header="## Nested Panel" src="/test_site/testPanels/NormalPanelContent._include_.html" expanded=""></panel>
\ No newline at end of file
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel</h2></template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/index.md b/test/functional/test_site/index.md
index 0910e72a61..8821f50a97 100644
--- a/test/functional/test_site/index.md
+++ b/test/functional/test_site/index.md
@@ -247,7 +247,7 @@ tags: ["tag-frontmatter-shown", "tag-included-file", "+tag-exp*", "-tag-exp-hidd
 
 <trigger for="modal-with-panel">trigger</trigger>
 
-<modal title="modal title with panel inside" id="modal-with-panel">
+<modal header="modal title with panel inside" id="modal-with-panel">
   <panel header="## Panel inside modal" expanded>
   
   **Panel content inside modal**
diff --git a/test/functional/test_site/testAntiFOUCStyles.md b/test/functional/test_site/testAntiFOUCStyles.md
index 5502705a9b..39f529ccfe 100644
--- a/test/functional/test_site/testAntiFOUCStyles.md
+++ b/test/functional/test_site/testAntiFOUCStyles.md
@@ -3,7 +3,7 @@
 <navbar type="dark">
   <li><a href="/" class="nav-link">One</a></li>
   <li><a href="/" class="nav-link">Two</a></li>
-  <dropdown text="Dropdown" class="nav-link">
+  <dropdown header="Dropdown" class="nav-link">
     <li><a class="dropdown-item" href="/">Dropdown One</a></li>
     <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
   </dropdown>
@@ -12,7 +12,7 @@
 <!-- Anti-FOUC styles should be applied to dropdown. -->
 **Test dropdown in body with text and class attributes**
 
-<dropdown text="Test One" class="test-class">
+<dropdown header="Test One" class="test-class">
   <li><a class="dropdown-item" href="/">Dropdown One</a></li>
   <li><a class="dropdown-item" href="/">Dropdown Two</a></li>
 </dropdown>
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index d86dae4cda..8964d7f1e4 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -36,27 +36,24 @@
         <p><strong>Test Algolia plugin adds algolia-no-index classes</strong></p>
         <p><strong>Dropdowns should have algolia-no-index class</strong></p>
         <div class="temp-dropdown-placeholder">Dropdown</div>
-        <dropdown text="Dropdown" class="temp-dropdown algolia-no-index">
+        <dropdown header="Dropdown" class="temp-dropdown algolia-no-index">
           <li><a class="dropdown-item" href="/">One</a></li>
           <li><a class="dropdown-item" href="/">Two</a></li>
         </dropdown>
         <p><strong>Modal content should have algolia-no-index class</strong></p>
-        <modal title="Modal" id="modal:trigger_id" class="algolia-no-index">
-          Content should have `algolia-no-index` class
+        <modal id="modal:trigger_id" class="algolia-no-index"><template slot="_header">Modal</template> Content should have `algolia-no-index` class
         </modal>
         <trigger for="modal:trigger_id">Trigger should not have `algolia-no-index` class</trigger>
         <p><strong>Panels that are not expanded should have algolia-no-index class</strong></p>
-        <panel header="Panel" class="algolia-no-index">
-          Content
+        <panel class="algolia-no-index"><template slot="_header"><p>Panel</p></template> Content
         </panel>
-        <panel header="Panel" expanded="">
-          Content
+        <panel expanded=""><template slot="_header"><p>Panel</p></template> Content
         </panel>
         <p><strong>Popover content should have algolia-no-index class</strong></p>
-        <popover effect="fade" title="Title" placement="top">
+        <popover effect="fade" placement="top"><template slot="header">Title</template>
           <div slot="content" class="algolia-no-index">Content should have `algolia-no-index` class</div>
           <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></popover>
-        <popover effect="fade" title="Title" content="Content as attribute does not require `algolia-no-index` class" placement="top">
+        <popover effect="fade" placement="top"><template slot="header">Title</template><template slot="content">Content as attribute does not require <code>algolia-no-index</code> class</template>
           <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></popover>
         <p><strong>Question hint and answer should have algolia-no-index class</strong></p>
         <question>
@@ -66,42 +63,42 @@
         </question>
         <p><strong>Tabs except first tab should have algolia-no-index class</strong></p>
         <tabs>
-          <tab header="First Tab">
-            Content<br>Content<br>Content<br>Content
+          <tab><template slot="_header">First Tab</template> Content
+            <br>Content<br>Content<br>Content
           </tab>
-          <tab header="Second Tab" class="algolia-no-index">
-            Content<br>Content<br>Content<br>Content
+          <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
+            <br>Content<br>Content<br>Content
           </tab>
         </tabs>
         <tabs>
-          <tab-group header="First Group">
-            <tab header="First Tab">
-              Content<br>Content<br>Content<br>Content
+          <tab-group><template slot="_header">First Group</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
-            <tab header="Second Tab" class="algolia-no-index">
-              Content<br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
           </tab-group>
-          <tab-group header="Second Group" class="algolia-no-index">
-            <tab header="First Tab">
-              Content<br>Content<br>Content<br>Content
+          <tab-group class="algolia-no-index"><template slot="_header">Second Group</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
-            <tab header="Second Tab" class="algolia-no-index">
-              Content<br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
           </tab-group>
         </tabs>
         <tabs>
-          <tab-group header="Outer One">
-            <tab header="First Tab">
-              Content<br>Content<br>Content<br>Content
+          <tab-group><template slot="_header">Outer One</template>
+            <tab class="algolia-no-index"><template slot="_header">First Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
-            <tab header="Second Tab" class="algolia-no-index">
-              Content<br>Content<br>Content<br>Content
+            <tab class="algolia-no-index"><template slot="_header">Second Tab</template> Content
+              <br>Content<br>Content<br>Content
             </tab>
           </tab-group>
-          <tab header="Outer Two" class="algolia-no-index">
-            Content<br>Content<br>Content<br>Content
+          <tab class="algolia-no-index"><template slot="_header">Outer Two</template> Content
+            <br>Content<br>Content<br>Content
           </tab>
         </tabs>
       </div>
diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/functional/test_site_algolia_plugin/index.md b/test/functional/test_site_algolia_plugin/index.md
index 756f4da1a3..0345c30490 100644
--- a/test/functional/test_site_algolia_plugin/index.md
+++ b/test/functional/test_site_algolia_plugin/index.md
@@ -8,14 +8,14 @@
 
 **Dropdowns should have algolia-no-index class**
 
-<dropdown text="Dropdown">
+<dropdown header="Dropdown">
   <li><a class="dropdown-item" href="/">One</a></li>
   <li><a class="dropdown-item" href="/">Two</a></li>
 </dropdown>
 
 **Modal content should have algolia-no-index class**
 
-<modal title="Modal" id="modal:trigger_id">
+<modal header="Modal" id="modal:trigger_id">
   Content should have `algolia-no-index` class
 </modal>
 <trigger for="modal:trigger_id">Trigger should not have `algolia-no-index` class</trigger>
@@ -32,12 +32,12 @@
 
 **Popover content should have algolia-no-index class**
 
-<popover effect="fade" title="Title" placement="top">
+<popover effect="fade" header="Title" placement="top">
   <div slot="content">Content should have `algolia-no-index` class</div>
   <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
 </popover>
 
-<popover effect="fade" title="Title" content="Content as attribute does not require `algolia-no-index` class" placement="top">
+<popover effect="fade" header="Title" content="Content as attribute does not require `algolia-no-index` class" placement="top">
   <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
 </popover>
 
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index f9f1881e44..d4644617f4 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index b6e20af7bf..f6d07541f6 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index 84387ca69f..44244d9820 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index de8ebbd692..37b1f0a22d 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_convert/expected/markbind/css/markbind.css b/test/functional/test_site_convert/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site_convert/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_convert/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index ba43dbfd64..9f4ada31f7 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -29,8 +29,7 @@
         <div></div>
         <p>Variable from layout</p>
         <p>This is an importedVar</p>
-        <panel header="Expanded panel" alt="Minimized panel" type="success" minimized="">
-          Math formulas
+        <panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> Math formulas
         </panel>
         <div></div>
         <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
diff --git a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
index baceca63b5..985e82c7d1 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
index ddb5725e5b..ccda6e15f9 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
index b6b24de7e6..2f118f78b6 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
index 90ac8110de..c5e2316521 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 03d4f64094..6573207428 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -29,7 +29,7 @@
         <li><a href="/contents/topic1.html" class="nav-link">Topic 1</a></li>
         <li><a href="/contents/topic2.html" class="nav-link">Topic 2</a></li>
         <div class="nav-link temp-dropdown-placeholder">Topic 3</div>
-        <dropdown text="Topic 3" class="nav-link temp-dropdown">
+        <dropdown header="Topic 3" class="nav-link temp-dropdown">
           <li><a href="/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
           <li><a href="/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
         </dropdown>
@@ -64,7 +64,7 @@
         <br>
         <div class="jumbotron jumbotron-fluid bg-primary text-white">
           <div class="container">
-            <h1 class="display-4">Landing Page Title</h1>
+            <h1 class="display-4 no-index" id="landing-page-title">Landing Page Title<a class="fa fa-anchor" href="#landing-page-title"></a></h1>
             <p class="lead">A tagline can go here</p>
           </div>
         </div>
@@ -94,11 +94,10 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
 </code></pre>
         <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
         <p>A
-          <tooltip effect="scale" content=":exclamation: some **important explanation**" placement="top" trigger="hover">tooltip</tooltip>, a
+          <tooltip effect="scale" placement="top" trigger="hover"><template slot="_content">❗️ some <strong>important explanation</strong></template>tooltip</tooltip>, a
           <trigger for="modal:modalinfo" trigger="click">modal</trigger>, a <a href="https://markbind.org/">link</a>, a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
-        <modal title="Modal Title" id="modal:modalinfo">
-          Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text
-          some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+        <modal id="modal:modalinfo"><template slot="_header">Modal Title</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some
+          text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
         </modal>
         <p><strong>A table:</strong></p>
         <div class="table-responsive">
@@ -132,19 +131,15 @@ <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-headi
         <div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" width="640" height="390" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen></iframe></div>
         <p><strong>Tabs:</strong></p>
         <tabs>
-          <tab header="Tab X">
-            Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text
-            some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+          <tab><template slot="_header">Tab X</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text
+            some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
           </tab>
-          <tab header="Tab Y">
-            ...
+          <tab><template slot="_header">Tab Y</template> ...
           </tab>
-          <tab-group header="Tab group">
-            <tab header="Tab Y.1">
-              ...
+          <tab-group><template slot="_header">Tab group</template>
+            <tab><template slot="_header">Tab Y.1</template> ...
             </tab>
-            <tab header="Tab Y.2">
-              ...
+            <tab><template slot="_header">Tab Y.2</template> ...
             </tab>
           </tab-group>
         </tabs>
@@ -174,22 +169,19 @@ <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2"></a></h1>
         </box>
         <br>
         <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
-        <panel header="Expandable panel" type="info">
-          Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text
-          some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
+        <panel type="info"><template slot="_header"><p>Expandable panel</p></template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some
+          text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
         </panel>
         <br>
-        <panel header="Expanded panel" alt="Minimized panel" type="success" minimized="">
-          ...
+        <panel type="success" minimized=""><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> ...
         </panel>
         <br>
-        <panel header="Expanded panel" alt="Minimized panel" type="seamless">
-          ...
+        <panel type="seamless"><template slot="_header"><p>Expanded panel</p></template><template slot="_alt"><p>Minimized panel</p></template> ...
         </panel>
         <br>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          <panel header="___Minimal panel **->**___" type="minimal" alt="Minimal panel" popup-url="https://markbind.org/userGuide/usingComponents.html#panels" no-switch="">
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          <panel type="minimal" popup-url="https://markbind.org/userGuide/usingComponents.html#panels" no-switch=""><template slot="_header"><p><em><strong>Minimal panel <strong>-&gt;</strong></strong></em></p></template><template slot="_alt"><p>Minimal panel</p></template> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           </panel>
         </p>
         <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/functional/test_site_templates/test_default/expected/siteData.json b/test/functional/test_site_templates/test_default/expected/siteData.json
index c8dbf41472..ad3e3ff7b6 100644
--- a/test/functional/test_site_templates/test_default/expected/siteData.json
+++ b/test/functional/test_site_templates/test_default/expected/siteData.json
@@ -3,7 +3,6 @@
   "pages": [
     {
       "headings": {
-        "undefined": "Landing Page Title",
         "heading-1": "Heading 1",
         "sub-heading-1-1": "Sub Heading 1.1",
         "sub-heading-1-2": "Sub Heading 1.2",
diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
index 92328d46d5..e8bfdd009f 100644
--- a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {
diff --git a/test/unit/markdown-it-icons.test.js b/test/unit/markdown-it-icons.test.js
index 26197c6b48..d8013636c1 100644
--- a/test/unit/markdown-it-icons.test.js
+++ b/test/unit/markdown-it-icons.test.js
@@ -1,5 +1,5 @@
 const markdownIt = require('markdown-it')()
-  .use(require('../../src/lib/markbind/src/lib/markdown-it/markdown-it-icons'));
+  .use(require('../../src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons'));
 
 test('markdown-it-icons renders icon syntax correctly', () => {
   const source = ':fab-font-awesome: :glyphicon-home:';
diff --git a/test/unit/parser.test.js b/test/unit/parser.test.js
index 44b3a9b53a..98cb71a848 100644
--- a/test/unit/parser.test.js
+++ b/test/unit/parser.test.js
@@ -513,6 +513,7 @@ test('includeFile replaces <include dynamic> with <panel>', async () => {
 test('renderFile converts markdown headers to <h1>', async () => {
   const markbinder = new MarkBind();
   const rootPath = path.resolve('');
+  const headerIdMap = {};
   const indexPath = path.resolve('index.md');
 
   const index = ['# Index'].join('\n');
@@ -528,6 +529,7 @@ test('renderFile converts markdown headers to <h1>', async () => {
   const result = await markbinder.renderFile(indexPath, {
     baseUrlMap,
     rootPath,
+    headerIdMap,
   });
 
   const expected = [
diff --git a/test/unit/parsers/componentParser.test.js b/test/unit/parsers/componentParser.test.js
new file mode 100644
index 0000000000..8ba8473357
--- /dev/null
+++ b/test/unit/parsers/componentParser.test.js
@@ -0,0 +1,95 @@
+const cheerio = require('cheerio');
+const htmlparser = require('htmlparser2');
+const componentParser = require('../../../src/lib/markbind/src/parsers/componentParser');
+const testData = require('../utils/componentParserData');
+
+/**
+ * Runs the parseComponent or postParseComponent method of componentParser on the provided
+ * template, verifying it with the expected result.
+ * @param template The html template, which should only have one root element
+ * @param expectedTemplate The expected result template
+ * @param postParse Boolean of whether to run postParseComponent instead of parseComponent.
+ *                  Defaults to false
+ */
+const parseAndVerifyTemplate = (template, expectedTemplate, postParse = false) => {
+  const handler = new htmlparser.DomHandler((error, dom) => {
+    expect(error).toBeFalsy();
+
+    if (postParse) {
+      dom.forEach(node => componentParser.postParseComponents(node));
+    } else {
+      dom.forEach(node => componentParser.parseComponents(node));
+    }
+    const result = cheerio.html(dom);
+
+    expect(result).toEqual(expectedTemplate);
+  });
+
+  const htmlParser = new htmlparser.Parser(handler, {
+    xmlMode: true,
+    decodeEntities: false,
+  });
+
+  htmlParser.parseComplete(template);
+};
+
+test('parseComponent parses panel attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_PANEL_ATTRIBUTES,
+                         testData.PARSE_PANEL_ATTRIBUTES_EXPECTED);
+  parseAndVerifyTemplate(testData.PARSE_PANEL_HEADER_NO_OVERRIDE,
+                         testData.PARSE_PANEL_HEADER_NO_OVERRIDE_EXPECTED);
+});
+
+test('parseComponent parses popover attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_POPOVER_ATTRIBUTES,
+                         testData.PARSE_POPOVER_ATTRIBUTES_EXPECTED);
+  parseAndVerifyTemplate(testData.PARSE_POPOVER_ATTRIBUTES_NO_OVERRIDE,
+                         testData.PARSE_POPOVER_ATTRIBUTES_NO_OVERRIDE_EXPECTED);
+
+  // todo remove these once 'title' for popover is fully deprecated
+  parseAndVerifyTemplate(testData.PARSE_POPOVER_TITLE,
+                         testData.PARSE_POPOVER_TITLE_EXPECTED);
+  parseAndVerifyTemplate(testData.PARSE_POPOVER_TITLE_NO_OVERRIDE,
+                         testData.PARSE_POPOVER_TITLE_NO_OVERRIDE_EXPECTED);
+});
+
+test('parseComponent parses tooltip attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_TOOLTIP_CONTENT,
+                         testData.PARSE_TOOLTIP_CONTENT_EXPECTED);
+});
+
+test('parseComponent parses modal attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_MODAL_HEADER,
+                         testData.PARSE_MODAL_HEADER_EXPECTED);
+
+  // todo remove these once 'title' for modals is fully deprecated
+  parseAndVerifyTemplate(testData.PARSE_MODAL_TITLE,
+                         testData.PARSE_MODAL_TITLE_EXPECTED);
+  parseAndVerifyTemplate(testData.PARSE_MODAL_TITLE_NO_OVERRIDE,
+                         testData.PARSE_MODAL_TITLE_NO_OVERRIDE_EXPECTED);
+
+  // todo remove these once 'modal-header' / 'modal-footer' for popover is fully deprecated
+  parseAndVerifyTemplate(testData.PARSE_MODAL_SLOTS_RENAMING,
+                         testData.PARSE_MODAL_SLOTS_RENAMING_EXPECTED);
+});
+
+test('parseComponent parses tab & tab-group attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_TAB_HEADER,
+                         testData.PARSE_TAB_HEADER_EXPECTED);
+  parseAndVerifyTemplate(testData.PARSE_TAB_GROUP_HEADER,
+                         testData.PARSE_TAB_GROUP_HEADER_EXPECTED);
+});
+
+test('parseComponent parses box attributes and inserts into dom as slots correctly', () => {
+  parseAndVerifyTemplate(testData.PARSE_BOX_ICON,
+                         testData.PARSE_BOX_ICON_EXPECTED);
+});
+
+test('postParseComponent assigns the correct header id to panels', () => {
+  parseAndVerifyTemplate(testData.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_ATTRIBUTE,
+                         testData.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_ATTRIBUTE_EXPECTED,
+                         true);
+  parseAndVerifyTemplate(testData.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_SLOT,
+                         testData.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_SLOT_EXPECTED,
+                         true);
+});
diff --git a/test/unit/utils/componentParserData.js b/test/unit/utils/componentParserData.js
new file mode 100644
index 0000000000..b17eb7912f
--- /dev/null
+++ b/test/unit/utils/componentParserData.js
@@ -0,0 +1,254 @@
+/* eslint-disable max-len */
+
+/*
+ * Panel
+ */
+
+module.exports.PARSE_PANEL_ATTRIBUTES = `
+<panel header="# Lorem ipsum" alt="_emphasized alt_">
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+module.exports.PARSE_PANEL_ATTRIBUTES_EXPECTED = `
+<panel><template slot="_header"><h1>Lorem ipsum</h1>
+</template><template slot="_alt"><p><em>emphasized alt</em></p>
+</template>
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+module.exports.PARSE_PANEL_HEADER_NO_OVERRIDE = `
+<panel header="# Lorem ipsum" alt="**strong alt**">
+  <div slot="header">
+    This existing header slot should be preserved in favour over header attribute.
+  </div>
+  Header attribute should not be inserted under panel since there is both an alt attribute and header slot,
+  but should be deleted.
+  Alt attribute should be inserted under panel as slot.
+</panel>
+`;
+
+module.exports.PARSE_PANEL_HEADER_NO_OVERRIDE_EXPECTED = `
+<panel><template slot="_alt"><p><strong>strong alt</strong></p>
+</template>
+  <div slot="header">
+    This existing header slot should be preserved in favour over header attribute.
+  </div>
+  Header attribute should not be inserted under panel since there is both an alt attribute and header slot,
+  but should be deleted.
+  Alt attribute should be inserted under panel as slot.
+</panel>
+`;
+
+// Post Parse
+module.exports.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_ATTRIBUTE = `
+<panel><template slot="_header"><h1 id="lorem-ipsum">Lorem ipsum</h1>
+</template>
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+module.exports.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_ATTRIBUTE_EXPECTED = `
+<panel id="lorem-ipsum"><template slot="_header"><h1 id="lorem-ipsum">Lorem ipsum</h1>
+</template>
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+module.exports.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_SLOT = `
+<panel><template slot="_header"><h1 id="attribute-header">Attribute Header</h1>
+</template>
+<template slot="header"><h1 id="slot-header">Slot Header</h1></template>
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+module.exports.POST_PARSE_PANEL_ID_ASSIGNED_USING_HEADER_SLOT_EXPECTED = `
+<panel id="slot-header"><template slot="_header"><h1 id="attribute-header">Attribute Header</h1>
+</template>
+<template slot="header"><h1 id="slot-header">Slot Header</h1></template>
+  Header and alt attributes should be parsed and inserted under panel as internal slots and deleted.
+</panel>
+`;
+
+/*
+ * Popovers
+ */
+
+module.exports.PARSE_POPOVER_ATTRIBUTES = `
+<popover content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus elit." 
+         header="**Lorem ipsum**">
+  Content and header attributes should be parsed and inserted under panel as slots and deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_ATTRIBUTES_EXPECTED = `
+<popover><template slot="header"><strong>Lorem ipsum</strong></template><template slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus elit.</template>
+  Content and header attributes should be parsed and inserted under panel as slots and deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_ATTRIBUTES_NO_OVERRIDE = `
+<popover content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus elit." 
+         header="_Lorem ipsum_">
+  <div slot="header">Some header slot content that should not be overwritten</div>
+  <div slot="content">Some content slot that should not be overwritten</div>
+  Content and header attributes should not be inserted under panel as slots, but should be deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_ATTRIBUTES_NO_OVERRIDE_EXPECTED = `
+<popover>
+  <div slot="header">Some header slot content that should not be overwritten</div>
+  <div slot="content">Some content slot that should not be overwritten</div>
+  Content and header attributes should not be inserted under panel as slots, but should be deleted.
+</popover>
+`;
+
+// todo remove tests for these once 'title' attribute is fully deprecated for popovers
+
+module.exports.PARSE_POPOVER_TITLE = `
+<popover title="**Lorem ipsum**">
+  Title attribute should be parsed and inserted under panel as header slot and deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_TITLE_EXPECTED = `
+<popover><template slot="header"><strong>Lorem ipsum</strong></template>
+  Title attribute should be parsed and inserted under panel as header slot and deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_TITLE_NO_OVERRIDE = `
+<popover title="**Title header**" header="**Header header**">
+  Title attribute should not be inserted as slot as header attribute is present, and should be deleted.
+</popover>
+`;
+
+module.exports.PARSE_POPOVER_TITLE_NO_OVERRIDE_EXPECTED = `
+<popover><template slot="header"><strong>Header header</strong></template>
+  Title attribute should not be inserted as slot as header attribute is present, and should be deleted.
+</popover>
+`;
+
+/*
+ * Tooltips
+ */
+
+module.exports.PARSE_TOOLTIP_CONTENT = `
+<tooltip content="Lorem ipsum dolor sit amet">
+  <button>Content attribute should be inserted as _content internal slot</button>
+</tooltip>
+`;
+
+module.exports.PARSE_TOOLTIP_CONTENT_EXPECTED = `
+<tooltip><template slot="_content">Lorem ipsum dolor sit amet</template>
+  <button>Content attribute should be inserted as _content internal slot</button>
+</tooltip>
+`;
+
+/*
+ * Modals
+ */
+
+module.exports.PARSE_MODAL_HEADER = `
+<modal header="_Lorem ipsum dolor sit amet_">
+  Header attribute should be inserted as internal _header slot.
+</modal>
+`;
+
+module.exports.PARSE_MODAL_HEADER_EXPECTED = `
+<modal><template slot="_header"><em>Lorem ipsum dolor sit amet</em></template>
+  Header attribute should be inserted as internal _header slot.
+</modal>
+`;
+
+// todo remove tests for these once 'title' attribute is fully deprecated for modals
+
+module.exports.PARSE_MODAL_TITLE = `
+<modal title="**Lorem ipsum dolor sit amet**">
+  Title attribute should be inserted as internal _header slot.
+</modal>
+`;
+
+module.exports.PARSE_MODAL_TITLE_EXPECTED = `
+<modal><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
+  Title attribute should be inserted as internal _header slot.
+</modal>
+`;
+
+module.exports.PARSE_MODAL_TITLE_NO_OVERRIDE = `
+<modal title="**Title header**" header="**Header header**">
+  Title attribute should not have priority over newer header attribute, and should be deleted.
+</modal>
+`;
+
+module.exports.PARSE_MODAL_TITLE_NO_OVERRIDE_EXPECTED = `
+<modal><template slot="_header"><strong>Header header</strong></template>
+  Title attribute should not have priority over newer header attribute, and should be deleted.
+</modal>
+`;
+
+// todo remove these once modal-header modal-footer slot names are deprecated fully.
+
+module.exports.PARSE_MODAL_SLOTS_RENAMING = `
+<modal>
+  <div slot="modal-header">Should be renamed to header</div>
+  <div slot="modal-footer">Should be renamed to footer</div>
+</modal>
+`;
+
+module.exports.PARSE_MODAL_SLOTS_RENAMING_EXPECTED = `
+<modal>
+  <div slot="header">Should be renamed to header</div>
+  <div slot="footer">Should be renamed to footer</div>
+</modal>
+`;
+
+
+/*
+ * Tab, tab-group
+ */
+
+module.exports.PARSE_TAB_HEADER = `
+<tab header="**Lorem ipsum dolor sit amet**">
+  Header attribute should be inserted as internal _header slot and deleted.
+</tab>
+`;
+
+module.exports.PARSE_TAB_HEADER_EXPECTED = `
+<tab><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
+  Header attribute should be inserted as internal _header slot and deleted.
+</tab>
+`;
+
+module.exports.PARSE_TAB_GROUP_HEADER = `
+<tab-group header="**Lorem ipsum dolor sit amet**">
+  Header attribute should be inserted as internal _header slot and deleted.
+</tab-group>
+`;
+
+module.exports.PARSE_TAB_GROUP_HEADER_EXPECTED = `
+<tab-group><template slot="_header"><strong>Lorem ipsum dolor sit amet</strong></template>
+  Header attribute should be inserted as internal _header slot and deleted.
+</tab-group>
+`;
+
+/*
+ * Boxes
+ */
+
+module.exports.PARSE_BOX_ICON = `
+<box icon=":rocket:">
+  Icon attribute should be inserted as internal _icon slot and deleted.
+</box>
+`;
+
+module.exports.PARSE_BOX_ICON_EXPECTED = `
+<box><template slot="_icon">🚀</template>
+  Icon attribute should be inserted as internal _icon slot and deleted.
+</box>
+`;
+
+/* eslint-enable max-len */