Complete card theme, add basic view

build/less/definitions/collections/message.less

@@ -18,7 +18,6 @@
 @import '../../semantic.config';
 
 
-
 /*******************************
             Message
 *******************************/
@@ -195,9 +194,7 @@
   vertical-align: @iconVerticalAlign;
   font-size: @iconSize;
   opacity: @iconOpacity;
-}
-.ui.icon.message > .icon + .content {
-  padding-left: @iconContentDistance;
+  padding-right: @iconContentDistance;
 }
 .ui.icon.message > .content {
   display: table-cell;

build/less/definitions/elements/button.less

@@ -505,25 +505,10 @@
 ---------------*/
 
 .ui.button > .icon {
-  margin-right: @iconDistance;
-
-  line-height: 1;
-
-  -webkit-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -moz-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -o-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  -ms-transition:
-    opacity 0.1s @transitionEasing
-  ;
-  transition:
-    opacity 0.1s @transitionEasing
-  ;
+  opacity: @iconOpacity;
+  margin: @iconMargin;
+  transition: @iconTransition;
+  vertical-align: @iconVerticalAlign;
 }
 
 /*******************************

build/less/definitions/views/card.less

@@ -0,0 +1,556 @@
+ /*
+ * # Semantic - Item
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'card';
+
+@import '../../semantic.config';
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+      Items
+---------------*/
+
+.ui.cards,
+.ui.card {
+  margin: @groupMargin;
+}
+.ui.cards:first-child
+.ui.card:first-child {
+  margin-top: 0em;
+}
+.ui.cards:last-child,
+.ui.card:last-child {
+  margin-bottom: 0em;
+}
+
+.ui.cards > .row > .card,
+.ui.cards > .card {
+  display: @groupDisplay;
+  float: @groupFloat;
+}
+
+/* Clearing */
+.ui.cards:after,
+.ui.card:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+
+/*--------------
+      Item
+---------------*/
+
+.ui.cards > .row > .card,
+.ui.cards > .card,
+.ui.card {
+  position: relative;
+  display: @display;
+
+  width: @width;
+  min-height: @minHeight;
+  margin: @margin;
+
+  background: @background;
+  padding: @padding;
+
+  border: @border;
+  border-radius: @borderRadius;
+  box-shadow: @boxShadow;
+  transition: @transition;
+  z-index: @zIndex;
+}
+
+.ui.cards > .row > .card > :first-child,
+.ui.cards > .card > :first-child,
+.ui.card > :first-child {
+  border-radius: @borderRadius @borderRadius 0em 0em !important;
+}
+
+.ui.cards > .row > .card > :last-child,
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0em 0em @borderRadius @borderRadius !important;
+}
+
+
+.ui.cards a.card,
+.ui.cards .card a,
+.ui.card a,
+a.ui.cards {
+  cursor: pointer;
+}
+
+
+/*--------------
+     Images
+---------------*/
+
+.ui.cards .card > .image,
+.ui.card > .image {
+  display: block;
+  position: relative;
+  padding: @imagePadding;
+  background: @imageBackground;
+}
+.ui.cards .card > .image > img,
+.ui.card > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: @imageBorderRadius;
+}
+
+.ui.cards .card > .image:only-child > img,
+.ui.card > .image:only-child > img {
+  border-radius: @borderRadius;
+}
+
+
+/*--------------
+     Floated
+---------------*/
+
+.ui.cards .card  .left.floated,
+.ui.card .left.floated {
+  float: left;
+}
+.ui.cards .card .right.floated,
+.ui.card .right.floated {
+  float: right;
+}
+
+
+
+/*--------------
+     Content
+---------------*/
+
+.ui.cards .card > .content,
+.ui.card > .content {
+  background: @contentBackground;
+  margin: @contentMargin;
+  padding: @contentPadding;
+  box-shadow: @contentBoxShadow;
+  font-size: @contentFontSize;
+  border: @contentBorder;
+  border-radius: @contentBorderRadius;
+}
+
+.ui.cards .card > .content:after,
+.ui.card > .content:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.ui.cards .card > .content > .header,
+.ui.card > .content > .header {
+  display: block;
+  margin: @headerMargin;
+  font-family: @headerFont;
+  font-weight: @headerFontWeight;
+  font-size: @headerFontSize;
+  color: @headerColor;
+}
+.ui.cards .card > .content > .meta + .description,
+.ui.cards .card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.card > .content > .header + .description  {
+  margin-top: @descriptionDistance;
+}
+
+/*--------------
+     Image
+---------------*/
+
+.ui.cards .card .content img,
+.ui.card .content img {
+  display: inline-block;
+  vertical-align: @contentImageVerticalAlign;
+  width: @contentImageWidth;
+}
+.ui.cards .card img.avatar,
+.ui.cards .card .avatar img,
+.ui.card img.avatar,
+.ui.card .avatar img {
+  width: @avatarSize;
+  height: @avatarSize;
+  border-radius: @avatarBorderRadius;
+}
+
+
+/*--------------
+   Description
+---------------*/
+
+.ui.cards .card > .content > .description,
+.ui.card > .content > .description {
+  clear: both;
+  color: @descriptionColor;
+}
+
+/*--------------
+    Paragraph
+---------------*/
+
+.ui.cards .card > .content p,
+.ui.card > .content p {
+  margin: 0em 0em @paragraphDistance;
+}
+.ui.cards .card > .content p:last-child,
+.ui.card > .content p:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.cards .card .meta,
+.ui.card .meta {
+  font-size: @metaFontSize;
+  color: @metaColor;
+}
+.ui.cards .card .meta *,
+.ui.card .meta * {
+  margin-right: @metaSpacing;
+}
+.ui.cards .card .meta :last-child,
+.ui.card .meta :last-child {
+  margin-right: 0em;
+}
+
+.ui.cards .card .meta .right.floated,
+.ui.card .meta .right.floated {
+  margin-right: 0em;
+  margin-left: @metaSpacing;
+}
+
+/*--------------
+      Links
+---------------*/
+
+/* Generic */
+.ui.cards .card > .content a,
+.ui.card > .content a {
+  color: @contentLinkColor;
+}
+.ui.cards .card > .content a:hover,
+.ui.card > .content a:hover {
+  color: @contentLinkHoverColor;
+}
+
+/* Header */
+.ui.cards .card > .content > a.header,
+.ui.card > .content > a.header {
+  color: @headerLinkColor;
+}
+.ui.cards .card > .content > a.header:hover,
+.ui.card > .content > a.header:hover {
+  color: @headerLinkHoverColor;
+}
+
+/* Meta */
+.ui.cards .card .meta a,
+.ui.card .meta a {
+  color: @metaLinkColor;
+}
+.ui.cards .card .meta a:hover,
+.ui.card .meta a:hover {
+  color: @metaLinkHoverColor;
+}
+
+
+
+/*--------------
+     Labels
+---------------*/
+
+/*-----Star----- */
+
+/* Icon */
+.ui.cards .card > .content .star.icon,
+.ui.card > .content .star.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.cards .card > .content .star.icon:hover,
+.ui.card > .content .star.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @starColor;
+}
+.ui.cards .card > .content .active.star.icon,
+.ui.card > .content .active.star.icon {
+  color: @starActiveColor;
+}
+
+/*-----Like----- */
+
+/* Icon */
+.ui.cards .card > .content .like.icon,
+.ui.card > .content .like.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.cards .card > .content .like.icon:hover,
+.ui.card > .content .like.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @likeColor;
+}
+.ui.cards .card > .content .active.like.icon,
+.ui.card > .content .active.like.icon {
+  color: @likeActiveColor;
+}
+
+/*----------------
+  Extra Content
+-----------------*/
+
+.ui.cards .card .extra,
+.ui.card .extra {
+  position: @extraDisplay;
+  background: @extraBackground;
+  width: @extraWidth;
+  padding: @extraPadding;
+  top: @extraTop;
+  left: @extraLeft;
+  color: @extraColor;
+  box-shadow: @extraBoxShadow;
+  transition: @extraTransition;
+  border-top: @extraDivider;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+/*-------------------
+        Link
+--------------------*/
+
+.ui.link.cards .card:hover,
+.ui.link.card:hover {
+  cursor: pointer;
+  z-index: @linkHoverZIndex;
+  background: @linkHoverBackground;
+  border: @linkHoverBorder;
+  box-shadow: @linkHoverBoxShadow;
+}
+
+/*-------------------
+      Responsive
+--------------------*/
+
+@media only screen and (max-width : 768px) {
+  .ui.stackable.cards {
+    display: block !important;
+  }
+  .ui.stackable.cards > .card,
+  .ui.stackable.cards > .row > .card {
+    display: block !important;
+    height: auto !important;
+    width: auto !important;
+    padding: 0% !important;
+  }
+}
+
+/*--------------
+    Item Count
+---------------*/
+
+
+.ui.one.cards {
+  margin-left: -2%;
+  margin-right: -2%;
+}
+.ui.one.cards > .card {
+  width: 100%;
+  margin-left: 2%;
+  margin-right: 2%;
+}
+
+.ui.two.cards {
+  margin-left: -1%;
+  margin-right: -1%;
+}
+.ui.two.cards > .card {
+  width: 48%;
+  margin-left: 1%;
+  margin-right: 1%;
+}
+.ui.two.cards > .card:nth-child(2n+1) {
+  clear: left;
+}
+
+.ui.three.cards {
+  margin-left: -1%;
+  margin-right: -1%;
+}
+.ui.three.cards > .card {
+  width: 31.333%;
+  margin-left: 1%;
+  margin-right: 1%;
+}
+.ui.three.cards > .card:nth-child(3n+1) {
+  clear: left;
+}
+
+.ui.four.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.four.cards > .card {
+  width: 24%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.four.cards > .card:nth-child(4n+1) {
+  clear: left;
+}
+
+.ui.five.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.five.cards > .card {
+  width: 19%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.five.cards > .card:nth-child(5n+1) {
+  clear: left;
+}
+
+.ui.six.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.six.cards > .card {
+  width: 15.66%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.six.cards > .card:nth-child(6n+1) {
+  clear: left;
+}
+
+.ui.seven.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.seven.cards > .card {
+  width: 13.28%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+  font-size: 11px;
+}
+.ui.seven.cards > .card:nth-child(7n+1) {
+  clear: left;
+}
+
+.ui.eight.cards {
+  margin-left: -0.25%;
+  margin-right: -0.25%;
+}
+.ui.eight.cards > .card {
+  width: 12.0%;
+  margin-left: 0.25%;
+  margin-right: 0.25%;
+  font-size: 11px;
+}
+.ui.eight.cards > .card:nth-child(8n+1) {
+  clear: left;
+}
+
+.ui.nine.cards {
+  margin-left: -0.25%;
+  margin-right: -0.25%;
+}
+.ui.nine.cards > .card {
+  width: 10.61%;
+  margin-left: 0.25%;
+  margin-right: 0.25%;
+  font-size: 10px;
+}
+.ui.nine.cards > .card:nth-child(9n+1) {
+  clear: left;
+}
+
+.ui.ten.cards {
+  margin-left: -0.2%;
+  margin-right: -0.2%;
+}
+.ui.ten.cards > .card {
+  width: 9.6%;
+  margin-left: 0.2%;
+  margin-right: 0.2%;
+  font-size: 10px;
+}
+.ui.ten.cards > .card:nth-child(10n+1) {
+  clear: left;
+}
+
+.ui.eleven.cards {
+  margin-left: -0.2%;
+  margin-right: -0.2%;
+}
+.ui.eleven.cards > .card {
+  width: 8.69%;
+  margin-left: 0.2%;
+  margin-right: 0.2%;
+  font-size: 9px;
+}
+.ui.eleven.cards > .card:nth-child(11n+1) {
+  clear: left;
+}
+
+.ui.twelve.cards {
+  margin-left: -0.1%;
+  margin-right: -0.1%;
+}
+.ui.twelve.cards > .card {
+  width: 8.1333%;
+  margin-left: 0.1%;
+  margin-right: 0.1%;
+  font-size: 9px;
+}
+.ui.twelve.cards > .card:nth-child(12n+1) {
+  clear: left;
+}
+
+/*--------------
+      Items
+---------------*/
+
+.ui.cards > .row > .card,
+.ui.cards > .card {
+  font-size: @medium;
+}

build/less/definitions/views/item.less

@@ -85,12 +85,12 @@
   position: relative;
   padding: @imagePadding;
   background: @imageBackground;
-  border-radius: @imageBorderRadius;
 }
 .ui.items .item > .image > img {
   display: block;
   width: 100%;
   height: auto;
+  border-radius: @imageBorderRadius;
 }
 
 /*--------------
@@ -126,6 +126,7 @@
   font-size: @titleFontSize;
   color: @titleColor;
 }
+.ui.items .item > .content > .meta + .description,
 .ui.items .item > .content > .header + .description {
   margin-top: @descriptionDistance;
 }
@@ -165,11 +166,9 @@
 ---------------*/
 
 .ui.items .item .meta {
-  float: @metaFloat;
   color: @metaColor;
 }
 
-
 /*--------------
      Labels
 ---------------*/
@@ -230,7 +229,6 @@
 .ui.items .item .extra {
   position: @extraDisplay;
   width: @extraWidth;
-  height: @extraHeight;
   padding: @extraPadding;
   top: @extraTop;
   left: @extraLeft;

build/less/themes/_site/views/card.overrides

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

build/less/themes/_site/views/card.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

build/less/themes/packages/basic/elements/button.variables

@@ -31,6 +31,9 @@
 
 @loadingBackgroundColor: #F0F0F0;
 
+@labeledIconLeftShadow: none;
+@labeledIconRightShadow: none;
+
 @mini: 0.6rem;
 @tiny: 0.7rem;
 @small: 0.85rem;

build/less/themes/packages/basic/views/card.variables

@@ -0,0 +1,17 @@
+/*******************************
+             Card
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+@width: 225px;
+@background: transparent;
+
+@extraBackground: transparent;
+@extraDivider: none;
+
+@imageBorderRadius: @borderRadius;
+
+@headerFontSize: 1.1em;

build/less/themes/packages/default/collections/message.variables

@@ -25,11 +25,9 @@
 ;
 
 /* Header */
-
 @headerFontSize: 1.3em;
 @headerFontWeight: bold;
 @headerBottomMargin: 0.25em;
-
 @headerDisplay: block;
 @headerHorizontalDistance: 0em;
 
@@ -60,7 +58,7 @@
 /* Icon Message */
 @iconSize: 2em;
 @iconOpacity: 0.8;
-@iconContentDistance: 1.5em;
+@iconContentDistance: 1.5rem;
 @iconVerticalAlign: middle;
 
 /* Attached */

build/less/themes/packages/default/elements/button.variables

@@ -14,14 +14,18 @@
 @textColor: rgba(0, 0, 0, 0.6);
 @textShadow: none;
 @invertedTextShadow: none;
-
 @borderRadius: 0.25em;
 
+/* Shadow */
+@shadowDistance: 0em;
+@shadowOffset: (@shadowDistance / 2);
+@shadowBoxShadow: 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset;
+
 @backgroundColor: #FAFAFA;
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
 @boxShadow:
   0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
-  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
+  @shadowBoxShadow
 ;
 
 /* transitions */
@@ -37,12 +41,12 @@
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.5em;
 
-/* Shadow */
-@shadowDistance: 0em;
-@shadowOffset: (@shadowDistance / 2);
-
 /* Icon */
-@iconDistance: 0.6em;
+@iconOpacity: 0.8;
+@iconDistance: 0.4em;
+@iconTransition: opacity @transitionDuration @transitionEasing;
+@iconMargin: 0em @iconDistance 0em -@iconDistance;
+@iconVerticalAlign: top;
 
 /* Loader */
 @loaderPath: "@{imagePath}/loader-mini.gif";
@@ -155,7 +159,7 @@
 
 /* Colors */
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-@coloredBoxShadow: none;
+@coloredBoxShadow: @shadowBoxShadow;
 
 /* Compact */
 @compactVerticalPadding: (@verticalPadding * 0.75);

build/less/themes/packages/default/elements/label.variables

@@ -86,14 +86,14 @@
 
 /* Corner */
 @cornerSizeRatio: 1.2;
-@cornerTriangleSize: 3em;
+@cornerTriangleSize: 2.5em;
 @cornerTextWidth: 2.5em;
 
 @cornerTextSize: 0.7em;
 @cornerIconSize: 0.7em;
 
-@cornerTopOffset: 0.45em;
-@cornerLeftOffset: 0.75em;
+@cornerTopOffset: 0.1em;
+@cornerLeftOffset: 0.95em;
 
 /* Horizontal */
 @horizontalLabelMinWidth: 3em;

build/less/themes/packages/default/globals/site.variables

@@ -249,7 +249,9 @@
 
 @borderColor              : rgba(0, 0, 0, 0.1);
 @selectedBorderColor      : rgba(0, 0, 0, 0.2);
+
 @solidBorderColor         : #DDDDDD;
+@solidSelectedBorderColor : #B0B0B0;
 
 @whiteBorderColor         : rgba(255, 255, 255, 0.2);
 @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);

build/less/themes/packages/default/views/card.overrides

@@ -0,0 +1,98 @@
+/*******************************
+             Item
+*******************************/
+/*-------------------
+         View
+--------------------*/
+
+/* Item */
+@background: #FFFFFF;
+@borderRadius: 0.325rem;
+@display: block;
+@float: left;
+@margin: 0em @horizontalSpacing @rowSpacing;
+@minHeight: 0px;
+@padding: 0em;
+@width: 300px;
+@boxShadow:
+  0px 0px 0px 1px @borderColor,
+  0px 3px 0px 0px @borderColor
+;
+@border: none;
+@zIndex: '';
+
+/* Item Group */
+@horizontalSpacing: 0.5em;
+@rowSpacing: 2.5em;
+@groupMargin: 1em -@horizontalSpacing;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Image */
+@imageBackground: @transparentBlack;
+@imagePadding: 0em;
+@imageBorderRadius: @borderRadius @borderRadius 0em 0em;
+@imageBoxShadow: none;
+@imageBorder: none;
+
+/* Content */
+@contentMargin: 0em;
+@contentPadding: 0.75em 1em;
+@contentFontSize: 1em;
+@contentBorder: none;
+@contentBorderRadius: 0em;
+@contentBoxShadow: none;
+
+/* Title */
+@titleMargin: 0em;
+@titleFont: @headerFont;
+@titleFontWeight: bold;
+@titleFontSize: 1.25em;
+@titleColor: @darkTextColor;
+
+/* Metadata */
+@metaColor: @lightTextColor;
+
+/* Description */
+@descriptionDistance: 0.75em;
+@descriptionColor: @lightTextColor;
+
+/* Image */
+@imageSpacing: 0.25em;
+@contentImageWidth: 2em;
+@contentImageVerticalAlign: middle;
+
+/* Paragraph */
+@paragraphDistance: 0.1em;
+
+/* Additional Content */
+@extraDisplay: absolute;
+@extraTop: 100%;
+@extraLeft: 0em;
+@extraWidth: 100%;
+
+@extraPadding: 0.5em 0.75em;
+@extraColor: @lightTextColor;
+@extraTransition: color @transitionDuration @transitionEasing;
+
+/*-------------------
+       States
+--------------------*/
+
+@hoverCursor: pointer;
+@hoverZIndex: 5;
+@hoverBorder: none;
+@hoverBoxShadow:
+  0px 0px 0px 1px @selectedBorderColor,
+  0px 3px 0px 0px @selectedBorderColor
+;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Sizes */
+@medium: 1em;

build/less/themes/packages/default/views/card.variables

@@ -0,0 +1,128 @@
+/*******************************
+             Card
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+/* Shadow */
+@shadowDistance: 0px;
+@shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
+
+/* Item */
+@background: #FFFFFF;
+@borderRadius: 0.325rem;
+@display: block;
+@margin: 0em @horizontalSpacing @rowSpacing;
+@minHeight: 0px;
+@padding: 0em;
+@width: 275px;
+@boxShadow:
+  0px 0px 0px 1px @solidBorderColor,
+  @shadowBoxShadow
+;
+@border: none;
+@zIndex: '';
+@transition: box-shadow @transitionDuration @transitionEasing;
+
+/* Item Group */
+@groupDisplay: block;
+@groupFloat: left;
+@horizontalSpacing: 0.5em;
+@rowSpacing: 2.5em;
+@groupMargin: 1em -@horizontalSpacing;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Image */
+@imageBackground: @transparentBlack;
+@imagePadding: 0em;
+@imageBorderRadius: @borderRadius @borderRadius 0em 0em;
+@imageBoxShadow: none;
+@imageBorder: none;
+
+/* Content */
+@contentBackground: none;
+@contentMargin: 0em;
+@contentPadding: 1em 1em;
+@contentFontSize: 1em;
+@contentBorder: none;
+@contentBorderRadius: 0em;
+@contentBoxShadow: none;
+
+/* Header */
+@headerMargin: 0em;
+@headerFont: @headerFont;
+@headerFontWeight: bold;
+@headerFontSize: 1.25em;
+@headerColor: @darkTextColor;
+
+/* Metadata */
+@metaFontSize: 0.9em;
+@metaSpacing: 0.3em;
+@metaColor: @lightTextColor;
+
+/* Icons */
+@actionOpacity: 0.75;
+@actionHoverOpacity: 1;
+@actionTransition: color @transitionDuration @transitionEasing;
+@starColor: #AC9400;
+@starActiveColor: #E9B539;
+@likeColor: #FFADAE;
+@likeActiveColor: #EF404A;
+
+/* Links */
+@contentLinkColor: @linkColor;
+@contentLinkHoverColor: @linkHoverColor;
+@headerLinkColor: @headerColor;
+@headerLinkHoverColor: @linkHoverColor;
+@metaLinkColor: @lightTextColor;
+@metaLinkHoverColor: @textColor;
+
+/* Description */
+@descriptionDistance: 0.75em;
+@descriptionColor: rgba(0, 0, 0, 0.5);
+
+/* Content Image */
+@contentImageWidth: 2em;
+@contentImageVerticalAlign: middle;
+
+/* Avatar Image */
+@avatarSize: @contentImageWidth;
+@avatarBorderRadius: @circularRadius;
+
+/* Paragraph */
+@paragraphDistance: 0.5em;
+
+/* Additional Content */
+@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
+@extraBackground: #FAFAFA linear-gradient(transparent, rgba(0, 0, 0, 0.03));
+@extraDisplay: static;
+@extraTop: 0em;
+@extraLeft: 0em;
+@extraWidth: 100%;
+@extraPadding: 0.75em 1em;
+@extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+@extraColor: @lightTextColor;
+@extraTransition: color @transitionDuration @transitionEasing;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Link */
+@linkHoverBackground: '';
+@linkHoverBorder: none;
+@linkHoverZIndex: 5;
+
+@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
+@linkHoverBoxShadow:
+  @shadowHoverBoxShadow,
+  0px 0px 0px 1px @selectedBorderColor
+;
+
+/* Sizes */
+@medium: 1em;

build/less/themes/packages/default/views/item.variables

@@ -7,12 +7,12 @@
 
 /* Item */
 @background: #FFFFFF;
-@borderRadius: 0.325em;
+@borderRadius: 0.325rem;
 @display: block;
 @float: left;
 @margin: 0em @horizontalSpacing @rowSpacing;
 @minHeight: 0px;
-@padding: 0.5em;
+@padding: 0em;
 @width: 300px;
 @boxShadow:
   0px 0px 0px 1px @borderColor,
@@ -33,13 +33,13 @@
 /* Image */
 @imageBackground: @transparentBlack;
 @imagePadding: 0em;
-@imageBorderRadius: @borderRadius;
+@imageBorderRadius: @borderRadius @borderRadius 0em 0em;
 @imageBoxShadow: none;
 @imageBorder: none;
 
 /* Content */
 @contentMargin: 0em;
-@contentPadding: 0.75em 0.5em;
+@contentPadding: 0.75em 1em;
 @contentFontSize: 1em;
 @contentBorder: none;
 @contentBorderRadius: 0em;
@@ -53,7 +53,6 @@
 @titleColor: @darkTextColor;
 
 /* Metadata */
-@metaFloat: right;
 @metaColor: @lightTextColor;
 
 /* Description */
@@ -73,7 +72,6 @@
 @extraTop: 100%;
 @extraLeft: 0em;
 @extraWidth: 100%;
-@extraHeight: 1.5em;
 
 @extraPadding: 0.5em 0.75em;
 @extraColor: @lightTextColor;

build/minified/definitions/collections/breadcrumb.min.css

@@ -11,4 +11,4 @@
 * Released: 08/05/2014
 */
 
-.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .15em;font-size:1em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb .icon.divider{font-size:1em}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.7em}.ui.tiny.breadcrumb{font-size:.8em}.ui.small.breadcrumb{font-size:.875em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.125em}.ui.big.breadcrumb{font-size:1.25em}.ui.huge.breadcrumb{font-size:1.375em}.ui.massive.breadcrumb{font-size:1.5em}
+.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .15em;font-size:1em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb .icon.divider{font-size:1em}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.65em}.ui.tiny.breadcrumb{font-size:.7em}.ui.small.breadcrumb{font-size:.75em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.1em}.ui.big.breadcrumb{font-size:1.05em}.ui.huge.breadcrumb{font-size:1.3em}.ui.massive.breadcrumb{font-size:1.5em}

build/minified/definitions/collections/message.min.css

@@ -11,4 +11,4 @@
 * Released: 08/05/2014
 */
 
-.ui.message{position:relative;min-height:1em;margin:1em 0;background:#efefef;padding:1em 1.5em;line-height:1.3;color:rgba(0,0,0,.8);-webkit-transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;border-radius:.25em;box-shadow:0 0 0 1px rgba(0,0,0,.075) inset}.ui.message:first-child{margin-top:0}.ui.message:last-child{margin-bottom:0}.ui.message .header{display:block;font-family:Lato,'Helvetica Neue',Arial,sans-serif;font-size:1.3em;font-weight:700;margin:0}.ui.message p{opacity:.85;margin:.75em 0}.ui.message p:first-child{margin-top:0}.ui.message p:last-child{margin-bottom:0}.ui.message .header+p{margin-top:.25em}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.5em 0 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;margin:0 0 .3em 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'•';left:-1em;height:100%;vertical-align:baseline}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon{margin-right:.6em}.ui.message>.close.icon{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.close.icon:hover{opacity:1}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.header.visible,.ui.message.visible{display:block!important}.ui.header.hidden,.ui.message.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;border-radius:.25em .25em 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset}.ui.attached+.ui.attached.message:not(.top):not(.bottom){margin-top:-1px;border-radius:0}.ui.bottom.attached.message{margin-top:-1px;border-radius:0 0 .25em .25em}.ui.bottom.attached.message:not(:last-child){margin-bottom:1em}.ui.attached.icon.message{display:block;width:auto}.ui.icon.message{display:table;width:100%}.ui.icon.message>.icon:not(.close){display:table-cell;vertical-align:middle;font-size:2em;opacity:.8}.ui.icon.message>.icon+.content{padding-left:1.5em}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.floating.message{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset}.ui.black.message,.ui.inverted.message{background-color:#333;color:#fff}.ui.positive.message{background-color:#dff0d8;color:#3c763d}.ui.negative.message{background-color:#f2dede;color:#a94442}.ui.info.message{background-color:#d9edf7;color:#31708f}.ui.warning.message{background-color:#fcf8e3;color:#8a6d3b}.ui.error.message{background-color:#f2dede;color:#a94442}.ui.success.message{background-color:#dff0d8;color:#3c763d}.ui.blue.message{background-color:#d3e4f3;color:#0074d9}.ui.green.message{background-color:#def2e0;color:#2ecc40}.ui.orange.message{background-color:#f7e5d6;color:#ff851b}.ui.pink.message{background-color:#f9cee6;color:#d9499a}.ui.purple.message{background-color:#e0ddf5;color:#564f8a}.ui.red.message{background-color:#f8d5d3;color:#ff4136}.ui.teal.message{background-color:#d2f5f5;color:#39cccc}.ui.yellow.message{background-color:#fcf5d8;color:#b58105}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}
+.ui.message{position:relative;min-height:1em;margin:1em 0;background:#efefef;padding:1em 1.5em;line-height:1.3;color:rgba(0,0,0,.8);-webkit-transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;border-radius:.25em;box-shadow:0 0 0 1px rgba(0,0,0,.075) inset}.ui.message:first-child{margin-top:0}.ui.message:last-child{margin-bottom:0}.ui.message .header{display:block;font-family:Lato,'Helvetica Neue',Arial,sans-serif;font-size:1.3em;font-weight:700;margin:0}.ui.message p{opacity:.85;margin:.75em 0}.ui.message p:first-child{margin-top:0}.ui.message p:last-child{margin-bottom:0}.ui.message .header+p{margin-top:.25em}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.5em 0 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;margin:0 0 .3em 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'•';left:-1em;height:100%;vertical-align:baseline}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon{margin-right:.6em}.ui.message>.close.icon{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.close.icon:hover{opacity:1}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.header.visible,.ui.message.visible{display:block!important}.ui.header.hidden,.ui.message.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;border-radius:.25em .25em 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset}.ui.attached+.ui.attached.message:not(.top):not(.bottom){margin-top:-1px;border-radius:0}.ui.bottom.attached.message{margin-top:-1px;border-radius:0 0 .25em .25em}.ui.bottom.attached.message:not(:last-child){margin-bottom:1em}.ui.attached.icon.message{display:block;width:auto}.ui.icon.message{display:table;width:100%}.ui.icon.message>.icon:not(.close){display:table-cell;vertical-align:middle;font-size:2em;opacity:.8;padding-right:1.5rem}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.floating.message{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset}.ui.black.message,.ui.inverted.message{background-color:#333;color:#fff}.ui.positive.message{background-color:#dff0d8;color:#3c763d}.ui.negative.message{background-color:#f2dede;color:#a94442}.ui.info.message{background-color:#d9edf7;color:#31708f}.ui.warning.message{background-color:#fcf8e3;color:#8a6d3b}.ui.error.message{background-color:#f2dede;color:#a94442}.ui.success.message{background-color:#dff0d8;color:#3c763d}.ui.blue.message{background-color:#d3e4f3;color:#0074d9}.ui.green.message{background-color:#def2e0;color:#2ecc40}.ui.orange.message{background-color:#f7e5d6;color:#ff851b}.ui.pink.message{background-color:#f9cee6;color:#d9499a}.ui.purple.message{background-color:#e0ddf5;color:#564f8a}.ui.red.message{background-color:#f8d5d3;color:#ff4136}.ui.teal.message{background-color:#d2f5f5;color:#39cccc}.ui.yellow.message{background-color:#fcf5d8;color:#b58105}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}

build/uncompressed/definitions/collections/breadcrumb.css

@@ -45,23 +45,6 @@
 /*------------------
      Load Default
 -------------------*/
-/*******************************
-          Breadcrumb
-*******************************/
-/*-------------------
-    Globals Used
---------------------*/
-/*-------------------
-     Breadcrumb
---------------------*/
-/* Coupling */
-/*-------------------
-       States
---------------------*/
-/* Sizes */
-/*------------------
-     Load Theme
--------------------*/
 /*******************************
          Site Settings
 *******************************/
@@ -145,6 +128,23 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+          Breadcrumb
+*******************************/
+/*-------------------
+    Globals Used
+--------------------*/
+/*-------------------
+     Breadcrumb
+--------------------*/
+/* Coupling */
+/*-------------------
+       States
+--------------------*/
+/* Sizes */
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
      Load Site
 -------------------*/
@@ -208,25 +208,25 @@
            Variations
 *******************************/
 .ui.mini.breadcrumb {
-  font-size: 0.7em;
+  font-size: 0.65em;
 }
 .ui.tiny.breadcrumb {
-  font-size: 0.8em;
+  font-size: 0.7em;
 }
 .ui.small.breadcrumb {
-  font-size: 0.875em;
+  font-size: 0.75em;
 }
 .ui.breadcrumb {
   font-size: 1em;
 }
 .ui.large.breadcrumb {
-  font-size: 1.125em;
+  font-size: 1.1em;
 }
 .ui.big.breadcrumb {
-  font-size: 1.25em;
+  font-size: 1.05em;
 }
 .ui.huge.breadcrumb {
-  font-size: 1.375em;
+  font-size: 1.3em;
 }
 .ui.massive.breadcrumb {
   font-size: 1.5em;

build/uncompressed/definitions/collections/message.css

@@ -316,9 +316,7 @@
   vertical-align: middle;
   font-size: 2em;
   opacity: 0.8;
-}
-.ui.icon.message > .icon + .content {
-  padding-left: 1.5em;
+  padding-right: 1.5rem;
 }
 .ui.icon.message > .content {
   display: table-cell;

build/uncompressed/definitions/elements/button.css

@@ -134,9 +134,9 @@
 /*-------------------
        Element
 --------------------*/
+/* Shadow */
 /* transitions */
 /* Padding */
-/* Shadow */
 /* Icon */
 /* Loader */
 /*-------------------
@@ -440,7 +440,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.primary.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.primary.buttons .button:hover,
 .ui.primary.button:hover {
@@ -472,7 +472,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.secondary.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.secondary.buttons .button:hover,
 .ui.secondary.button:hover {
@@ -502,7 +502,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.facebook.button:hover {
   background-color: #4261b0;
@@ -521,7 +521,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.twitter.button:hover {
   background-color: #549dd1;
@@ -540,7 +540,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.google.plus.button:hover {
   background-color: #d85b4b;
@@ -575,7 +575,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.youtube.button:hover {
   background-color: #e31b21;
@@ -594,7 +594,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.instagram.button:hover {
   background-color: #5183ad;
@@ -613,7 +613,7 @@
   text-shadow: none;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.pinterest.button:hover {
   background-color: #08bbff;
@@ -631,7 +631,7 @@
   color: #ffffff;
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.vk.button:hover {
   background-color: #567ea9;
@@ -645,10 +645,11 @@
      Icon
 ---------------*/
 .ui.button > .icon {
-  margin-right: 0.6em;
-  line-height: 1;
-  -webkit-transition: opacity 0.1s ease;
-  transition: opacity 0.1s ease;
+  opacity: 0.8;
+  margin: 0em 0.4em 0em -0.4em;
+  -webkit-transition: opacity 0.25s ease;
+          transition: opacity 0.25s ease;
+  vertical-align: top;
 }
 /*******************************
            Variations
@@ -1192,7 +1193,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.black.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.black.buttons .button:hover,
 .ui.black.button:hover {
@@ -1249,7 +1250,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.blue.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.blue.buttons .button:hover,
 .ui.blue.button:hover {
@@ -1307,7 +1308,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.green.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.green.buttons .button:hover,
 .ui.green.button:hover {
@@ -1365,7 +1366,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.orange.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.orange.buttons .button:hover,
 .ui.orange.button:hover {
@@ -1423,7 +1424,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.pink.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.pink.buttons .button:hover,
 .ui.pink.button:hover {
@@ -1481,7 +1482,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.purple.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.purple.buttons .button:hover,
 .ui.purple.button:hover {
@@ -1539,7 +1540,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.red.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.red.buttons .button:hover,
 .ui.red.button:hover {
@@ -1597,7 +1598,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.teal.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.teal.buttons .button:hover,
 .ui.teal.button:hover {
@@ -1655,7 +1656,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.yellow.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.yellow.buttons .button:hover,
 .ui.yellow.button:hover {
@@ -1715,7 +1716,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.positive.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.positive.buttons .button:hover,
 .ui.positive.button:hover,
@@ -1751,7 +1752,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
 }
 .ui.negative.button {
-  box-shadow: none;
+  box-shadow: 0px 0em 0px 0px rgba(0, 0, 0, 0.1) inset;
 }
 .ui.negative.buttons .button:hover,
 .ui.negative.button:hover,

build/uncompressed/definitions/elements/label.css

@@ -445,8 +445,8 @@ a.ui.label:hover:before {
   right: 0em;
   z-index: 10;
   margin: 0em;
-  width: 3em;
-  height: 3em;
+  width: 2.5em;
+  height: 2.5em;
   padding: 0em;
   text-align: center;
   -webkit-transition: color 0.2s ease;
@@ -461,8 +461,8 @@ a.ui.label:hover:before {
   width: 0em;
   height: 0em;
   border-top: 0em solid transparent;
-  border-right: 3em solid transparent;
-  border-bottom: 3em solid transparent;
+  border-right: 2.5em solid transparent;
+  border-bottom: 2.5em solid transparent;
   border-left: 0em solid transparent;
   border-right-color: inherit;
   -webkit-transition: border-color 0.2s ease;
@@ -470,16 +470,16 @@ a.ui.label:hover:before {
 }
 .ui.corner.label .icon {
   position: relative;
-  top: 0.45em;
-  left: 0.75em;
+  top: 0.1em;
+  left: 0.95em;
   font-size: 0.7em;
   margin: 0em;
 }
 .ui.corner.label .text {
   display: inline-block;
   position: relative;
-  top: 0.45em;
-  left: 0.75em;
+  top: 0.1em;
+  left: 0.95em;
   margin: 0em;
   width: 2.5em;
   font-size: 0.7em;
@@ -496,17 +496,17 @@ a.ui.label:hover:before {
   left: 0em;
 }
 .ui.left.corner.label:after {
-  border-top: 3em solid transparent;
-  border-right: 3em solid transparent;
+  border-top: 2.5em solid transparent;
+  border-right: 2.5em solid transparent;
   border-bottom: 0em solid transparent;
   border-left: 0em solid transparent;
   border-top-color: inherit;
 }
 .ui.left.corner.label .icon {
-  left: -0.75em;
+  left: -0.95em;
 }
 .ui.left.corner.label .text {
-  left: -0.75em;
+  left: -0.95em;
   -webkit-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
           transform: rotate(-45deg);

build/uncompressed/definitions/views/card.css

@@ -0,0 +1,640 @@
+/*
+ * # Semantic - Item
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+/*******************************
+            Theme
+*******************************/
+/*
+
+███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
+██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
+███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
+╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
+███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
+╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
+
+*/
+/*******************************
+           Folders
+*******************************/
+/* Path to theme packages */
+/* Path to site override folder */
+/*******************************
+            Themes
+*******************************/
+/* To override a theme for an individual element
+   specify theme name below
+
+   Be sure to update the user folder name (see README)
+*/
+/* Global */
+/* Elements */
+/* Collections */
+/* Modules */
+/* Views */
+/*******************************
+        Import Directives
+*******************************/
+/*------------------
+     Load Default
+-------------------*/
+/*******************************
+         Site Settings
+*******************************/
+/*-------------------
+        Paths
+--------------------*/
+/*-------------------
+       Fonts
+--------------------*/
+/*-------------------
+      Site Colors
+--------------------*/
+/*---  Colors  ---*/
+/*-------------------
+        Page
+--------------------*/
+/*-------------------
+        Grid
+--------------------*/
+/*-------------------
+     Breakpoints
+--------------------*/
+/*******************************
+           Power-User
+*******************************/
+/*-------------------
+       BG Colors
+--------------------*/
+/*-------------------
+       Icons
+--------------------*/
+/* Max Width of Icon */
+/*-------------------
+       Easing
+--------------------*/
+/*---  Light Variations  ---*/
+/*---   Neutrals  ---*/
+/*--- Text Colors ---*/
+/*--- Backgrounds ---*/
+/*-------------------
+    Emotive Colors
+--------------------*/
+/* Positive / Negative */
+/* Messages */
+/*-------------------
+     Neutral Text
+--------------------*/
+/*-------------------
+     Brand Colors
+--------------------*/
+/*-------------------
+      Borders
+--------------------*/
+/*-------------------
+        Sizes
+--------------------*/
+/*-------------------
+     Transitions
+--------------------*/
+/*******************************
+           States
+*******************************/
+/*-------------------
+      Disabled
+--------------------*/
+/*-------------------
+        Hover
+--------------------*/
+/*---  Colors  ---*/
+/*---  Emotive  ---*/
+/*---  Neutrals  ---*/
+/*-------------------
+    Down (:active)
+--------------------*/
+/*---  Colors  ---*/
+/*---  Emotive  ---*/
+/*---  Neutrals  ---*/
+/*-------------------
+        Active
+--------------------*/
+/*---  Standard  ---*/
+/*---  Emotive  ---*/
+/*---  Neutrals  ---*/
+/*******************************
+             Card
+*******************************/
+/*-------------------
+         View
+--------------------*/
+/* Shadow */
+/* Item */
+/* Item Group */
+/*-------------------
+       Content
+--------------------*/
+/* Image */
+/* Content */
+/* Header */
+/* Metadata */
+/* Icons */
+/* Links */
+/* Description */
+/* Content Image */
+/* Avatar Image */
+/* Paragraph */
+/* Additional Content */
+/*-------------------
+      Variations
+--------------------*/
+/* Link */
+/* Sizes */
+/*------------------
+     Load Theme
+-------------------*/
+/*------------------
+     Load Site
+-------------------*/
+/*******************************
+     User Global Variables
+*******************************/
+/*******************************
+    User Variable Overrides
+*******************************/
+/*------------------
+ Override Mix-in
+-------------------*/
+/*******************************
+            Standard
+*******************************/
+/*--------------
+      Items
+---------------*/
+.ui.cards,
+.ui.card {
+  margin: 1em -0.5em;
+}
+.ui.cards:first-child .ui.card:first-child {
+  margin-top: 0em;
+}
+.ui.cards:last-child,
+.ui.card:last-child {
+  margin-bottom: 0em;
+}
+.ui.cards > .row > .card,
+.ui.cards > .card {
+  display: block;
+  float: left;
+}
+/* Clearing */
+.ui.cards:after,
+.ui.card:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+/*--------------
+      Item
+---------------*/
+.ui.cards > .row > .card,
+.ui.cards > .card,
+.ui.card {
+  position: relative;
+  display: block;
+  width: 275px;
+  min-height: 0px;
+  margin: 0em 0.5em 2.5em;
+  background: #ffffff;
+  padding: 0em;
+  border: none;
+  border-radius: 0.325rem;
+  box-shadow: 0px 0px 0px 1px #dddddd, 0px 0px 0px 0px #dddddd;
+  -webkit-transition: box-shadow 0.25s ease;
+          transition: box-shadow 0.25s ease;
+  z-index: '';
+}
+.ui.cards > .row > .card > :first-child,
+.ui.cards > .card > :first-child,
+.ui.card > :first-child {
+  border-radius: 0.325rem 0.325rem 0em 0em !important;
+}
+.ui.cards > .row > .card > :last-child,
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0em 0em 0.325rem 0.325rem !important;
+}
+.ui.cards a.card,
+.ui.cards .card a,
+.ui.card a,
+a.ui.cards {
+  cursor: pointer;
+}
+/*--------------
+     Images
+---------------*/
+.ui.cards .card > .image,
+.ui.card > .image {
+  display: block;
+  position: relative;
+  padding: 0em;
+  background: rgba(0, 0, 0, 0.05);
+}
+.ui.cards .card > .image > img,
+.ui.card > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.325rem 0.325rem 0em 0em;
+}
+.ui.cards .card > .image:only-child > img,
+.ui.card > .image:only-child > img {
+  border-radius: 0.325rem;
+}
+/*--------------
+     Floated
+---------------*/
+.ui.cards .card .left.floated,
+.ui.card .left.floated {
+  float: left;
+}
+.ui.cards .card .right.floated,
+.ui.card .right.floated {
+  float: right;
+}
+/*--------------
+     Content
+---------------*/
+.ui.cards .card > .content,
+.ui.card > .content {
+  background: none;
+  margin: 0em;
+  padding: 1em 1em;
+  box-shadow: none;
+  font-size: 1em;
+  border: none;
+  border-radius: 0em;
+}
+.ui.cards .card > .content:after,
+.ui.card > .content:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ui.cards .card > .content > .header,
+.ui.card > .content > .header {
+  display: block;
+  margin: 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
+  font-weight: bold;
+  font-size: 1.25em;
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.cards .card > .content > .meta + .description,
+.ui.cards .card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.card > .content > .header + .description {
+  margin-top: 0.75em;
+}
+/*--------------
+     Image
+---------------*/
+.ui.cards .card .content img,
+.ui.card .content img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 2em;
+}
+.ui.cards .card img.avatar,
+.ui.cards .card .avatar img,
+.ui.card img.avatar,
+.ui.card .avatar img {
+  width: 2em;
+  height: 2em;
+  border-radius: 500rem;
+}
+/*--------------
+   Description
+---------------*/
+.ui.cards .card > .content > .description,
+.ui.card > .content > .description {
+  clear: both;
+  color: rgba(0, 0, 0, 0.5);
+}
+/*--------------
+    Paragraph
+---------------*/
+.ui.cards .card > .content p,
+.ui.card > .content p {
+  margin: 0em 0em 0.5em;
+}
+.ui.cards .card > .content p:last-child,
+.ui.card > .content p:last-child {
+  margin-bottom: 0em;
+}
+/*--------------
+      Meta
+---------------*/
+.ui.cards .card .meta,
+.ui.card .meta {
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.cards .card .meta *,
+.ui.card .meta * {
+  margin-right: 0.3em;
+}
+.ui.cards .card .meta :last-child,
+.ui.card .meta :last-child {
+  margin-right: 0em;
+}
+.ui.cards .card .meta .right.floated,
+.ui.card .meta .right.floated {
+  margin-right: 0em;
+  margin-left: 0.3em;
+}
+/*--------------
+      Links
+---------------*/
+/* Generic */
+.ui.cards .card > .content a,
+.ui.card > .content a {
+  color: #009fda;
+}
+.ui.cards .card > .content a:hover,
+.ui.card > .content a:hover {
+  color: #00b2f3;
+}
+/* Header */
+.ui.cards .card > .content > a.header,
+.ui.card > .content > a.header {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.cards .card > .content > a.header:hover,
+.ui.card > .content > a.header:hover {
+  color: #00b2f3;
+}
+/* Meta */
+.ui.cards .card .meta a,
+.ui.card .meta a {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.cards .card .meta a:hover,
+.ui.card .meta a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+/*--------------
+     Labels
+---------------*/
+/*-----Star----- */
+/* Icon */
+.ui.cards .card > .content .star.icon,
+.ui.card > .content .star.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.25s ease;
+          transition: color 0.25s ease;
+}
+.ui.cards .card > .content .star.icon:hover,
+.ui.card > .content .star.icon:hover {
+  opacity: 1;
+  color: #ac9400;
+}
+.ui.cards .card > .content .active.star.icon,
+.ui.card > .content .active.star.icon {
+  color: #e9b539;
+}
+/*-----Like----- */
+/* Icon */
+.ui.cards .card > .content .like.icon,
+.ui.card > .content .like.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.25s ease;
+          transition: color 0.25s ease;
+}
+.ui.cards .card > .content .like.icon:hover,
+.ui.card > .content .like.icon:hover {
+  opacity: 1;
+  color: #ffadae;
+}
+.ui.cards .card > .content .active.like.icon,
+.ui.card > .content .active.like.icon {
+  color: #ef404a;
+}
+/*----------------
+  Extra Content
+-----------------*/
+.ui.cards .card .extra,
+.ui.card .extra {
+  position: static;
+  background: #fafafa -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
+  background: #fafafa linear-gradient(transparent, rgba(0, 0, 0, 0.03));
+  width: 100%;
+  padding: 0.75em 1em;
+  top: 0em;
+  left: 0em;
+  color: rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  -webkit-transition: color 0.25s ease;
+          transition: color 0.25s ease;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+/*******************************
+           Variations
+*******************************/
+/*-------------------
+        Link
+--------------------*/
+.ui.link.cards .card:hover,
+.ui.link.card:hover {
+  cursor: pointer;
+  z-index: 5;
+  background: '';
+  border: none;
+  box-shadow: 0px 0px 0px 0px #b0b0b0, 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+}
+/*-------------------
+      Responsive
+--------------------*/
+@media only screen and (max-width: 768px) {
+  .ui.stackable.cards {
+    display: block !important;
+  }
+  .ui.stackable.cards > .card,
+  .ui.stackable.cards > .row > .card {
+    display: block !important;
+    height: auto !important;
+    width: auto !important;
+    padding: 0% !important;
+  }
+}
+/*--------------
+    Item Count
+---------------*/
+.ui.one.cards {
+  margin-left: -2%;
+  margin-right: -2%;
+}
+.ui.one.cards > .card {
+  width: 100%;
+  margin-left: 2%;
+  margin-right: 2%;
+}
+.ui.two.cards {
+  margin-left: -1%;
+  margin-right: -1%;
+}
+.ui.two.cards > .card {
+  width: 48%;
+  margin-left: 1%;
+  margin-right: 1%;
+}
+.ui.two.cards > .card:nth-child(2n+1) {
+  clear: left;
+}
+.ui.three.cards {
+  margin-left: -1%;
+  margin-right: -1%;
+}
+.ui.three.cards > .card {
+  width: 31.333%;
+  margin-left: 1%;
+  margin-right: 1%;
+}
+.ui.three.cards > .card:nth-child(3n+1) {
+  clear: left;
+}
+.ui.four.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.four.cards > .card {
+  width: 24%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.four.cards > .card:nth-child(4n+1) {
+  clear: left;
+}
+.ui.five.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.five.cards > .card {
+  width: 19%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.five.cards > .card:nth-child(5n+1) {
+  clear: left;
+}
+.ui.six.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.six.cards > .card {
+  width: 15.66%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+.ui.six.cards > .card:nth-child(6n+1) {
+  clear: left;
+}
+.ui.seven.cards {
+  margin-left: -0.5%;
+  margin-right: -0.5%;
+}
+.ui.seven.cards > .card {
+  width: 13.28%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+  font-size: 11px;
+}
+.ui.seven.cards > .card:nth-child(7n+1) {
+  clear: left;
+}
+.ui.eight.cards {
+  margin-left: -0.25%;
+  margin-right: -0.25%;
+}
+.ui.eight.cards > .card {
+  width: 12.0%;
+  margin-left: 0.25%;
+  margin-right: 0.25%;
+  font-size: 11px;
+}
+.ui.eight.cards > .card:nth-child(8n+1) {
+  clear: left;
+}
+.ui.nine.cards {
+  margin-left: -0.25%;
+  margin-right: -0.25%;
+}
+.ui.nine.cards > .card {
+  width: 10.61%;
+  margin-left: 0.25%;
+  margin-right: 0.25%;
+  font-size: 10px;
+}
+.ui.nine.cards > .card:nth-child(9n+1) {
+  clear: left;
+}
+.ui.ten.cards {
+  margin-left: -0.2%;
+  margin-right: -0.2%;
+}
+.ui.ten.cards > .card {
+  width: 9.6%;
+  margin-left: 0.2%;
+  margin-right: 0.2%;
+  font-size: 10px;
+}
+.ui.ten.cards > .card:nth-child(10n+1) {
+  clear: left;
+}
+.ui.eleven.cards {
+  margin-left: -0.2%;
+  margin-right: -0.2%;
+}
+.ui.eleven.cards > .card {
+  width: 8.69%;
+  margin-left: 0.2%;
+  margin-right: 0.2%;
+  font-size: 9px;
+}
+.ui.eleven.cards > .card:nth-child(11n+1) {
+  clear: left;
+}
+.ui.twelve.cards {
+  margin-left: -0.1%;
+  margin-right: -0.1%;
+}
+.ui.twelve.cards > .card {
+  width: 8.1333%;
+  margin-left: 0.1%;
+  margin-right: 0.1%;
+  font-size: 9px;
+}
+.ui.twelve.cards > .card:nth-child(12n+1) {
+  clear: left;
+}
+/*--------------
+      Items
+---------------*/
+.ui.cards > .row > .card,
+.ui.cards > .card {
+  font-size: 1em;
+}

build/uncompressed/definitions/views/item.css

@@ -205,9 +205,9 @@
   min-height: 0px;
   margin: 0em 0.5em 2.5em;
   background: #ffffff;
-  padding: 0.5em;
+  padding: 0em;
   border: none;
-  border-radius: 0.325em;
+  border-radius: 0.325rem;
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
   z-index: '';
 }
@@ -223,12 +223,12 @@
   position: relative;
   padding: 0em;
   background: rgba(0, 0, 0, 0.05);
-  border-radius: 0.325em;
 }
 .ui.items .item > .image > img {
   display: block;
   width: 100%;
   height: auto;
+  border-radius: 0.325rem 0.325rem 0em 0em;
 }
 /*--------------
      Floated
@@ -244,7 +244,7 @@
 ---------------*/
 .ui.items .item > .content {
   margin: 0em;
-  padding: 0.75em 0.5em;
+  padding: 0.75em 1em;
   box-shadow: none;
   font-size: 1em;
   border: none;
@@ -258,6 +258,7 @@
   font-size: 1.25em;
   color: rgba(0, 0, 0, 0.85);
 }
+.ui.items .item > .content > .meta + .description,
 .ui.items .item > .content > .header + .description {
   margin-top: 0.75em;
 }
@@ -289,7 +290,6 @@
       Meta
 ---------------*/
 .ui.items .item .meta {
-  float: right;
   color: rgba(0, 0, 0, 0.4);
 }
 /*--------------
@@ -343,7 +343,6 @@
 .ui.items .item .extra {
   position: absolute;
   width: 100%;
-  height: 1.5em;
   padding: 0.5em 0.75em;
   top: 100%;
   left: 0em;

server/documents/views/card.html.eco

@@ -5,9 +5,18 @@ css         : 'card'
 title       : 'Card'
 description : 'A card view can be used to list site content as a playing card'
 type        : 'UI View'
+
+element     : 'card'
+elementType : 'view'
+
+themes      : ['Default', 'Basic']
 ---
 
 <%- @partial('header') %>
+
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/card.less" />
+<script src="/javascript/card.js"></script>
+
 <div class="main container">
 
   <div class="peek">
@@ -29,10 +38,15 @@ type        : 'UI View'
       </div>
       <div class="content">
         <div class="header">Cute Dog</div>
-        <div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div>
+        <div class="meta">
+          <span class="date">5 days ago</span>
+        </div>
+        <div class="description">
+          This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.
+        </div>
       </div>
       <div class="extra content">
-        <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
+        <i class="right floated like icon"></i>
       </div>
     </div>
   </div>
@@ -98,6 +112,7 @@ type        : 'UI View'
       </div>
     </div>
   </div>
+
   <div class="example">
     <h4 class="ui header">Metadata</h4>
     <p>A card can contain content metadata</p>
@@ -116,6 +131,44 @@ type        : 'UI View'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Link</h4>
+    <p>A card can contain contain links as images, headers, or inside content</p>
+    <div class="ui yellow message">
+      <i class="star icon"></i>
+      To make the entire content of a card link, check out the link variation below
+    </div>
+    <div class="ui card">
+      <a class="image" href="#">
+        <img src="/images/demo/highres.jpg">
+      </a>
+      <div class="content">
+        <a class="header" href="#">Cute Dog</a>
+        <div class="meta">
+          <a class="time">2 days ago</a>
+        </div>
+        <div class="description">
+          Check our this <a href="http://www.dogs.com"> excellent resource</a> on dogs.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="example">
+    <h4 class="ui header">Icons</h4>
+    <p>A card can contain icons to denote user actions.</p>
+    <div class="ui info message">
+      Common actions may contain special formatting, like "star" or "heart". To attach events, on a user action, please check out the <a href="#">state behavior</a>.
+    </div>
+    <div class="ui card">
+      <div class="content">
+        <i class="right floated like icon"></i>
+        <i class="right floated star icon"></i>
+        <div class="header">Cute Dog</div>
+      </div>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Description</h4>
     <p>A card can contain a description with a single or multiple paragraphs</p>
@@ -131,6 +184,25 @@ type        : 'UI View'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Extra Content</h4>
+    <p>A card can contain extra content meant to be formatted separately from the main content</p>
+    <div class="ui card">
+      <div class="content">
+        <div class="header">Cute Dog</div>
+        <div class="meta">2 days ago</div>
+        <div class="description">
+          <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
+          <p>Many people also have their own barometers for what makes a cute dog.</p>
+        </div>
+      </div>
+      <div class="extra content">
+        121 Votes
+      </div>
+    </div>
+
+  </div>
+
   <div class="example">
     <h4 class="ui header">Image</h4>
     <p>A card can contain an image</p>
@@ -138,6 +210,17 @@ type        : 'UI View'
       <div class="image">
         <img src="/images/demo/highres.jpg">
       </div>
+      <div class="content">
+        <div class="header">Cute Dog</div>
+        <div class="meta">2 days ago</div>
+        <div class="description">
+          <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p>
+          <p>Many people also have their own barometers for what makes a cute dog.</p>
+        </div>
+      </div>
+      <div class="extra content">
+        121 Votes
+      </div>
     </div>
   </div>
 
@@ -158,7 +241,7 @@ type        : 'UI View'
           <span class="category">Animals</span>
         </div>
         <div class="description">
-          We are one too!
+          Here's a description of a cute dog.
         </div>
       </div>
       <div class="extra content">
@@ -176,9 +259,6 @@ type        : 'UI View'
       <div class="card">
         <div class="image">
           <img src="/images/demo/highres4.jpg">
-          <a class="star ui corner label">
-            <i class="star icon"></i>
-          </a>
         </div>
         <div class="content">
           <div class="header">Cute Dog</div>
@@ -188,9 +268,6 @@ type        : 'UI View'
       <div class="card">
         <div class="image">
           <img src="/images/demo/highres5.jpg">
-          <a class="star ui corner label">
-            <i class="star icon"></i>
-          </a>
         </div>
         <div class="content">
           <div class="header">Faithful Dog</div>
@@ -200,9 +277,6 @@ type        : 'UI View'
       <div class="card">
         <div class="image">
           <img src="/images/demo/highres3.jpg">
-          <a class="star ui corner label">
-            <i class="star icon"></i>
-          </a>
         </div>
         <div class="content">
           <div class="header">Silly Dog</div>
@@ -212,9 +286,6 @@ type        : 'UI View'
       <div class="card">
         <div class="image">
           <img src="/images/demo/highres2.jpg">
-          <a class="star ui corner label">
-            <i class="star icon"></i>
-          </a>
         </div>
         <div class="content">
           <div class="header">Happy Dog</div>

server/documents/views/item.html.eco

@@ -4,7 +4,7 @@ css         : 'item'
 
 title       : 'Item'
 description : 'An item view can be used to list site content'
-type        : 'UI View'
+type        : 'Draft'
 ---
 
 <%- @partial('header') %>
@@ -22,7 +22,7 @@ type        : 'UI View'
   <div class="example">
     <h4 class="ui header">Items</h4>
     <p>A group of items. </p>
-    <div class="ignored yellow ui message">
+    <div class="ignored yellow icon ui message">
       <i class="info icon"></i>
       Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
     </div>
@@ -105,7 +105,7 @@ type        : 'UI View'
   <div class="example">
     <h4 class="ui header">List</h4>
     <p>An item list. </p>
-    <div class="ignored yellow ui message">
+    <div class="ignored yellow icon ui message">
       <i class="info icon"></i>
       Items must manually be given a width and height that match up to the content that it displays. Content must also be truncated so that each item will not exceed the maximum height.
     </div>
@@ -155,7 +155,7 @@ type        : 'UI View'
 
   <div class="example">
     <h4 class="ui header">Stackable</h4>
-    <div class="ui ignored info message">Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints</div>
+    <div class="ui ignored info icon message">Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints</div>
     <p>An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p>
     <div class="ui stackable items">
       <div class="item">

server/files/javascript/card.js

@@ -4,34 +4,20 @@ semantic.card = {};
 semantic.card.ready = function() {
 
   // selector cache
-  var 
-    $card = $('.ui.product.cards .card, .ui.product.card, .ui.idea.cards .card, .ui.idea.card'),
+  var
+    $icon = $('.card .icon, .card .corner.label'),
     handler
   ;
 
   handler = {
 
-    randomProgress: function(index) {
-      var $this = $(this);
-      setTimeout(function() {
-        $this
-          .find('.bar')
-            .css('width', Math.floor(Math.random() * 100) + '%')
-        ;
-      }, index * 200);
-    }
 
   };
 
-  $.api.settings.api = {
-    vote   : '/api.json',
-    follow : '/api.json'
-  };
-
-  $card
-    .card()
+  $icon
+    .state()
   ;
-  
+
 };
 
 

src/definitions/views/card.less

@@ -82,6 +82,18 @@
   z-index: @zIndex;
 }
 
+.ui.cards > .row > .card > :first-child,
+.ui.cards > .card > :first-child,
+.ui.card > :first-child {
+  border-radius: @borderRadius @borderRadius 0em 0em !important;
+}
+
+.ui.cards > .row > .card > :last-child,
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0em 0em @borderRadius @borderRadius !important;
+}
+
 
 .ui.cards a.card,
 .ui.cards .card a,
@@ -108,6 +120,7 @@ a.ui.cards {
   width: 100%;
   height: auto;
   border-radius: @imageBorderRadius;
+  border: @imageBorder;
 }
 
 .ui.cards .card > .image:only-child > img,
@@ -159,11 +172,11 @@ a.ui.cards {
 .ui.cards .card > .content > .header,
 .ui.card > .content > .header {
   display: block;
-  margin: @titleMargin;
-  font-family: @titleFont;
-  font-weight: @titleFontWeight;
-  font-size: @titleFontSize;
-  color: @titleColor;
+  margin: @headerMargin;
+  font-family: @headerFont;
+  font-weight: @headerFontWeight;
+  font-size: @headerFontSize;
+  color: @headerColor;
 }
 .ui.cards .card > .content > .meta + .description,
 .ui.cards .card > .content > .header + .description,
@@ -221,6 +234,7 @@ a.ui.cards {
 
 .ui.cards .card .meta,
 .ui.card .meta {
+  font-size: @metaFontSize;
   color: @metaColor;
 }
 .ui.cards .card .meta *,
@@ -232,103 +246,125 @@ a.ui.cards {
   margin-right: 0em;
 }
 
+.ui.cards .card .meta .right.floated,
+.ui.card .meta .right.floated {
+  margin-right: 0em;
+  margin-left: @metaSpacing;
+}
+
 /*--------------
-     Labels
+      Links
 ---------------*/
 
-/*-----Star----- */
-
-/* hover */
-.ui.cards .card .star.label:hover::after,
-.ui.card .star.label:hover::after {
-  border-right-color: #F6EFC3;
+/* Generic */
+.ui.cards .card > .content a,
+.ui.card > .content a {
+  color: @contentLinkColor;
 }
-.ui.cards .card .star.label:hover::after,
-.ui.card .star.label:hover::after {
-  border-top-color: #F6EFC3;
-}
-.ui.cards .card .star.label:hover .icon,
-.ui.card .star.label:hover .icon {
-  color: #AC9400
+.ui.cards .card > .content a:hover,
+.ui.card > .content a:hover {
+  color: @contentLinkHoverColor;
 }
 
-/* active */
-.ui.cards .card .star.label.active::after,
-.ui.card .star.label.active::after {
-  border-right-color: #F6EFC3;
+/* Header */
+.ui.cards .card > .content > a.header,
+.ui.card > .content > a.header {
+  color: @headerLinkColor;
+}
+.ui.cards .card > .content > a.header:hover,
+.ui.card > .content > a.header:hover {
+  color: @headerLinkHoverColor;
 }
-.ui.cards .card .star.label.active::after,
-.ui.card .star.label.active::after {
-  border-top-color: #F6EFC3;
+
+/* Meta */
+.ui.cards .card .meta a,
+.ui.card .meta a {
+  color: @metaLinkColor;
 }
-.ui.cards .card .star.label.active .icon,
-.ui.card .star.label.active .icon {
-  color: #AC9400
+.ui.cards .card .meta a:hover,
+.ui.card .meta a:hover {
+  color: @metaLinkHoverColor;
 }
 
-/*-----Like----- */
 
-/* hover */
-.ui.cards .card .like.label:hover::after,
-.ui.card .like.label:hover::after {
-  border-right-color: #F5E1E2;
+
+/*--------------
+     Labels
+---------------*/
+
+/*-----Star----- */
+
+/* Icon */
+.ui.cards .card > .content .star.icon,
+.ui.card > .content .star.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
 }
-.ui.cards .card .like.label.active::after,
-.ui.card .like.label.active::after {
-  border-top-color: #F5E1E2;
+.ui.cards .card > .content .star.icon:hover,
+.ui.card > .content .star.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @starColor;
 }
-.ui.cards .card .like.label:hover .icon,
-.ui.card .like.label:hover .icon {
-  color: #EF404A
+.ui.cards .card > .content .active.star.icon,
+.ui.card > .content .active.star.icon {
+  color: @starActiveColor;
 }
-/* active */
-.ui.cards .card .like.label.active::after,
-.ui.card .like.label.active::after {
-  border-right-color: #F5E1E2;
+
+/*-----Like----- */
+
+/* Icon */
+.ui.cards .card > .content .like.icon,
+.ui.card > .content .like.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
 }
-.ui.cards .card .like.label.active::after,
-.ui.card .like.label.active::after {
-  border-top-color: #F5E1E2;
+.ui.cards .card > .content .like.icon:hover,
+.ui.card > .content .like.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @likeColor;
 }
-.ui.cards .card .like.label.active .icon,
-.ui.card .like.label.active .icon {
-  color: #EF404A
+.ui.cards .card > .content .active.like.icon,
+.ui.card > .content .active.like.icon {
+  color: @likeActiveColor;
 }
 
-
-
-/*--------------
+/*----------------
   Extra Content
----------------*/
+-----------------*/
 
 .ui.cards .card .extra,
 .ui.card .extra {
   position: @extraDisplay;
+  background: @extraBackground;
   width: @extraWidth;
   padding: @extraPadding;
   top: @extraTop;
   left: @extraLeft;
   color: @extraColor;
+  box-shadow: @extraBoxShadow;
   transition: @extraTransition;
   border-top: @extraDivider;
 }
 
-/*******************************
-           States
-*******************************/
-
-.ui.cards .card:hover,
-.ui.card:hover {
-  cursor: @hoverCursor;
-  z-index: @hoverZIndex;
-  border: @hoverBorder;
-  box-shadow: @hoverBoxShadow;
-}
 
 /*******************************
            Variations
 *******************************/
 
+/*-------------------
+        Link
+--------------------*/
+
+.ui.link.cards .card:hover,
+.ui.link.card:hover {
+  cursor: pointer;
+  z-index: @linkHoverZIndex;
+  background: @linkHoverBackground;
+  border: @linkHoverBorder;
+  box-shadow: @linkHoverBoxShadow;
+}
 
 /*-------------------
       Responsive

src/themes/packages/basic/views/card.variables

@@ -0,0 +1,26 @@
+/*******************************
+             Card
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+@width: 250px;
+@background: transparent;
+@border: none;
+@boxShadow: none;
+
+@contentPadding: 1em 0em;
+
+@extraBackground: transparent;
+@extraDivider: none;
+@extraBoxShadow: none;
+
+@headerFontSize: 1.2em;
+
+@imageBorderRadius: @borderRadius;
+@imageBorder: 1px solid @borderColor;
+
+
+

src/themes/packages/default/views/card.variables

@@ -1,13 +1,14 @@
 /*******************************
-             Item
+             Card
 *******************************/
+
 /*-------------------
          View
 --------------------*/
 
 /* Shadow */
-@shadowDistance: 3px;
-@shadowBoxShadow: 0px 3px 0px 0px @solidBorderColor;
+@shadowDistance: 0px;
+@shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
 
 /* Item */
 @background: #FFFFFF;
@@ -39,6 +40,7 @@
 /* Image */
 @imageBackground: @transparentBlack;
 @imagePadding: 0em;
+@imageBorder: none;
 @imageBorderRadius: @borderRadius @borderRadius 0em 0em;
 @imageBoxShadow: none;
 @imageBorder: none;
@@ -52,17 +54,34 @@
 @contentBorderRadius: 0em;
 @contentBoxShadow: none;
 
-/* Title */
-@titleMargin: 0em;
-@titleFont: @headerFont;
-@titleFontWeight: bold;
-@titleFontSize: 1.25em;
-@titleColor: @darkTextColor;
+/* Header */
+@headerMargin: 0em;
+@headerFontWeight: bold;
+@headerFontSize: 1.25em;
+@headerColor: @darkTextColor;
 
 /* Metadata */
+@metaFontSize: 0.9em;
 @metaSpacing: 0.3em;
 @metaColor: @lightTextColor;
 
+/* Icons */
+@actionOpacity: 0.75;
+@actionHoverOpacity: 1;
+@actionTransition: color @transitionDuration @transitionEasing;
+@starColor: #AC9400;
+@starActiveColor: #E9B539;
+@likeColor: #FFADAE;
+@likeActiveColor: #EF404A;
+
+/* Links */
+@contentLinkColor: @linkColor;
+@contentLinkHoverColor: @linkHoverColor;
+@headerLinkColor: @headerColor;
+@headerLinkHoverColor: @linkHoverColor;
+@metaLinkColor: @lightTextColor;
+@metaLinkHoverColor: @textColor;
+
 /* Description */
 @descriptionDistance: 0.75em;
 @descriptionColor: rgba(0, 0, 0, 0.5);
@@ -79,33 +98,31 @@
 @paragraphDistance: 0.5em;
 
 /* Additional Content */
-@extraDivider: none;
+@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
+@extraBackground: #FAFAFA linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 @extraDisplay: static;
 @extraTop: 0em;
 @extraLeft: 0em;
 @extraWidth: 100%;
-@extraPadding: 0.5em 1em;
+@extraPadding: 0.75em 1em;
+@extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 @extraColor: @lightTextColor;
 @extraTransition: color @transitionDuration @transitionEasing;
 
 /*-------------------
-       States
+      Variations
 --------------------*/
 
-@shadowHoverBoxShadow: 0px 3px 0px 0px @solidSelectedBorderColor;
+/* Link */
+@linkHoverBackground: '';
+@linkHoverBorder: none;
+@linkHoverZIndex: 5;
 
-@hoverCursor: pointer;
-@hoverZIndex: 5;
-@hoverBorder: none;
-@hoverBoxShadow:
+@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
+@linkHoverBoxShadow:
   @shadowHoverBoxShadow,
   0px 0px 0px 1px @selectedBorderColor
 ;
 
-
-/*-------------------
-      Variations
---------------------*/
-
 /* Sizes */
 @medium: 1em;