From 0155035a11db61430f5bfdd0080f41b80b94a204 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 12 Feb 2018 18:47:06 -0500
Subject: [PATCH] Updating docs

---
 src-docs/src/views/card/card.js         |  4 ++--
 src-docs/src/views/card/card_example.js | 20 +++++++++++++++-----
 src/components/panel/_panel.scss        |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js
index d8882cd51cc..eadc9f474df 100644
--- a/src-docs/src/views/card/card.js
+++ b/src-docs/src/views/card/card.js
@@ -9,9 +9,9 @@ import {
 
 const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana'];
 
-const cardNodes = icons.map(function (item) {
+const cardNodes = icons.map(function (item, index) {
   return (
-    <EuiFlexItem>
+    <EuiFlexItem key={index}>
       <EuiCard
         icon={<EuiIcon size="xxl" type={`logo${item}`} />}
         title={`Elastic ${item}`}
diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
index 5ae139f02d6..c35f977e27e 100644
--- a/src-docs/src/views/card/card_example.js
+++ b/src-docs/src/views/card/card_example.js
@@ -36,7 +36,9 @@ export const CardExample = {
     }],
     text: (
       <p>
-        Description needed: how to use the <EuiCode>EuiCard</EuiCode> component.
+        At it&apos;s core an <EuiCode>EuiCard</EuiCode> should contain a <EuiCode>title</EuiCode>,
+        <EuiCode>description</EuiCode>, and an <EuiCode>icon</EuiCode>. You can make the whole card
+        clickable by giving it an <EuiCode>onClick</EuiCode> handler.
       </p>
     ),
     props: { EuiCard },
@@ -52,9 +54,15 @@ export const CardExample = {
       code: cardImageHtml,
     }],
     text: (
-      <p>
-        Description needed: how to use the <EuiCode>EuiCard</EuiCode> component.
-      </p>
+      <div>
+        <p>
+          Images can be added in place of, or in conjuction with, icons.
+          Just pass a url into the <EuiCode>image</EuiCode> prop and it will expand to to edges of the card.
+        </p>
+        <p>
+          Make sure that all images are the <strong>same proportions</strong> when used in a singular row.
+        </p>
+      </div>
     ),
     components: { EuiCard },
     demo: <CardImage />,
@@ -70,7 +78,9 @@ export const CardExample = {
     }],
     text: (
       <p>
-        Description needed: how to use the <EuiCode>EuiCard</EuiCode> component.
+        Footers can contain any number of elements and will always align to the bottom of the card.
+        However, if you supply a footer containing a <EuiCode>EuiButton</EuiCode> you <strong>must not</strong> also
+        give it an <EuiCode>onClick</EuiCode>.
       </p>
     ),
     components: { EuiCard },
diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss
index d3c0c4da494..1ea7de5e22a 100644
--- a/src/components/panel/_panel.scss
+++ b/src/components/panel/_panel.scss
@@ -25,8 +25,8 @@
 
     &:hover,
     &:focus {
-      transform: translateY(-2px);
       @include euiSlightShadowHover;
+      transform: translateY(-2px);
       cursor: pointer;
     }
   }