Init

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

app/components/CardHeader/CardHeader.js

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

app/components/CardHeader/CardHeader.scss

@@ -0,0 +1,24 @@
+@import "../../styles/variables";
+
+.custom-card-header {
+    &--background {
+        color: map-get($dashboard-colors, "white");
+
+        @each $name, $color in $dashboard-colors {
+            &.custom-card-header--color-#{$name} {
+               background-color: $color; 
+            }
+        }
+    }
+
+    &--border {
+        @each $name, $color in $dashboard-colors {
+            border-bottom: 2px solid;
+            background: none;
+            
+            &.custom-card-header--color-#{$name} {
+               border-bottom-color: $color; 
+            }
+        }
+    }
+}

app/components/CardHeader/index.js

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