diff --git a/docs/form.html b/docs/form.html
index fb6ff947d..4e54a0881 100755
--- a/docs/form.html
+++ b/docs/form.html
@@ -180,6 +180,9 @@
       </div>
       <div class="ui blue submit button">Submit</div>
     </div>
+    <div class="annotated">
+      <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
+    </div>
   </div>
   <h3>Types of Content</h3>
 
diff --git a/docs/javascript/semantic.js b/docs/javascript/semantic.js
index f9aaf8093..2d10bad83 100755
--- a/docs/javascript/semantic.js
+++ b/docs/javascript/semantic.js
@@ -42,12 +42,16 @@ semantic.ready = function() {
       var
         $example   = $(this).closest('.example'),
         $shape     = $example.find('.shape.module'),
-        $demo      = $example.children().slice(2).not('.annotated'),
+        $demo      = $example.children().slice(3).not('.annotated'),
         $annotated = $example.find('.annotated'),
         $code      = $annotated.find('.code'),
         whiteSpace = new RegExp('\\n\\s{4}', 'g'),
         code = ''
       ;
+      // if ui has wrapper use that
+      if($demo.filter('.ui').size() === 0) {
+        $demo = $example.children().eq(3).children();
+      }
       // add source if doesnt exist and initialize
       if($annotated.size() === 0) {
         $annotated = $('<div/>')