feat(components): ✨ created card component

content/editing/rich_content/custom_components.md

@@ -164,6 +164,41 @@ Some _tip_ text
 <Info>Some **info** text</Info>
 <Error>Some _warning/error_ text</Error>
 
+## Card
+
+Card can be used to distinguish a text and make it stand out.
+Other components can be used inside card.
+
+**Syntax**
+
+```html
+<Card>Here goes some one-liner text</Card>
+
+<Card>
+
+*Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
+luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
+
+*Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
+luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
+
+</Card>
+```
+
+**Example**
+
+<Card>Here goes some one-liner text</Card>
+
+<Card>
+
+*Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
+luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
+
+*Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
+luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
+
+</Card>
+
 ## Link Card
 
 Link card can be used to distinguish a link and make it

src/components/MdxComponents/card.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from 'emotion-theming';
+import { ArrowRight } from 'react-feather';
+import { shadowAround } from '../../styles';
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  transition: ${(props) => props.theme.transitions.hover};
+`;
+
+export default ({ ...props }) => {
+  return <Card css={shadowAround} {...props} />;
+};

src/components/MdxComponents/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Accordion from './accordion';
 import AnchorTag from './anchor';
 import Badge from './badge';
+import Card from './card';
 import CodeBlock from './codeBlock';
 import Highlights from './highlights';
 import Icon from './icon';
@@ -74,6 +75,7 @@ export default {
   Layout,
   Icon,
   Accordion,
+  Card,
   LinkCard,
   ...Highlights,
 };

src/components/MdxComponents/linkCard.js

@@ -4,19 +4,13 @@ import { useTheme } from 'emotion-theming';
 import { ArrowRight } from 'react-feather';
 import emoji from '../../utils/emoji';
 import Link from '../Link';
-import { shadowAround } from '../../styles';
 import { decreaseIntensivity } from '../../utils/colors';
+import Card from './card';
 
-const BigLinkWrapper = styled.div`
-  display: flex;
+const LinkCard = styled(Card)`
   cursor: pointer;
-  width: 100%;
-  padding: 16px;
-  margin: 10px 0;
-  border-radius: 4px;
-  border: 1px solid transparent;
+  flex-direction: row;
   align-items: center;
-  transition: ${(props) => props.theme.transitions.hover};
   &:hover {
     border: 1px solid ${(props) => props.theme.colors.primary};
   }
@@ -41,11 +35,11 @@ export default ({ title, url }) => {
   const path = url.replace(/(https:\/\/)|(http:\/\/)/, '');
   return (
     <Link to={url}>
-      <BigLinkWrapper css={shadowAround}>
+      <LinkCard>
         <ArrowRight color={theme.colors.primary} size={23} />
         <Title>{emoji.emojify(title)}</Title>
         <LinkPath>{path}</LinkPath>
-      </BigLinkWrapper>
+      </LinkCard>
     </Link>
   );
 };