Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/Card/Card.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+    Card as BsCard
+} from 'reactstrap';
+
+import classes from './Card.scss';
+
+const Card = (props) => {
+    const { children, type, color, className, ...otherProps } = props;
+    const cardClass = classNames(className,
+        classes['custom-card'],
+        classes[`custom-card--${ type }`],
+        color && classes[`custom-card--color-${ color }`]
+    );
+    return (
+        <BsCard className={ cardClass } { ...otherProps }>
+            { children }
+        </BsCard>
+    );
+}
+Card.propTypes = {
+    ...BsCard.propTypes,
+    type: PropTypes.string,
+    color: PropTypes.string
+};
+Card.defaultProps = {
+    type: 'border',
+    color: null
+};
+
+export { Card };

app/components/Card/Card.scss

@@ -0,0 +1,52 @@
+@import "../../styles/variables";
+
+.custom-card {
+    &--border-dash,
+    &--border-dot,
+    &--border {
+        @each $name, $color in $dashboard-colors {
+            &.custom-card--color-#{$name} {
+                border-color: $color
+            }
+        }
+    }
+
+    &--side-border {
+        border-left-width: 2px;
+
+        @each $name, $color in $dashboard-colors {
+            &.custom-card--color-#{$name} {
+                border-left-color: $color
+            }
+        }
+    }
+
+    &--background {
+        color: map-get($dashboard-colors, 'white');
+
+        @each $name, $color in $dashboard-colors {
+            &.custom-card--color-#{$name} {
+               background-color: $color; 
+            }
+        }
+    }
+
+    &--border-dash {
+        border-style: dashed;
+        border-width: 2px;
+    }
+
+    &--border-dot {
+        border-style: dotted;
+        border-width: 2px;
+    }
+
+    &--shadow {
+        box-shadow: 0 1px 2px 0 rgba(31, 45, 61, 0.07);
+    }
+
+    &--none {
+        border: none;
+        background: none;
+    }
+}

app/components/Card/index.js

@@ -0,0 +1,3 @@
+import { Card } from './Card';
+
+export default Card;