diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index e620ab64..567a71a4 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -165,6 +165,46 @@ const avatar = [
}
];
+const horizontal = [
+ {
+ name: 'Alternative Layout Example',
+ component: (
+
+
+
+
+
+
+
+
+
+
+ )
+ }, {
+ name: 'Another Variation',
+ component: (
+
+
+
+
+
+
+ )
+ }
+];
+
const small = [
{
name: 'Small Media Card',
@@ -184,23 +224,20 @@ const small = [
)
}, {
- name: 'Alternative Layout Example',
+ name: 'Small Media Controls',
component: (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
)
}
@@ -231,6 +268,12 @@ class CardTest extends React.Component {
))}
+
+ {horizontal.map((demo, i) => (
+
+ ))}
+
+
{small.map((demo, i) => (
diff --git a/spec/style.scss b/spec/style.scss
index 0374f323..ca036ce4 100644
--- a/spec/style.scss
+++ b/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;
+ }
}