diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index 76c14ba454..498f851b9a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -5,6 +5,9 @@
 ////
 
 
+// Default background option
+$-sage-card-background: transparent;
+
 .sage-card {
   @include sage-card();
 
@@ -155,6 +158,26 @@
   @include sage-grid-card-row();
 }
 
+
+.sage-card--background-custom {
+  background: var(--sage-card-background, transparent);
+}
+
+@each $-color, $-sliders in $sage-colors {
+  @each $-number, $-configs in $-sliders {
+    .sage-card--background-#{"" + $-color}-#{$-number} {
+      background: #{sage-color($-color, $-number)};
+    }
+  }
+}
+
+.sage-card__header-layout {
+  width: calc(100% + #{2 * sage-spacing(card)});
+  margin: (-1 * sage-spacing(card)) (-1 * sage-spacing(card)) (-1 * sage-spacing(card));
+  border-top-left-radius: sage-border(radius-large);
+  border-top-right-radius: sage-border(radius-large);
+}
+
 .sage-card__list {
   padding: 0;
   margin: 0 -#{sage-spacing()};
diff --git a/packages/sage-react/lib/Card/Card.jsx b/packages/sage-react/lib/Card/Card.jsx
index 4ca40b8ed8..5b19857f57 100644
--- a/packages/sage-react/lib/Card/Card.jsx
+++ b/packages/sage-react/lib/Card/Card.jsx
@@ -5,6 +5,7 @@ import { Loader } from '../Loader';
 import { CardBlock } from './CardBlock';
 import { CardDivider } from './CardDivider';
 import { CardFigure } from './CardFigure';
+import { CardHeader } from './CardHeader';
 import { CardFooter } from './CardFooter';
 import { CardHighlight } from './CardHighlight';
 import { CardImage } from './CardImage';
@@ -52,6 +53,7 @@ export const Card = ({
 Card.Block = CardBlock;
 Card.Divider = CardDivider;
 Card.Figure = CardFigure;
+Card.Header = CardHeader;
 Card.Footer = CardFooter;
 Card.Highlight = CardHighlight;
 Card.Image = CardImage;
diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx
index 2e30d50e80..8361f78b1c 100644
--- a/packages/sage-react/lib/Card/Card.story.jsx
+++ b/packages/sage-react/lib/Card/Card.story.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { selectArgs } from '../story-support/helpers';
-import { SageTokens } from '../configs';
+import { SageTokens, SageClassnames } from '../configs';
 import { Button } from '../Button';
 import { Grid } from '../Grid';
 import { Icon } from '../Icon';
 import { Link } from '../Link';
 import { Card } from './Card';
+import { Frame } from '../Frame';
 
 export default {
   title: 'Sage/Card',
@@ -19,6 +20,7 @@ export default {
     },
   },
   subcomponents: {
+    'Card.Header': Card.Header,
     'Card.Title': Card.Title,
     'Card.Block': Card.Block,
     'Card.Stack': Card.Stack,
@@ -47,7 +49,6 @@ Default.decorators = [
 Default.args = {
   children: (
     <>
-      <Card.Title>Card Title</Card.Title>
       <Card.Title>Block (with Sage Type)</Card.Title>
       <Card.Block sageType={true}>
         <p>
@@ -133,6 +134,40 @@ Default.args = {
   ),
 };
 
+export const CardWithHeader = (args) => (
+  <Card>
+    <Card.Header background={args.background}>
+      <Frame padding={Frame.PADDINGS.SM} direction={Frame.DIRECTIONS.HORIZONTAL}>
+        <Frame direction={Frame.DIRECTIONS.VERTICAL} gap={Frame.GAPS.NONE}>
+          <p className={SageClassnames.TYPE.BODY_SMALL}>November 7, 2018</p>
+          <p className={SageClassnames.TYPE.BODY_SMALL_BOLD}>Order #12931820</p>
+        </Frame>
+        <Frame direction={Frame.DIRECTIONS.VERTICAL} gap={Frame.GAPS.NONE}>
+          <p className={SageClassnames.TYPE.BODY_SMALL}>Total</p>
+          <p className={SageClassnames.TYPE.BODY_SMALL_BOLD}>$623.98</p>
+        </Frame>
+      </Frame>
+    </Card.Header>
+    <Card.Row gridTemplate={SageTokens.GRID_TEMPLATES.ETE}>
+      <p>Main content goes here.</p>
+    </Card.Row>
+    <Card.Footer>
+      <Button color="secondary">Lorem ipsum</Button>
+      <Button>Dolor sit</Button>
+    </Card.Footer>
+  </Card>
+);
+
+CardWithHeader.args = {
+  background: SageTokens.COLOR_SLIDERS.GREY_200,
+};
+
+CardWithHeader.argTypes = {
+  ...selectArgs({
+    background: SageTokens.COLOR_SLIDERS
+  }),
+};
+
 export const InteractiveCard = () => (
   <Card interactive={true}>
     <Link className="sage-card__link--primary" href="//example.com">
diff --git a/packages/sage-react/lib/Card/CardHeader.jsx b/packages/sage-react/lib/Card/CardHeader.jsx
new file mode 100644
index 0000000000..35dd84c5ab
--- /dev/null
+++ b/packages/sage-react/lib/Card/CardHeader.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes, { oneOfType } from 'prop-types';
+import { SageTokens } from '../configs';
+
+export const CardHeader = ({ background, children, ...rest }) => {
+  const { style } = rest;
+  const styles = style || {};
+
+  const hasCustomBackground = background
+    && !Object.values(SageTokens.COLOR_SLIDERS).includes(background);
+
+  if (hasCustomBackground) {
+    styles['--sage-card-background'] = background;
+  }
+
+  return (
+    <div
+      className={
+        [
+          'sage-card__header-layout',
+          hasCustomBackground ? 'sage-card--background-custom' : '',
+          background && !hasCustomBackground ? `sage-card--background-${background}` : ''
+        ].filter((x) => x).join(' ')
+      }
+      {...rest}
+      style={styles}
+    >
+      {children}
+    </div>
+  );
+};
+
+CardHeader.defaultProps = {
+  background: SageTokens.COLOR_SLIDERS.GREY_200,
+  children: null,
+};
+
+CardHeader.propTypes = {
+  background: oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf(Object.values(SageTokens.COLOR_SLIDERS)),
+  ]),
+  children: PropTypes.node,
+};