Fetch posts frm wp on blog page

src/components/Card.js

@@ -4,24 +4,28 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
-    <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+  <article
+    key={props.postId}
+    className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg"
+  >
+    <Link to={props.url}>
+      <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+    </Link>
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">
-        How we do remote design sprints
+        {props.title} - {props.date}
       </div>
-      <p className="text-grey-darker text-base">
-        It’s amazing how design can impact business and people making the world
-        a better and a friendlier place. Knowing the how important design today
-        is, here’s a complete rundown of our design process in it’s fully glory.
-      </p>
+      <p
+        className="text-grey-darker text-base"
+        dangerouslySetInnerHTML={{ __html: props.excerpt }}
+      />
     </div>
     <div className="px-6 py-4">
       <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
         #workstyle
       </span>
     </div>
-  </div>
+  </article>
 )
 
 export default Card