feat-added-card

src/components/Card/Card.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Card.scss';
+
+export default function Card({ title, body }) {
+  return (
+    <div className="card">
+      <h2>{title}</h2>
+      <span className="separator" />
+      <p>{body}</p>
+    </div>
+  );
+}
+
+Card.propTypes = {
+  title: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+};
+
+Card.defaultProps = {};

src/components/Card/Card.scss

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css2?family=Headland+One&family=Open+Sans&display=swap');
+
+.card {
+  width: 60vw;
+  background: whitesmoke;
+  padding: 1rem 1.5rem 1.8rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px 10px 10px 10px;
+  -moz-border-radius: 10px 10px 10px 10px;
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border: 1px solid #6b6b6b;
+}
+
+.card h2 {
+  font-family: 'Headland One', serif;
+  margin-bottom: 0;
+  border: none;
+}
+
+.card p {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.separator {
+  border: 0.5px solid rgba(66, 66, 66, 0.438);
+  width: 60%;
+  margin: 1rem 0 1rem 0;
+}

src/components/index.js

@@ -6,3 +6,4 @@ export { default as SimpleButton } from './SimpleButton/SimpleButton';
 export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll';
 export { default as Tabs } from './Tabs/Tabs';
 export { default as RadioButton } from './RadioButton/RadioButton';
+export { default as Card } from './Card/Card';

src/demos/CardDemo.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import Card from '../components/Card/Card';
+import simpleButtonPath from '../docs/card.md';
+
+const HeadingDemo = () => {
+  const [markdown, setMarkdown] = useState('');
+
+  useEffect(() => {
+    fetch(simpleButtonPath)
+      .then((response) => response.text())
+      .then((text) => {
+        setMarkdown(text);
+      });
+  });
+
+  return (
+    <>
+      <ReactMarkdown source={markdown} />
+      <Card
+        title="Heading"
+        body="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores et a repellendus magnam, illum aut quod molestiae. Ipsam mollitia vero, iure repellat deleniti ea, qui repellendus praesentium iste pariatur fugit!"
+      />
+    </>
+  );
+};
+
+export default HeadingDemo;

src/docs/card.md

@@ -0,0 +1,27 @@
+## Usage 
+
+```
+import React from 'react'
+import Card from '../components/Card'
+
+function App() {
+  return (
+    <div className="App">
+       <Card
+       title="Title Goes here"
+       body="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores et a repellendus magnam, illum aut quod molestiae. Ipsam mollitia vero, iure repellat deleniti ea, qui repellendus praesentium iste pariatur fugit!" 
+       />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Properties
+
+Property | Type | Required | Default value | Description
+:--- | :--- | :--- | :--- | :---
+`title`|string|yes|Title| The title that you want to put.
+`body`|string|yes|Body| Body of the card.
+

src/exports/exports.js

@@ -3,3 +3,4 @@ export { default as SimpleButtonDemo } from '../demos/SimpleButtonDemo';
 export { default as HeadingDemo } from '../demos/HeadingDemo';
 export { default as AvatarDemo } from '../demos/AvatarDemo';
 export { default as ProgressBarDemo } from '../demos/ProgressBarDemo';
+export { default as CardDemo } from '../demos/CardDemo';