diff --git a/packages/react-core/src/components/Card/Card.d.ts b/packages/react-core/src/components/Card/Card.d.ts
new file mode 100644
index 00000000000..966163ae45a
--- /dev/null
+++ b/packages/react-core/src/components/Card/Card.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardProps>;
+}
+
+declare const Card: SFC<CardProps>;
+
+export default Card;
diff --git a/packages/react-core/src/components/Card/Card.js b/packages/react-core/src/components/Card/Card.js
new file mode 100644
index 00000000000..9737bc2b033
--- /dev/null
+++ b/packages/react-core/src/components/Card/Card.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'article'
+};
+
+const Card = ({ children, className, component: Component, ...props }) => (
+  <Component className={css(styles.card, className)} {...props}>
+    {children}
+  </Component>
+);
+
+Card.propTypes = propTypes;
+Card.defaultProps = defaultProps;
+
+export default Card;
diff --git a/packages/react-core/src/components/Card/Card.test.js b/packages/react-core/src/components/Card/Card.test.js
new file mode 100644
index 00000000000..704a8c6d850
--- /dev/null
+++ b/packages/react-core/src/components/Card/Card.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<Card />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<Card className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card';
+  const view = shallow(<Card data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'section';
+  const view = shallow(<Card component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<Card component={Component} />);
+  expect(view.type()).toBe(Component);
+});
diff --git a/packages/react-core/src/components/Card/CardBody.d.ts b/packages/react-core/src/components/Card/CardBody.d.ts
new file mode 100644
index 00000000000..fa49208475c
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardBody.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardBodyProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardBodyProps>;
+}
+
+declare const CardBody: SFC<CardBodyProps>;
+
+export default CardBody;
diff --git a/packages/react-core/src/components/Card/CardBody.js b/packages/react-core/src/components/Card/CardBody.js
new file mode 100644
index 00000000000..bce4ab2964f
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardBody.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardBody = ({ children, className, component: Component, ...props }) => (
+  <Component className={css(styles.cardBody, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardBody.propTypes = propTypes;
+CardBody.defaultProps = defaultProps;
+
+export default CardBody;
diff --git a/packages/react-core/src/components/Card/CardBody.test.js b/packages/react-core/src/components/Card/CardBody.test.js
new file mode 100644
index 00000000000..4209d987047
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardBody.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import CardBody from './CardBody';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardBody />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardBody className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-body';
+  const view = shallow(<CardBody data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'section';
+  const view = shallow(<CardBody component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardBody component={Component} />);
+  expect(view.type()).toBe(Component);
+});
diff --git a/packages/react-core/src/components/Card/CardFooter.d.ts b/packages/react-core/src/components/Card/CardFooter.d.ts
new file mode 100644
index 00000000000..c4c4881d64e
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardFooter.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardFooterProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardFooterProps>;
+}
+
+declare const CardFooter: SFC<CardFooterProps>;
+
+export default CardFooter;
diff --git a/packages/react-core/src/components/Card/CardFooter.js b/packages/react-core/src/components/Card/CardFooter.js
new file mode 100644
index 00000000000..0772e29e61d
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardFooter.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardFooter = ({
+  children,
+  className,
+  component: Component,
+  ...props
+}) => (
+  <Component className={css(styles.cardFooter, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardFooter.propTypes = propTypes;
+CardFooter.defaultProps = defaultProps;
+
+export default CardFooter;
diff --git a/packages/react-core/src/components/Card/CardFooter.test.js b/packages/react-core/src/components/Card/CardFooter.test.js
new file mode 100644
index 00000000000..ab0a9d50dd0
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardFooter.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import CardFooter from './CardFooter';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardFooter />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardFooter className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-footer';
+  const view = shallow(<CardFooter data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'div';
+  const view = shallow(<CardFooter component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardFooter component={Component} />);
+  expect(view.type()).toBe(Component);
+});
diff --git a/packages/react-core/src/components/Card/CardHeader.d.ts b/packages/react-core/src/components/Card/CardHeader.d.ts
new file mode 100644
index 00000000000..805efeb9317
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardHeader.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardHeaderProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardHeaderProps>;
+}
+
+declare const CardHeader: SFC<CardHeaderProps>;
+
+export default CardHeader;
diff --git a/packages/react-core/src/components/Card/CardHeader.js b/packages/react-core/src/components/Card/CardHeader.js
new file mode 100644
index 00000000000..f664e7a8a62
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardHeader.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardHeader = ({
+  children,
+  className,
+  component: Component,
+  ...props
+}) => (
+  <Component className={css(styles.cardHeader, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardHeader.propTypes = propTypes;
+CardHeader.defaultProps = defaultProps;
+
+export default CardHeader;
diff --git a/packages/react-core/src/components/Card/CardHeader.test.js b/packages/react-core/src/components/Card/CardHeader.test.js
new file mode 100644
index 00000000000..268aa44a248
--- /dev/null
+++ b/packages/react-core/src/components/Card/CardHeader.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import CardHeader from './CardHeader';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardHeader />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardHeader className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-footer';
+  const view = shallow(<CardHeader data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'div';
+  const view = shallow(<CardHeader component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardHeader component={Component} />);
+  expect(view.type()).toBe(Component);
+});
diff --git a/packages/react-core/src/components/Card/__snapshots__/Card.test.js.snap b/packages/react-core/src/components/Card/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000000..28f032d6dc4
--- /dev/null
+++ b/packages/react-core/src/components/Card/__snapshots__/Card.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  box-shadow: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.2);
+}
+
+<article
+  className="pf-c-card"
+/>
+`;
diff --git a/packages/react-core/src/components/Card/__snapshots__/CardBody.test.js.snap b/packages/react-core/src/components/Card/__snapshots__/CardBody.test.js.snap
new file mode 100644
index 00000000000..172bfcd0d54
--- /dev/null
+++ b/packages/react-core/src/components/Card/__snapshots__/CardBody.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card__body extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__body {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__body"
+/>
+`;
diff --git a/packages/react-core/src/components/Card/__snapshots__/CardFooter.test.js.snap b/packages/react-core/src/components/Card/__snapshots__/CardFooter.test.js.snap
new file mode 100644
index 00000000000..9d8645bfd55
--- /dev/null
+++ b/packages/react-core/src/components/Card/__snapshots__/CardFooter.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card__footer extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__footer {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__footer"
+/>
+`;
diff --git a/packages/react-core/src/components/Card/__snapshots__/CardHeader.test.js.snap b/packages/react-core/src/components/Card/__snapshots__/CardHeader.test.js.snap
new file mode 100644
index 00000000000..df74eddafa1
--- /dev/null
+++ b/packages/react-core/src/components/Card/__snapshots__/CardHeader.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card__header extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__header {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__header"
+/>
+`;
diff --git a/packages/react-core/src/components/Card/index.d.ts b/packages/react-core/src/components/Card/index.d.ts
new file mode 100644
index 00000000000..5dc55f61145
--- /dev/null
+++ b/packages/react-core/src/components/Card/index.d.ts
@@ -0,0 +1,4 @@
+export { default as Card, CardProps } from './Card';
+export { default as CardBody, CardBodyProps } from './CardBody';
+export { default as CardFooter, CardFooterProps } from './CardFooter';
+export { default as CardHeader, CardHeaderProps } from './CardHeader';
diff --git a/packages/react-core/src/components/Card/index.js b/packages/react-core/src/components/Card/index.js
new file mode 100644
index 00000000000..95e3ff79336
--- /dev/null
+++ b/packages/react-core/src/components/Card/index.js
@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';
diff --git a/packages/react-core/src/components/index.d.ts b/packages/react-core/src/components/index.d.ts
index fc3e152fdff..aaa85f78ea8 100644
--- a/packages/react-core/src/components/index.d.ts
+++ b/packages/react-core/src/components/index.d.ts
@@ -1,4 +1,5 @@
 export * from './Badge';
 export * from './Button';
+export * from './Card';
 export * from './Title';
 export * from './Alert';
diff --git a/packages/react-core/src/components/index.js b/packages/react-core/src/components/index.js
index fc3e152fdff..aaa85f78ea8 100644
--- a/packages/react-core/src/components/index.js
+++ b/packages/react-core/src/components/index.js
@@ -1,4 +1,5 @@
 export * from './Badge';
 export * from './Button';
+export * from './Card';
 export * from './Title';
 export * from './Alert';
diff --git a/packages/react-docs/src/pages/components/card.js b/packages/react-docs/src/pages/components/card.js
new file mode 100644
index 00000000000..6a05b51d28a
--- /dev/null
+++ b/packages/react-docs/src/pages/components/card.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import ComponentDocs from '../../components/componentDocs';
+import PropTypes from 'prop-types';
+import { Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
+import Example from '../../components/example';
+
+const propTypes = {
+  data: PropTypes.any.isRequired
+};
+
+const CardDocs = ({ data }) => (
+  <ComponentDocs data={data}>
+    <Example title="Basic Card">
+      <Card>
+        <CardHeader>Card Header</CardHeader>
+        <CardBody>Card Body</CardBody>
+        <CardFooter>Card Footer</CardFooter>
+      </Card>
+    </Example>
+  </ComponentDocs>
+);
+
+CardDocs.propTypes = propTypes;
+
+export const query = graphql`
+  query CardDocsQuery {
+    componentMetadata(displayName: { eq: "Card" }) {
+      ...ComponentDocs
+    }
+  }
+`;
+
+export default CardDocs;