cards atoms created

stories/Atom/Cards/Card-thumbnail/CardThumbnail.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './card-thumbnail.scss';
+import user from '../../../assets/images/card-thumbnail.jpg';
+
+export const Cardthumb = ({ }) => {
+    const image = {
+        src: user,
+        alt: 'Image',
+    }
+    return (
+      <div className="card_thumbnail__image"><img src={image.src} alt={image.alt} />   </div>  
+    );
+};

stories/Atom/Cards/Card-thumbnail/CardThumbnail.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { Cardthumb } from './CardThumbnail';
+
+<Meta title="Atoms/Cards/Card Thumbnail"/>
+
+<style>{`
+ .subheading {
+    font-weight: 700;
+    font-size: 24px;
+    color: #031c2d;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+  
+`}</style>  
+
+# Card Thumbnail Component
+The Card Thumbnail Component is used to embed an image on a web page.
+
+<Story name="Card Thumbnail">
+    return <Cardthumb> </Cardthumb> ;
+</Story>
+
+<div className="subheading">Usage</div>
+
+<ul>
+<li>Take HTML from the HTML tab in the canvas</li>
+<u>To use SCSS include the following files in your implementation</u>
+<li>Include the common SCSS files like mixin <code>assets/scss</code></li>
+<li>Component SCSS file <code>card-thumbnail.scss</code></li>
+<u>To use CSS include the following files in your implementation</u>
+<li>The compiled CSS file from <code>assets/css/style.css</code></li>
+</ul>

stories/Atom/Cards/Card-thumbnail/card-thumbnail.scss

@@ -0,0 +1,22 @@
+@import "../../../assets/scss/mixins";
+
+/* card_thumbnail__image start */
+.card_thumbnail__image {
+  position: relative;
+  display: inline-flex;
+    &::before {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    content: "";
+    width: 100%;
+    position: absolute;
+    @extend %img-hover-effect;
+    }
+    &:hover{
+      &::before { 
+        opacity: 0.75;
+      }
+    }
+}
+/* card_thumbnail__image end */

stories/Atom/Cards/Publication-thumbnail/PublicationThumbnail.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './publication-thumbnail.scss';
+import user from '../../../assets/images/publication-thumbnail.jpg';
+
+export const Publicationthumb = ({ }) => {
+    const image = {
+        src: user,
+        alt: 'Image',
+    }
+    return (
+        <div className="publication_thumbnail__image"><img src={image.src} alt={image.alt} /></div>  
+    );
+};

stories/Atom/Cards/Publication-thumbnail/PublicationThumbnail.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { Publicationthumb } from './PublicationThumbnail';
+
+<Meta title="Atoms/Cards/Publication Thumbnail"/>
+
+<style>{`
+ .subheading {
+    font-weight: 700;
+    font-size: 24px;
+    color: #031c2d;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+.usage {
+    font-weight: 700;
+    font-size: 15px;
+    color: #3d3e3e;
+    line-height: 24px;
+    margin-bottom: 3px;
+  }
+`}</style>  
+
+# Publication Thumbnail
+The Publication Thumbnail Component is used to embed an image on a publication page.
+
+<Story name="Publication Thumbnail">
+    return <Publicationthumb> </Publicationthumb> ;
+</Story>
+
+<div className="subheading">Usage</div>
+<ul>
+<li>Take HTML from the HTML tab in the canvas</li>
+<u>To use SCSS include the following files in your implementation</u>
+<li>Include the common SCSS files like mixin <code>assets/scss</code></li>
+<li>Component SCSS file <code>publication-thumbnail.scss</code></li>
+<u>To use CSS include the following files in your implementation</u>
+<li>The compiled CSS file from <code>assets/css/style.css</code></li>
+</ul>

stories/Atom/Cards/Publication-thumbnail/publication-thumbnail.scss

@@ -0,0 +1,40 @@
+@import "../../../assets/scss/mixins";
+
+/* publication_thumbnail */
+.publication_thumbnail__image {
+  padding: 35px 47px;
+  display: inline-flex;
+  position: relative;
+  z-index: 1;
+  background: linear-gradient( 180deg,#c9d0d6 70%,#c9d0d6 0,#414648 70.5%,#9ea5ac 0,#9ea5ac);
+  &::before {
+    content: "";
+    left: 32px;
+    z-index: -2;
+    right: 20px;
+    height: 27px;
+    bottom: 37px;
+    filter: blur(4px);
+    border-radius: 21%;
+    position: absolute;
+    transform: skewX(64deg);
+    background: #7b8085;
+    width: calc(100% - 100px);
+  }
+  &::after {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    content: "";
+    width: 100%;
+    position: absolute;
+    z-index: 99;
+    @extend %img-hover-effect;
+  }
+  &:hover{
+    &::after {
+      opacity: 0.75;
+    }
+  }
+}
+/* publication thumbnail end*/

stories/assets/scss/_mixins.scss

@@ -95,6 +95,12 @@
   border: 2px solid $color-dark-red;
 }
 
+%img-hover-effect {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  background-image: linear-gradient( 42deg, $color-yellow, transparent 80%);
+}
+
 //loader animation
 @mixin loader {
   animation: loader-animation 2s linear infinite;

stories/assets/scss/style.scss

@@ -23,6 +23,8 @@
 @import '../../Atom/Form/Radio/radio.scss';
 @import '../../Atom/Form/Checkbox/checkbox.scss';
 @import '../../Atom/Lists/lists.scss';
+@import '../../Atom/Cards/Card-thumbnail/card-thumbnail.scss';
+@import '../../Atom/Cards/Publication-thumbnail/publication-thumbnail.scss';
 
 // Reach Elemets Atoms
 @import '../../Atom/Reach-element/Details/details.scss';