Merge pull request #156 from rackerlabs/docs-choice-tiles-grid-example

docs(choiceTiles): tile grid example

Author: CITguy

docs/components/choice-tiles/test.html

@@ -3,6 +3,82 @@
 ---
 {% extends 'test.njk' %}
 {% block content %}
+  <section>
+    <h2>Example Choice Tile Grid</h2>
+    <form>
+      <fieldset>
+        <div class="hxRow">
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="1" />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="server"></hx-icon>
+              </div>
+              <hx-tile-title>Servers</hx-tile-title>
+              <hx-tile-description>Servers description</hx-tile-description>
+            </hx-tile>
+          </label>
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="2" />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="technical-change"></hx-icon>
+              </div>
+              <hx-tile-title>Configurations</hx-tile-title>
+              <hx-tile-description>Configurations description</hx-tile-description>
+            </hx-tile>
+          </label>
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="3" />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="technical-incident"></hx-icon>
+              </div>
+              <hx-tile-title>Incidents</hx-tile-title>
+              <hx-tile-description>Incidents description</hx-tile-description>
+            </hx-tile>
+          </label>
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="4" />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="billing"></hx-icon>
+              </div>
+              <hx-tile-title>Billing</hx-tile-title>
+              <hx-tile-description>Billing description</hx-tile-description>
+            </hx-tile>
+          </label>
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="5" />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="account"></hx-icon>
+              </div>
+              <hx-tile-title>Account</hx-tile-title>
+              <hx-tile-description>Account description</hx-tile-description>
+            </hx-tile>
+          </label>
+          <label class="hxChoice hxCol hxSpan-4-xs">
+            <input type="radio" name="sample" value="6" disabled />
+            <hx-tile>
+              <hx-icon type="checkmark"></hx-icon>
+              <div class="hx-tile-icon">
+                <hx-icon type="minus-circle"></hx-icon>
+              </div>
+              <hx-tile-title>Disabled Tile</hx-tile-title>
+              <hx-tile-description>Disabled Tile description</hx-tile-description>
+            </hx-tile>
+          </label>
+        </div>
+      </fieldset>
+    </form>
+  </section>
+
   <section>
     <h2>Default</h2>
     <code>input + hx-tile</code>