swaps all docs to use ui headers instead of h1-h6

Former-commit-id: 96f03b01e7 Former-commit-id: b6671dc030
11 years ago · 64543560ff
5 changed files with 131 additions and 126 deletions
--- a/node/src/documents/collections/form.html
+++ b/node/src/documents/collections/form.html
@ -7,7 +7,7 @@ type   : 'UI Collection'
 ---
 <div class="segment">
  <div class="container">
-    <h1>Form</h1>
+    <h1 class="ui dividing header">Form</h1>
    <p>Forms are a grouping of elements requiring user input.</p>
    <p> 
      Forms always include fields, and fields always contain form elements. Fields themselves may also include:
@ -28,10 +28,10 @@ type   : 'UI Collection'
      <a class="item">Variations</a>
    </div>
  </div>
-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
    
  <div class="example">
-    <h4>Form:</h4>
+    <h4 class="ui header">Form:</h4>
    <p>A form is a collection of user input elements, and has no stylings of its own.</p>
    <div class="ui info message">
      <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
@ -67,10 +67,10 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>Elements</h2>
+  <h2 class="ui dividing header">Elements</h2>

  <div class="example">
-    <h4>Field</h4>
+    <h4 class="ui header">Field</h4>
    <p>A field is a form element containing a label and an input</p>
    <div class="ui form">
      <div class="field">
@ -81,7 +81,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Text Area</h4>
+    <h4 class="ui header">Text Area</h4>
    <p>A textarea uses the default form element</p>
    <div class="ui form">
      <div class="field">
@ -92,7 +92,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Checkbox</h4>
+    <h4 class="ui header">Checkbox</h4>
    <p>Checkboxes are styled forms of standard form checkboxes.</p>
    <div class="ui form">
      <div class="field">
@ -113,7 +113,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Radio Box</h4>
+    <h4 class="ui header">Radio Box</h4>
    <p>Radio boxes are styled forms of standard form radio controls.</p>
    <div class="ui form">
      <div class="inline field">
@ -155,7 +155,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Text Block</h4>
+    <h4 class="ui header">Text Block</h4>
    <p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
    <div class="ui form">
      <div class="ui message">
@ -168,12 +168,12 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>

-  <h3>Form</h3>
+  <h3 class="ui header">Form</h3>
  
  <div class="example">
-    <h4>Loading</h4>
+    <h4 class="ui header">Loading</h4>
    <p>If a form is in loading state, it will automatically show a loading indicator:</p>
    
    <div class="ui loading form segment">
@ -207,7 +207,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
    <p>If a form is in an error state, it will automatically show any error message blocks:</p>
    <div class="ui error form segment">
      <div class="ui error message">
@ -244,7 +244,7 @@ type   : 'UI Collection'
  </div>
    
  <div class="example">
-    <h4>Warning</h4>
+    <h4 class="ui header">Warning</h4>
    <p>If a form is in warning state, it will automatically show any warning message block:</p>
    
    <div class="ui warning form segment">
@ -284,10 +284,10 @@ type   : 'UI Collection'
    </div>
  </div>
  
-  <h3>Form Fields</h3>
+  <h3 class="ui header">Form Fields</h3>
  
  <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
    <p>Individual fields may contain an error state</p>
    
    <div class="ui form segment">
@ -305,7 +305,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
    <p>Individual fields may be disabled or read only</p>
    
    <div class="ui form segment">
@ -322,12 +322,12 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
  
-  <h3>Forms</h3>
+  <h3 class="ui header">Forms</h3>

  <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
    <p>A form can take the width of its container</p>
    <div class="ui fluid form segment">
      <div class="two fields">
@ -345,7 +345,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
    <p>A form can also be small or large</p>
    <div class="ui small form segment">
      <div class="two fields">
@ -377,7 +377,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
    <p>A form on a dark background may have to invert its color scheme</p>
    
    <div style="background-color: #333333; padding: 15px;">
@ -405,10 +405,10 @@ type   : 'UI Collection'
  </div>
  
  
-  <h3>Fields</h3>
+  <h3 class="ui header">Fields</h3>
  
  <div class="example">
-    <h4>Inline</h4>
+    <h4 class="ui header">Inline</h4>
    <p>A field can have its label next to instead of above it.</p>
    <div class="ui form">
      <div class="ui inline fields">
@ -421,7 +421,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Date</h4>
+    <h4 class="ui header">Date</h4>
    <p>A field can let users know they are for dates</p>
    <div class="ui form">
      <div class="date field">
@ -432,10 +432,10 @@ type   : 'UI Collection'
  </div>
  
  
-  <h2>Groups</h2>
+  <h2 class="ui dividing header">Groups</h2>
  
  <div class="example">
-    <h4>Field Groups</h4>
+    <h4 class="ui header">Field Groups</h4>
    <p>Fields can exist side by side to show relation</p>
    <div class="ui form">
      <div class="ui three fields">
@ -456,7 +456,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Inline</h4>
+    <h4 class="ui header">Inline</h4>
    <p>Multiple fields may be inline in a row</p>
    <div class="ui form">
      <div class="ui two inline fields">
--- a/node/src/documents/collections/grid.html
+++ b/node/src/documents/collections/grid.html
@ -9,7 +9,7 @@ type   : 'UI Collection'
 <div class="segment">
  <div class="ui main responsive grid">
    <div class="column">
-      <h1>Grid</h1>
+      <h1 class="ui dividing header">Grid</h1>
      <p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
    </div>
  </div>
@ -17,10 +17,10 @@ type   : 'UI Collection'
 <div class="main responsive ui grid">
 <div class="column">
  
-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
  
  <div class="highlighted example">
-    <h4>Grid</h4>
+    <h4 class="ui header">Grid</h4>
    <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
    <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
    
@ -93,7 +93,7 @@ type   : 'UI Collection'
  

  <div class="highlighted example">
-    <h4>Page Grid</h4>
+    <h4 class="ui header">Page Grid</h4>
    <p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p>
    
    <div class="ui two column page grid">
@ -123,7 +123,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="highlighted example">
-    <h4>Rows</h4>
+    <h4 class="ui header">Rows</h4>
    <p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p>
    <p>
    <div class="ui grid">
@ -254,7 +254,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="highlighted example">
-    <h4>Columns</h4>
+    <h4 class="ui header">Columns</h4>
    <p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p>
    <p>A grid will automatically center any columns that do not match a full row width.</p>
    <div class="ui three column grid">
@ -281,12 +281,12 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
  
-  <h3>Grid</h3>
+  <h3 class="ui header">Grid</h3>
  
  <div class="example">
-    <h4>Responsive Grid</h4>
+    <h4 class="ui header">Responsive Grid</h4>
    <p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>

    <div class="ui text message info ignore">
@ -321,7 +321,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Changing grid column count</h4>
+    <h4 class="ui header">Changing grid column count</h4>
    <p>A grid can have a different number of columns per row</p>
    <div class="ui three column grid">
      <div class="column">
@ -395,7 +395,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Divided</h4>
+    <h4 class="ui header">Divided</h4>
    <p>A grid can show a division between its columns</p>
    <div class="ui six divided column grid">
      <div class="row">
@ -445,7 +445,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Celled</h4>
+    <h4 class="ui header">Celled</h4>
    <p>A grid can have rows divided into cells</p>
    <div class="ui celled grid">
      <div class="row">
@ -480,7 +480,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Text Alignment</h4>
+    <h4 class="ui header">Text Alignment</h4>
    <p>A grid can specify its text alignment</p>
    <div class="ui center aligned three column grid">
      <div class="row">
@ -516,7 +516,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Vertical Alignment</h4>
+    <h4 class="ui header">Vertical Alignment</h4>
    <p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
    <div class="ui middle aligned three column grid">
      <div class="row">
@ -551,9 +551,9 @@ type   : 'UI Collection'
    </div>
  </div>
  
-  <h3>Rows</h3>
+  <h3 class="ui header">Rows</h3>
  <div class="example">
-    <h4>Vertical Alignment</h4>
+    <h4 class="ui header">Vertical Alignment</h4>
    <p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
    <div class="ui three column grid">
      <div class="top aligned row">
@ -646,10 +646,10 @@ type   : 'UI Collection'
    </div>
  </div>
  
-  <h3>Columns</h3>
+  <h3 class="ui header">Columns</h3>
  
  <div class="example">
-    <h4>Row Alignment (Floating)</h4>
+    <h4 class="ui header">Row Alignment (Floating)</h4>
    <p>A column can be"floated", to either the left or right of its row.</p>
    <div class="ui grid">
      <div class="left floated four wide column">
@ -681,7 +681,7 @@ type   : 'UI Collection'
    </div>
  
  <div class="example">
-    <h4>Column Width</h4>
+    <h4 class="ui header">Column Width</h4>
    <p>A column can span across multiple grid columns.</p>
    <div class="ui grid">
      <div class="three wide column">
--- a/node/src/documents/collections/menu.html
+++ b/node/src/documents/collections/menu.html
@ -7,7 +7,7 @@ type   : 'UI Collection'
 ---
 <div class="segment">
  <div class="container">
-    <h1>Menu</h1>
+    <h1 class="ui dividing header">Menu</h1>
    <p>A menu is a collection of interface elements usually showing several actions which a user can take</p>
  </div>
 </div>
@ -22,9 +22,9 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>Collection</h2>
+  <h2 class="ui dividing header">Collection</h2>
  <div class="example">
-    <h4>Menu</h4>
+    <h4 class="ui header">Menu</h4>

    <p>This example uses several menu elements to display the versatility of a menu collection.</p>
    <div class="ui menu">
@ -34,7 +34,7 @@ type   : 'UI Collection'
      </a>
      <a class="item">
        <i class="icon mail"></i> Messages
-        <div class="left ui label">22</div>
+        <div class="ui label">22</div>
      </a>
      <div class="right menu">
        <div class="fitted borderless item">
@ -54,13 +54,13 @@ type   : 'UI Collection'
  

  <div class="example">
-    <h4>Vertical Menu</h4>
+    <h4 class="ui header">Vertical Menu</h4>
    <p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p>
    <div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
    <div class="ui vertical menu">
      <div class="item">
        <i class="icon user"></i>
-        <b>Username</b>
+        <b>Zombo_213</b>
      </div>
      <div class="item">
        <p>Welcome to your profile. You can do anything you want on your profile.</p>
@ -68,23 +68,28 @@ type   : 'UI Collection'
      <div class="item">
        <b>My Profile</b>
        <div class="menu">
-          <a class="active item"><i class="icon mail"></i>Messages 
-            <div class="ui teal label">2 new
-            </div>
+          <a class="active item">
+            Messages 
+            <div class="ui teal label">2 new</div>
          </a>
          <div class="item">
-            <i class="icon users"></i>Friends 
+            Friends 
+            <i class="icon users"></i>
            <div class="menu">
              <a class="item">Close Friends</a>
              <a class="item">School</a>
              <a class="item">Work</a>
            </div>
          </div>
-          <a class="item"><i class="icon bookmark"></i>Followers</a>
+          <a class="item">
+            Followers
+            <i class="icon bookmark"></i>
+          </a>
        </div>
      </div>
      <div class="dropdown item">
-        Actions <i class="icon right triangle"></i>
+        Actions 
+        <i class="icon right triangle"></i>
        <div class="menu">
          <div class="item">Search</div>
          <div class="item">Add</div>
@ -95,7 +100,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Tiered Menu</h4>
+    <h4 class="ui header">Tiered Menu</h4>

    <p>This example uses several menu elements to display the versatility of a menu collection.</p>
    <div class="ui tiered menu">
@ -130,10 +135,10 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h2>Elements</h2>
+  <h2 class="ui dividing header">Elements</h2>

  <div class="example">
-    <h4>Header Item</h4>
+    <h4 class="ui header">Header Item</h4>
    <p>A menu may have a header to help label sections of a menu. This can also be a <a href="/elements/header.html">ui header</a>.</p>
    <div class="ui vertical menu">
      <div class="header item">
@ -159,7 +164,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Text Item</h4>
+    <h4 class="ui header">Text Item</h4>
    <p>A menu may have a simple text item.</p>
    <div class="ui ignore info message">
      <p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p>
@ -176,7 +181,7 @@ type   : 'UI Collection'
  
  
  <div class="example">
-    <h4>Link Item</h4>
+    <h4 class="ui header">Link Item</h4>
    <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
    
    <div class="ui ignore info message">
@ -193,7 +198,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Dropdown Item</h4>
+    <h4 class="ui header">Dropdown Item</h4>
    <p>An item may contain a nested menu in a dropdown.</p>
    <div class="ui ignore warning message">
      <p><i class="icon heart"></i>  A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
@ -211,7 +216,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Menu</h4>
+    <h4 class="ui header">Menu</h4>
    <p>A menu may contain another menu group in the same level as menu items.</p>
    <div class="ui menu">
      <a class="item">Browse</a>
@ -224,7 +229,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Nested Menu</h4>
+    <h4 class="ui header">Nested Menu</h4>
    <p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p>
    <div class="ui vertical menu">
      <a class="item"><b>Friends</b></a>
@ -240,10 +245,10 @@ type   : 'UI Collection'
  </div>


-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>

  <div class="example">
-    <h4>Hover</h4>
+    <h4 class="ui header">Hover</h4>
    <p>A menu item can be hovered</p>
    <div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div>
    <div class="ui compact menu">
@ -255,7 +260,7 @@ type   : 'UI Collection'


  <div class="example">
-    <h4>Down</h4>
+    <h4 class="ui header">Down</h4>
    <p>A menu item can be pressed in</p>
    <div class="ui compact menu">
      <div class="down item">
@ -265,7 +270,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Active</h4>
+    <h4 class="ui header">Active</h4>
    <p>A menu item can be active</p>
    <div class="ui compact menu">
      <div class="active item">
@ -275,11 +280,11 @@ type   : 'UI Collection'
  </div>


-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>

-  <h3>Menu</h3>
+  <h3 class="ui header">Menu</h3>
  <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
    <p>A menu may have its colors inverted to show greater contrast</p>
    <div class="ui inverted menu">
      <div class="item">
@ -301,7 +306,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
    <p>Additional colors can be specified.</p>
    <div class="ui green menu">
      <a class="active item">
@ -421,7 +426,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Basic</h4>
+    <h4 class="ui header">Basic</h4>
    <p>A menu may reduce its complexity to blend in with a page</p>
    <div class="ui segment">
      <div class="ui basic menu">
@ -452,7 +457,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Text</h4>
+    <h4 class="ui header">Text</h4>
    <p>A menu can display simple text links</p>
    <div class="ui segment">
      <div class="ui text menu">
@ -487,7 +492,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
    <p>Additional colors can be specified</p>
    <div class="ui grey compact menu">
      <a class="item">
@ -549,7 +554,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Icons</h4>
+    <h4 class="ui header">Icons</h4>
    <p>A menu may have just icons</p>
    <div class="ui icon menu">
      <a class="item">
@ -577,7 +582,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Icons</h4>
+    <h4 class="ui header">Icons</h4>
    <p>A menu may have labeled icons</p>
    <div class="ui labeled icon menu">
      <a class="item">
@ -612,7 +617,7 @@ type   : 'UI Collection'


  <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
    <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
    <div class="ui fluid vertical menu">
      <a class="item">Run</a>
@ -622,7 +627,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Evenly sized items</h4>
+    <h4 class="ui header">Evenly sized items</h4>
    <p>A menu may divide its items evenly</p>
    <div class="ui fluid three item menu">
      <a class="item">Buy</a>
@ -632,7 +637,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Pointing</h4>
+    <h4 class="ui header">Pointing</h4>
    <p>A menu can point to content below itself to show ownership</p>
    <div class="ui pointing menu">
      <div class="item">
@ -683,7 +688,7 @@ type   : 'UI Collection'


  <div class="example">
-    <h4>Attached</h4>
+    <h4 class="ui header">Attached</h4>
    <p>A menu may be attached to other content segments</p>
    <div class="ui top attached pointing menu">
      <div class="item">
@ -709,7 +714,7 @@ type   : 'UI Collection'
  </div>

  <div class="example">
-    <h4>Horizontal Sizes</h4>
+    <h4 class="ui header">Horizontal Sizes</h4>
    <p>A horizontal menu can vary in size</p>
    <div class="ui large menu">
      <div class="item">
@ -741,7 +746,7 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Vertical Sizes</h4>
+    <h4 class="ui header">Vertical Sizes</h4>
    <p>A vertical menu can vary in size</p>
    <div class="ui large vertical menu">
      <div class="item">
@ -794,10 +799,10 @@ type   : 'UI Collection'
    </div>
  </div>

-  <h3>Items</h3>
+  <h3 class="ui header">Items</h3>

  <div class="example">
-    <h4>Fitted</h4>
+    <h4 class="ui header">Fitted</h4>
    <p>A menu item or menu might be fitted to remove element padding</p>
    <div class="ui menu">
      <div class="fitted item">
@ -811,11 +816,11 @@ type   : 'UI Collection'


  <div class="example">
-    <h4>Borderless</h4>
+    <h4 class="ui header">Borderless</h4>
    <p>A menu item or menu might might have no dividers</p>
    <div class="ui borderless menu">
      <div class="item">
-        <i class="icon left-open"></i> Previous
+        <i class="icon left arrow"></i> Previous
      </div>
      <div class="item">1</div>
      <div class="item">2</div>
@ -824,7 +829,7 @@ type   : 'UI Collection'
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">
-        <i class="icon right-open"></i> Next
+        Next <i class="icon right arrow"></i>
      </div>
    </div>
  </div>
--- a/node/src/documents/collections/message.html
+++ b/node/src/documents/collections/message.html
@ -8,7 +8,7 @@ type   : 'UI Collection'

 <div class="segment">
  <div class="container">
-    <h1>Message</h1>
+    <h1 class="ui dividing header">Message</h1>
    <p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p>
  </div>
 </div>
@ -23,10 +23,10 @@ type   : 'UI Collection'
    </div>
  </div>
  
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
  
  <div class="example">
-    <h4>Text Block</h4>
+    <h4 class="ui header">Text Block</h4>
    <p>A basic text block</p>
    <div class="ui message">
      <div class="header">
@ -42,7 +42,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>List Block</h4>
+    <h4 class="ui header">List Block</h4>
    <p>A text block with a list</p>
    <div class="ui message">
      <div class="header">
@ -57,7 +57,7 @@ type   : 'UI Collection'
  
  
  <div class="example">
-    <h4>Dismissable Block</h4>
+    <h4 class="ui header">Dismissable Block</h4>
    <p>A text block that the user can choose to hide</p>
    <div class="ui message">
      <i class="icon close"></i>
@ -72,26 +72,26 @@ type   : 'UI Collection'
  </div>
  

-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
  
-  <h4>Hidden</h4>
+  <h4 class="ui header">Hidden</h4>
  <p>Text Blocks can be hidden</p>
  <div class="ui hidden message">
    <p>You can't see me</p>
  </div>
  
  <div class="example">
-    <h4>Visible</h4>
+    <h4 class="ui header">Visible</h4>
    <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
    <div class="ui visible message">
      <p>You can always see me</p>
    </div>
  </div>
  
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
  
  <div class="example">
-    <h4>Icon Block</h4>
+    <h4 class="ui header">Icon Block</h4>
    <p>A text block can contain an icon.</p>
    <div class="ui icon message">
      <i class="icon cloud"></i>
@ -105,7 +105,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Compact Block</h4>
+    <h4 class="ui header">Compact Block</h4>
    <p>A text block that only takes up the width of its content.</p>
    <div class="ui compact message">
      Get all the best inventions in your e-mail every day. Sign up now!
@ -113,7 +113,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Attached Block</h4>
+    <h4 class="ui header">Attached Block</h4>
    <p>A text block can be formatted to attach itself to content</p>
    <div class="ui attached message">
      <div class="header">
@ -157,14 +157,14 @@ type   : 'UI Collection'
    </div>
  </div>
  <div class="example">
-    <h4>Colored Block</h4>
+    <h4 class="ui header">Colored Block</h4>
    <p>A text block can be formatted to be different colors</p>
    
  </div>
  
  
  <div class="example">
-    <h4>Warning Block</h4>
+    <h4 class="ui header">Warning Block</h4>
    <p>A text block may be formatted to display warning messages.</p>
    <div class="ui warning message">
      <i class="icon close"></i>
@ -176,7 +176,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Info Block</h4>
+    <h4 class="ui header">Info Block</h4>
    <p>A text block may be formatted to display information.</p>
    <div class="ui info message">
      <i class="icon close"></i>
@ -191,7 +191,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Success Block</h4>
+    <h4 class="ui header">Success Block</h4>
    <p>A text block may be formatted to display a success message.</p>
    <div class="ui success message">
      <i class="icon close"></i>
@ -202,7 +202,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Error Block</h4>
+    <h4 class="ui header">Error Block</h4>
    <p>A text block may be formatted to display errors.</p>
    <div class="ui error message">
      <i class="icon close"></i>
@ -217,7 +217,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Sizes</h4>
+    <h4 class="ui header">Sizes</h4>
    <p>A text block can have different sizes</p>
    <div class="ui small message">
      This is a very small message.
--- a/node/src/documents/collections/table.html
+++ b/node/src/documents/collections/table.html
@ -8,7 +8,7 @@ type   : 'UI Collection'

 <div class="segment">
  <div class="container">
-    <h1>Tables</h1>
+    <h1 class="ui dividing header">Tables</h1>
    <p>Tables are useful for displaying collections of tuples.</p>
    <p> 
      Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text.
@ -26,9 +26,9 @@ type   : 'UI Collection'
    </div>
  </div>
  
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
  <div class="example">
-    <h4>Table</h4>
+    <h4 class="ui header">Table</h4>
    <p>A standard table</p>
    <table class="ui table">
      <thead>
@ -62,10 +62,10 @@ type   : 'UI Collection'
  </div>
  

-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
  
  <div class="example">
-    <h4>Positive / Negative</h4>
+    <h4 class="ui header">Positive / Negative</h4>
    <p>A cell may let a user know whether a value is good or bad:</p>
    <table class="ui table">
      <thead>
@ -98,9 +98,9 @@ type   : 'UI Collection'
    </table>
  </div>
  
-  <h3>Cells</h3>
+  <h3 class="ui header">Cells</h3>
  <div class="example">
-    <h4>Error</h4>
+    <h4 class="ui header">Error</h4>
    <p>A cell or row may alert the user to an error or a negative value:</p>
    <table class="ui table">
      <thead>
@ -134,7 +134,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Warning</h4>
+    <h4 class="ui header">Warning</h4>
    <p>A cell or row may warn a user:</p>
    <table class="ui table">
      <thead>
@ -168,7 +168,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Active</h4>
+    <h4 class="ui header">Active</h4>
    <p>A cell or row can be active:</p>
    <table class="ui table">
      <thead>
@ -200,7 +200,7 @@ type   : 'UI Collection'
      </tbody>
    </table>
  <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
    <p>A cell can be disabled:</p>
    <table class="ui table">
      <thead>
@ -234,10 +234,10 @@ type   : 'UI Collection'
    
  </div>

-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
  
  <div class="example">
-    <h4>Collapsing</h4>
+    <h4 class="ui header">Collapsing</h4>
    <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
    <table class="ui table collapsing">
      <thead>
@ -271,7 +271,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Cells</h4>
+    <h4 class="ui header">Cells</h4>
    <p>A table may be divided each row into separate cells</p>
    <table class="ui celled table">
      <thead>
@ -305,7 +305,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Sortable</h4>
+    <h4 class="ui header">Sortable</h4>
    <p>A table may allow a user to sort contents by clicking on a table header.</p>
    
    <p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p>
@ -341,7 +341,7 @@ type   : 'UI Collection'
    </table>
  </div>
  <div class="example">
-    <h4>Padded</h4>
+    <h4 class="ui header">Padded</h4>
    <p>A table may sometimes need to be more padded for legibility</p>
    <table class="ui padded table">
      <thead>
@ -364,7 +364,7 @@ type   : 'UI Collection'
    </table>
  </div>
  <div class="example">
-    <h4>Compact</h4>
+    <h4 class="ui header">Compact</h4>
    <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
    <table class="ui compact table">
      <thead>
@ -418,7 +418,7 @@ type   : 'UI Collection'
  </div>
  
  <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
    <p>A table can also be small or large</p>
    <table class="ui small table">
      <thead>