diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js
index 07812007a3..241bcc26ea 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js
@@ -9,43 +9,23 @@ The sub header is sticky and will follow along down the page when scrolling.
 
 <h3>Markup example</h3>
 <pre>
-    <div ng-controller="Umbraco.Controller as vm">
+    <div ng-controller="MySection.Controller as vm">
 
-        <umb-editor-view>
+        <form name="mySectionForm" novalidate>
 
-            <umb-editor-container>
+            <umb-editor-view>
 
-                <umb-editor-sub-header>
+                <umb-editor-container>
 
-                    <umb-editor-sub-header-content-left>
+                    <umb-editor-sub-header>
+                        // sub header content here
+                    </umb-editor-sub-header>
 
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
+                </umb-editor-container>
 
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
+            </umb-editor-view>
 
-                    </umb-editor-sub-header-content-left>
-
-                    <umb-editor-sub-header-content-right>
-
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
-
-                        <umb-editor-sub-header-section>
-                            // content goes here
-                        </umb-editor-sub-header-section>
-
-                    </umb-editor-sub-header-content-right>
-
-                </umb-editor-sub-header>
-
-            </umb-editor-container>
-
-        </umb-editor-view>
+        </form>
 
     </div>
 </pre>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js
index 10a8d65e5c..97d2605d6a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js
@@ -7,7 +7,35 @@
 Use this directive to left align content in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-left>
+                            // left content here
+                        </umb-editor-sub-header-content-left>
+
+                        <umb-editor-sub-header-content-right>
+                            // right content here
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js
index d1f378514a..ce47db5d96 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js
@@ -7,7 +7,35 @@
 Use this directive to rigt align content in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-left>
+                            // left content here
+                        </umb-editor-sub-header-content-left>
+
+                        <umb-editor-sub-header-content-right>
+                            // right content here
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js
index d0253cbc6e..7243abeea2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js
@@ -7,7 +7,43 @@
 Use this directive to create sections, divided by borders, in a sub header in the main editor window.
 
 <h3>Markup example</h3>
-For examples see: {@link umbraco.directives.directive:umbEditorSubHeader umbEditorSubHeader}
+<pre>
+    <div ng-controller="MySection.Controller as vm">
+
+        <form name="mySectionForm" novalidate>
+
+            <umb-editor-view>
+
+                <umb-editor-container>
+
+                    <umb-editor-sub-header>
+
+                        <umb-editor-sub-header-content-right>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                            <umb-editor-sub-header-section>
+                                // section content here
+                            </umb-editor-sub-header-section>
+
+                        </umb-editor-sub-header-content-right>
+
+                    </umb-editor-sub-header>
+
+                </umb-editor-container>
+
+            </umb-editor-view>
+
+        </form>
+
+    </div>
+</pre>
 
 <h3>Use in combination with</h3>
 <ul>