Few more variations added

spec/components/card.jsx

@@ -165,6 +165,46 @@ const avatar = [
   }
 ];
 
+const horizontal = [
+  {
+    name: 'Alternative Layout Example',
+    component: (
+      <Card className={style.card}>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.media}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+        <CardActions>
+          <Button label="Action 1" />
+          <Button label="Action 2" />
+        </CardActions>
+      </Card>
+    )
+  }, {
+    name: 'Another Variation',
+    component: (
+      <Card>
+        <div className={style.cardRow}>
+          <CardTitle
+            title="Title goes here"
+            subtitle="Subtitle here"
+          />
+          <CardMedia
+            className={style.mediaLarge}
+            image="https://placeimg.com/400/400/nature"
+          />
+        </div>
+      </Card>
+    )
+  }
+];
+
 const small = [
   {
     name: 'Small Media Card',
@@ -184,23 +224,20 @@ const small = [
       </Card>
     )
   }, {
-    name: 'Alternative Layout Example',
+    name: 'Small Media Controls',
     component: (
-      <Card className={style.card}>
+      <Card style={{width: '140px'}}>
-        <div className={style.cardRow}>
+        <CardMedia
-          <CardTitle
+          contentOverlay
-            title="Title goes here"
+          aspectRatio="square"
-            subtitle="Subtitle here"
+          image="https://placeimg.com/280/280/people"
-          />
+        >
-          <CardMedia
+          <CardActions style={{justifyContent: 'center'}}>
-            className={style.media}
+            <Button inverse toggle icon="fast-rewind" />
-            image="https://placeimg.com/400/400/nature"
+            <Button inverse toggle icon="play-arrow" />
-          />
+            <Button inverse toggle icon="fast-forward" />
-        </div>
+          </CardActions>
-        <CardActions>
+        </CardMedia>
-          <Button label="Action 1" />
-          <Button label="Action 2" />
-        </CardActions>
       </Card>
     )
   }
@@ -231,6 +268,12 @@ class CardTest extends React.Component {
           ))}
         </DemoList>
 
+        <DemoList>
+          {horizontal.map((demo, i) => (
+            <DemoListItem key={i} {...demo}/>
+          ))}
+        </DemoList>
+
         <DemoList>
           {small.map((demo, i) => (
             <DemoListItem key={i} {...demo}/>

spec/style.scss

@@ -103,4 +103,10 @@ $offset: 1.8 * $unit;
     height: 80px;
     margin: 16px 16px 0 0;
   }
+
+  .mediaLarge {
+    width: 140px;
+    height: 140px;
+    margin: 16px;
+  }
 }