diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco
index 0f6892170..d89a234f9 100755
--- a/server/documents/modules/modal.html.eco
+++ b/server/documents/modules/modal.html.eco
@@ -122,6 +122,30 @@ type        : 'UI Module'
         .modal('show')
       ;
       </div>
+      <div class="code" data-label="true" data-type="html">
+        <div class="ui modal">
+          <i class="close icon"></i>
+          <div class="header">
+            Header
+          </div>
+          <div class="content">
+            <div class="left">
+              Some content to the left, usually an image or icon
+            </div>
+            <div class="right">
+              Some content to the right
+            </div>
+          </div>
+          <div class="actions">
+            <div class="ui button">
+              Cancel
+            </div>
+            <div class="ui button">
+              Okay
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="no example">
@@ -132,6 +156,9 @@ type        : 'UI Module'
         .modal('show')
       ;
       </div>
+      <div class="code" data-label="true" data-type="html">
+        <div class="ui basic modal"></div>
+      </div>
     </div>
 
     <h2 class="ui dividing header">Variations</h2>
@@ -144,16 +171,22 @@ type        : 'UI Module'
         .modal('show')
       ;
       </div>
+      <div class="code" data-label="true" data-type="html">
+        <div class="ui small modal"></div>
+      </div>
       <div class="code" data-demo="true">
       $('.large.modal')
         .modal('show')
       ;
       </div>
+      <div class="code" data-label="true" data-type="html">
+        <div class="ui large modal"></div>
+      </div>
     </div>
 
     <h2 class="ui dividing header">States</h2>
 
-    <div class="example">
+    <div class="no example">
       <h4 class="ui header">Active</h4>
       <p>An active modal is visible on the page</p>
       <div class="code" data-type="html">