feat(components): ✨ created image card component

content/editing/rich_content/custom_components.md

@@ -214,6 +214,24 @@ stand out from the text.
 
 <LinkCard title="This is the best page!" url="/editing/rich_content/custom_components" />
 
+## Image Card
+
+Link card can be used to distinguish a link and make it
+stand out from the text. 
+
+**Syntax**
+
+```html
+<ImageCard src="https://sites.google.com/site/mojeczolo/_/rsrc/1365421980319/nyan-cat/nyan_cat_wallpaper_by_nyakiru-d3e1zfl.png"> Here goes some text</ImageCard>
+```
+
+**Example**
+
+<ImageCard src="https://sites.google.com/site/mojeczolo/_/rsrc/1365421980319/nyan-cat/nyan_cat_wallpaper_by_nyakiru-d3e1zfl.png"> 
+
+Here goes :rocket: some text
+</ImageCard>
+
 ## Badges
 
 **Syntax**

src/components/MdxComponents/imageCard.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from 'emotion-theming';
+import Card from './card';
+
+const ImageCard = styled(Card)`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  @media (max-width: ${(props) => props.theme.breakpoints['small']}) {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const Image = styled.img`
+align-self: center;
+border-radius: 4px; 
+`;
+
+
+const Text = styled.p`
+margin-top: 15px;
+& > p:first-child {
+    margin-top: 0;
+}
+& > p:last-child {
+    margin-bottom: 0;
+}
+`;
+
+export default ({ children, width, height, src}) => {
+  const theme = useTheme();
+  const imgWidth = width ? width : '50%';
+  const imgHeight = width ? width : '50%';
+  return (
+      <ImageCard width={imgWidth} height={imgHeight}>
+        <Image src={src} />
+        <Text>{children}</Text>
+      </ImageCard>
+  );
+};

src/components/MdxComponents/index.js

@@ -7,6 +7,7 @@ import Card from './card';
 import CodeBlock from './codeBlock';
 import Highlights from './highlights';
 import Icon from './icon';
+import ImageCard from './imageCard';
 import Jargon from './jargon';
 import Layout from './layout';
 import LinkCard from './linkCard';
@@ -77,5 +78,6 @@ export default {
   Accordion,
   Card,
   LinkCard,
+  ImageCard,
   ...Highlights,
 };