Added examples for coloured cards & inverted cards.

examples/components/card.html

@@ -308,6 +308,139 @@
     </div>
   </div>
 </div>
-
+<div class="ui ten cards">
+  <div class="red card">
+    <div class="content">
+      Red card
+    </div>
+  </div>
+  <div class="orange card">
+    <div class="content">
+      Orange card
+    </div>
+  </div>
+  <div class="yellow card">
+    <div class="content">
+      Yellow card
+    </div>
+  </div>
+  <div class="olive card">
+    <div class="content">
+      Olive card
+    </div>
+  </div>
+  <div class="green card">
+    <div class="content">
+      Green card
+    </div>
+  </div>
+  <div class="teal card">
+    <div class="content">
+      Teal card
+    </div>
+  </div>
+  <div class="blue card">
+    <div class="content">
+      Blue card
+    </div>
+  </div>
+  <div class="violet card">
+    <div class="content">
+      Violet card
+    </div>
+  </div>
+  <div class="purple card">
+    <div class="content">
+      Purple card
+    </div>
+  </div>
+  <div class="pink card">
+    <div class="content">
+      Pink card
+    </div>
+  </div>
+  <div class="brown card">
+    <div class="content">
+      Brown card
+    </div>
+  </div>
+  <div class="grey card">
+    <div class="content">
+      Grey card
+    </div>
+  </div>
+  <div class="black card">
+    <div class="content">
+      Black card
+    </div>
+  </div>
+</div>
+<div class="ui ten inverted cards">
+  <div class="red card">
+    <div class="content">
+      Inverted (red) card
+    </div>
+  </div>
+  <div class="orange card">
+    <div class="content">
+      Inverted (orange) card
+    </div>
+  </div>
+  <div class="yellow card">
+    <div class="content">
+      Inverted (yellow) card
+    </div>
+  </div>
+  <div class="olive card">
+    <div class="content">
+      Inverted (olive) card
+    </div>
+  </div>
+  <div class="green card">
+    <div class="content">
+      Inverted (green) card
+    </div>
+  </div>
+  <div class="teal card">
+    <div class="content">
+      Inverted (teal) card
+    </div>
+  </div>
+  <div class="blue card">
+    <div class="content">
+      Inverted (blue) card
+    </div>
+  </div>
+  <div class="violet card">
+    <div class="content">
+      Inverted (violet) card
+    </div>
+  </div>
+  <div class="purple card">
+    <div class="content">
+      Inverted (purple) card
+    </div>
+  </div>
+  <div class="pink card">
+    <div class="content">
+      Inverted (pink) card
+    </div>
+  </div>
+  <div class="brown card">
+    <div class="content">
+      Inverted (brown) card
+    </div>
+  </div>
+  <div class="grey card">
+    <div class="content">
+      Inverted (grey) card
+    </div>
+  </div>
+  <div class="black card">
+    <div class="content">
+      Inverted (black) card
+    </div>
+  </div>
+</div>
 </body>
 </html>