pictures!

src/containers/About/About.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { Row, Col } from 'antd';
 import LayoutWrapper from '@imd/components/utility/layoutWrapper';
 import basicStyle from '@imd/assets/styles/constants';
+import { SingleCardWrapper } from './About.styles';
+import { SortableCardWrapper } from './About.styles';
+import people from './config';
 
 const styles = {
   wisgetPageStyle: {
@@ -24,6 +27,8 @@ const styles = {
 
 export default function() {
   const { rowStyle, colStyle } = basicStyle;
+  const listClass = `isoSingleCard card grid`;
+    const style = { zIndex: 100 };
   
   return (
     <LayoutWrapper style={{marginTop: "15px"}}>
@@ -42,6 +47,25 @@ export default function() {
             We are a pro-privacy group with the interest of our users first. We do not store any information you import into our site. We do not look at the information. You maintain full control and complete privacy!
           </Col>
         </Row>
+        <SortableCardWrapper
+      id="shuffle"
+      className={`isomorphicSortableCardsHolder grid`}
+    >
+        <div className="isoSortableCardsContainer">
+            <ul>
+        {people.map((person, idx) => (
+        <SingleCardWrapper id={person.id} className={listClass} style={style}>
+            <div className="isoCardImage">
+                <img alt="#" src={person.img} />
+            </div>
+            <div className="isoCardContent">
+                <h3 className="isoCardTitle">{person.desc}</h3>
+            </div>
+        </SingleCardWrapper>
+        ))};
+        </ul>
+        </div>
+        </SortableCardWrapper>
       </div>
     </LayoutWrapper>
   );

src/containers/About/About.styles.js

+import styled from 'styled-components';
+import { palette } from 'styled-theme';
+import {
+  transition,
+  borderRadius,
+  boxShadow,
+} from '@imd/lib/helpers/style_utils';
+import WithDirection from '@imd/lib/helpers/rtl';
+
+const WDSingleCardWrapper = styled.li`
+  padding: 15px;
+  background-color: #ffffff;
+  position: relative;
+  margin-bottom: 5px;
+  ${boxShadow('0 0 1px rgba(0,0,0,0.15)')};
+
+  .isoCardImage {
+    overflow: hidden;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    background-color: ${palette('grayscale', 6)};
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .isoCardContent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0 15px;
+
+    .isoCardTitle {
+      font-size: 14px;
+      font-weight: 500;
+      margin: 0 0 3px;
+    }
+  }
+
+  &.list {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .isoCardImage {
+      width: 20px;
+      height: 20px;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flex;
+      display: inline-flex;
+      ${borderRadius('50%')};
+    }
+  }
+
+  &.grid {
+    width: calc(100% / 3 - 15px);
+    display: flex;
+    flex-direction: column;
+    margin: 0 7px 15px;
+    padding: 0;
+
+    @media only screen and (max-width: 767px) {
+      width: calc(100% / 2 - 10px);
+      margin: 0 5px 10px;
+    }
+
+    @media only screen and (max-width: 480px) {
+      width: 100%;
+      margin-right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
+      margin-left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
+    }
+
+    @media only screen and (min-width: 1400px) {
+      width: calc(100% / 4 - 15px);
+      margin: 0 7px 15px;
+    }
+
+    .isoCardImage {
+      width: 100%;
+      height: 260px;
+      display: flex;
+
+      @media only screen and (min-width: 960px) {
+        height: 330px;
+      }
+    }
+
+    .isoCardContent {
+      padding: 15px;
+      margin: 0;
+    }
+
+    .isoDeleteBtn {
+      position: absolute;
+      top: 0;
+      right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
+      left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
+    }
+  }
+`;
+
+const WDSortableCardWrapper = styled.div`
+  padding: 50px 35px;
+
+  @media only screen and (max-width: 767px) {
+    padding: 30px 20px;
+  }
+
+  &.grid {
+    .isoSortableCardsContainer {
+        width: 100%;
+      ul {
+          list-style: none;
+          width: 100%;
+        display: flex;
+        flex-flow: row wrap;
+
+        li {
+            float: left;
+        }
+      }
+    }
+  }
+`;
+const SingleCardWrapper = WithDirection(WDSingleCardWrapper);
+const SortableCardWrapper = WithDirection(WDSortableCardWrapper);
+
+export { SingleCardWrapper, SortableCardWrapper };

src/containers/About/config.js

+import React from 'react';
+import Travis from '@imd/assets/images/travis.jpg';
+import Taylor from '@imd/assets/images/taylor.jpg';
+import Tiger from '@imd/assets/images/tiger.jpg';
+import Raj from '@imd/assets/images/raj.jpg';
+
+const people = [
+  {
+    id: 'a',
+    desc: 'Karthik Mohan Raj',
+    img: Raj,
+  },
+  {
+    id: 'b',
+    desc: 'Taylor Lansey',
+    img: Taylor,
+  },
+  {
+    id: 'c',
+    desc: 'Tiger Shi',
+    img: Tiger,
+  },
+  {
+    id: 'd',
+    desc: 'Travis Spuller',
+    img: Travis,
+  }
+];
+
+export default people;
\ No newline at end of file