diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataList.d.ts
new file mode 100644
index 00000000000..b728102feda
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataList.d.ts
@@ -0,0 +1,10 @@
+import { SFC, HTMLProps } from 'react';
+import {  Omit } from '../../typeUtils';
+
+export interface DataListProps extends Omit<HTMLProps<HTMLUListElement>, 'aria-label'> {
+  'aria-label': string;
+}
+
+declare const DataList: SFC<DataListProps>;
+
+export default DataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js b/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js
new file mode 100644
index 00000000000..727fafbe76a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataList.docs.js
@@ -0,0 +1,44 @@
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListCheck,
+  DataListAction,
+  DataListContent,
+  DataListToggle
+} from '@patternfly/react-core';
+import Simple from './examples/SimpleDataList';
+import CheckboxAction from './examples/CheckboxActionDataList';
+import Expandable from './examples/ExpandableDataList';
+import Modifiers from './examples/ModifiersDataList';
+
+export default {
+  title: 'DataList',
+  components: {
+    DataList,
+    DataListItem,
+    DataListCell,
+    DataListCheck,
+    DataListAction,
+    DataListContent,
+    DataListToggle
+  },
+  examples: [
+    {
+      component: Simple,
+      title: 'Data List Simple'
+    },
+    {
+      component: CheckboxAction,
+      title: 'Data List Checkboxes, Actions and Additional Cells'
+    },
+    {
+      component: Expandable,
+      title: 'Data List Expandable'
+    },
+    {
+      component: Modifiers,
+      title: 'Data List Width Modifiers'
+    }
+  ]
+};
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.js b/packages/patternfly-4/react-core/src/components/DataList/DataList.js
new file mode 100644
index 00000000000..4b42f7e4c08
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataList.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+import boxShStyles from '@patternfly/patternfly-next//utilities/BoxShadow/box-shadow.css';
+
+const DataList = ({ children, className, 'aria-label': ariaLabel, ...props }) => {
+  return (
+    <ul className={css(styles.dataList, boxShStyles.boxShadowMd, className)} role="list" aria-label={ariaLabel} {...props}>
+      {children}
+    </ul>
+  );
+};
+
+DataList.propTypes = {
+  /** Content rendered inside the DataList list */
+  children: PropTypes.node,
+  /** Additional classes added to the DataList list */
+  className: PropTypes.string,
+  /** Adds accessible text to the DataList list */
+  'aria-label': PropTypes.string.isRequired
+};
+
+DataList.defaultProps = {
+  children: null,
+  className: '',
+};
+
+export default DataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.test.js b/packages/patternfly-4/react-core/src/components/DataList/DataList.test.js
new file mode 100644
index 00000000000..9a42cd6f958
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataList.test.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import DataList from './DataList';
+import DataListItem from './DataListItem';
+import DataListCell from './DataListCell';
+import DataListToggle from './DataListToggle';
+import { Button } from '../Button';
+
+describe('DataList', () => {
+  test('List default', () => {
+    const view = shallow(<DataList aria-label="this is a simple list" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('List', () => {
+    const view = shallow(<DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Item default', () => {
+    const view = shallow(<DataListItem key="item-id-1" aria-labelledby="item-1" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Item expanded', () => {
+    const view = shallow(<DataListItem aria-labelledby="item-1" isExpanded />);
+    expect(view.props().className).toBe('pf-c-data-list__item pf-m-expanded');
+  });
+
+  test('Item', () => {
+    const view = shallow(<DataListItem className="data-list-item-custom" aria-labelledby="item-1" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Cell default', () => {
+    const view = shallow(<DataListCell>Secondary</DataListCell>);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Cell', () => {
+    const view = shallow(
+      <DataListCell key="list-id-1" id="primary-item" className="data-list-custom">
+        Primary Id
+      </DataListCell>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('Cell with width modifier', () => {
+    [
+      { width: 1, class: '' },
+      { width: 2, class: 'pf-m-flex-2' },
+      { width: 3, class: 'pf-m-flex-3' },
+      { width: 4, class: 'pf-m-flex-4' },
+      { width: 5, class: 'pf-m-flex-5' }
+    ].forEach(testCase => {
+      const view = shallow(
+        <DataListCell width={testCase.width} key="list-id-1" id="primary-item">
+          Primary Id
+        </DataListCell>
+      );
+      testCase.class === ''
+        ? expect(view.props().className).toBe('pf-c-data-list__cell')
+        : expect(view.props().className).toBe(`pf-c-data-list__cell ${testCase.class}`);
+    });
+  });
+
+  test('Toggle default', () => {
+    const view = shallow(
+      <DataListToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
+    );
+
+    expect(view.find(Button).props()['aria-label']).toBe('Toggle details for');
+    expect(view.find(Button).props()['aria-labelledby']).toBe('ex-toggle2 ex-item2');
+    expect(view.find(Button).props()['aria-expanded']).toBe('false');
+    expect(view.find(Button).props().id).toBe('ex-toggle2');
+    expect(view.find(Button).props().id).toBe('ex-toggle2');
+  });
+
+  test('Toggle expanded', () => {
+    const view = shallow(
+      <DataListToggle
+        aria-label="Toggle details for"
+        aria-labelledby="ex-toggle2 ex-item2"
+        id="ex-toggle2"
+        isExpanded
+      />
+    );
+    expect(view.find(Button).props()['aria-expanded']).toBe('true');
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.d.ts
new file mode 100644
index 00000000000..1d8b957b05a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.d.ts
@@ -0,0 +1,11 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface DataListActionProps extends HTMLProps<HTMLDivElement> {
+  'aria-labelledby': string;
+  'aria-label': string;
+  id: string;
+}
+
+declare const DataListAction: SFC<DataListActionProps>;
+
+export default DataListAction;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
new file mode 100644
index 00000000000..bf078db70d5
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { Button } from '../Button';
+
+const DataListAction = ({ className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) => (
+  <div className={css(styles.dataListAction, className)} {...props}>
+    <Button variant="plain" id={id} aria-labelledby={ariaLabelledBy} aria-label={ariaLabel}>
+      <EllipsisVIcon />
+    </Button>
+  </div>
+);
+
+DataListAction.propTypes = {
+  /** Content rendered inside the DataList list */
+  children: PropTypes.node,
+  /** Additional classes added to the DataList list */
+  className: PropTypes.string,
+  /** Identify the DataList toggle number */
+  id: PropTypes.string.isRequired,
+  /** Adds accessible text to the DataList item */
+  'aria-labelledby': PropTypes.string.isRequired,
+  /** Adds accessible text to the DataList item */
+  'aria-label': PropTypes.string.isRequired
+};
+
+DataListAction.defaultProps = {
+  children: null,
+  className: ''
+};
+
+export default DataListAction;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListCell.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListCell.d.ts
new file mode 100644
index 00000000000..f0d8c2562bc
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListCell.d.ts
@@ -0,0 +1,9 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface DataListCellProps extends HTMLProps<HTMLDivElement> {
+  width: 1 | 2 | 3 | 4 | 5;
+}
+
+declare const DataListCell: SFC<DataListCellProps>;
+
+export default DataListCell;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListCell.js b/packages/patternfly-4/react-core/src/components/DataList/DataListCell.js
new file mode 100644
index 00000000000..e5bd9521544
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListCell.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { css, getModifier } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+
+const DataListCell = ({ children, className, width, ...props }) => (
+  <div
+    className={css(styles.dataListCell, width > 1 && getModifier(styles, `flex_${width}`, ''), className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+DataListCell.propTypes = {
+  /** Content rendered inside the DataList cell */
+  children: PropTypes.node,
+  /** Additional classes added to the DataList cell */
+  className: PropTypes.string,
+  /** Width (from 1-5) to the DataList cell */
+  width: PropTypes.oneOf([1, 2, 3, 4, 5])
+};
+
+DataListCell.defaultProps = {
+  children: null,
+  className: '',
+  width: 1
+};
+
+export default DataListCell;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.d.ts
new file mode 100644
index 00000000000..8ee5dc249bd
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.d.ts
@@ -0,0 +1,15 @@
+import { HTMLProps, FormEvent, ReactNode } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface DataListCheckProps
+  extends Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'aria-labelledby'> {
+  isDisabled?: boolean;
+  isValid?: boolean;
+  isChecked?: boolean;
+  onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  'aria-labelledby': string;
+}
+
+declare const DataListCheck: React.SFC<DataListCheckProps>;
+
+export default DataListCheck;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.js b/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.js
new file mode 100644
index 00000000000..c174ad31dc9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListCheck.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+import checkboxStyles from '@patternfly/patternfly-next/components/Check/check.css';
+
+const DataListCheck = ({ className, onChange, isValid, isDisabled, isChecked, checked, ...props }) => (
+  <div className={css(styles.dataListCheck, className)}>
+    <input
+      {...props}
+      className={css(checkboxStyles.checkInput)}
+      type="checkbox"
+      onChange={event => onChange(event.currentTarget.checked, event)}
+      aria-invalid={!isValid}
+      disabled={isDisabled}
+      checked={isChecked || checked}
+    />
+  </div>
+);
+
+DataListCheck.propTypes = {
+  /** Additional classes added to the DataList item checkbox */
+  className: PropTypes.string,
+  /** Flag to show if the DataList checkbox selection is valid or invalid */
+  isValid: PropTypes.bool,
+  /** Flag to show if the DataList checkbox is disabled */
+  isDisabled: PropTypes.bool,
+  /** Flag to show if the DataList checkbox is checked */
+  isChecked: PropTypes.bool,
+  /** A callback for when the DataList checkbox selection changes */
+  onChange: PropTypes.func,
+  /** Aria-labelledby of the DataList checkbox */
+  'aria-labelledby': PropTypes.string.isRequired
+};
+
+DataListCheck.defaultProps = {
+  className: '',
+  isValid: true,
+  isDisabled: false,
+  isChecked: null,
+  onChange: () => undefined
+};
+
+export default DataListCheck;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListContent.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.d.ts
new file mode 100644
index 00000000000..d48121587c1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.d.ts
@@ -0,0 +1,11 @@
+import { SFC, HTMLProps } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface DataListContentProps extends Omit<HTMLProps<HTMLElement>, 'aria-label'> {
+  isHidden: boolean;
+  'aria-label': string;
+}
+
+declare const DataListContent: SFC<DataListContentProps>;
+
+export default DataListContent;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js
new file mode 100644
index 00000000000..2a633d03c8f
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.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/DataList/styles.css';
+
+const DataListContent = ({ className, children, isHidden, 'aria-label': ariaLabel, ...props }) => (
+  <section
+    className={css(styles.dataListExpandableContent, className)}
+    hidden={isHidden}
+    aria-label={ariaLabel}
+    {...props}
+  >
+    {children}
+  </section>
+);
+
+DataListContent.propTypes = {
+  /** Content rendered inside the DataList item */
+  children: PropTypes.node,
+  /** Additional classes added to the DataList cell */
+  className: PropTypes.string,
+  /** Flag to show if the expanded content of the DataList item is visible */
+  isHidden: PropTypes.bool,
+  /** Adds accessible text to the DataList toggle */
+  'aria-label': PropTypes.string.isRequired
+};
+
+DataListContent.defaultProps = {
+  className: '',
+  isHidden: false
+};
+
+export default DataListContent;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListItem.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.d.ts
new file mode 100644
index 00000000000..ee60ddd29a1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.d.ts
@@ -0,0 +1,11 @@
+import { SFC, HTMLProps } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface DataListItemProps extends Omit<HTMLProps<HTMLLIElement>, 'aria-label'> {
+  isExpanded: boolean;
+  'aria-labelledby': string;
+}
+
+declare const DataListItem: SFC<DataListItemProps>;
+
+export default DataListItem;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js
new file mode 100644
index 00000000000..eed7a6fd29d
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+
+const DataListItem = ({ children, className, isExpanded, 'aria-labelledby': ariaLabelledBy, ...props }) => (
+  <li
+    className={css(styles.dataListItem, isExpanded && styles.modifiers.expanded, className)}
+    aria-labelledby={ariaLabelledBy}
+    {...props}
+  >
+    {children}
+  </li>
+);
+
+DataListItem.propTypes = {
+  /** Flag to show if the expanded content of the DataList item is visible */
+  isExpanded: PropTypes.bool,
+  /** Content rendered inside the DataList item */
+  children: PropTypes.node,
+  /** Additional classes added to the DataList item */
+  className: PropTypes.string,
+  /** Adds accessible text to the DataList item */
+  'aria-labelledby': PropTypes.string.isRequired
+};
+
+DataListItem.defaultProps = {
+  isExpanded: false,
+  children: null,
+  className: ''
+};
+
+export default DataListItem;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.d.ts
new file mode 100644
index 00000000000..ca5bab001f9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.d.ts
@@ -0,0 +1,13 @@
+import { SFC, HTMLProps } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface DataListToggleProps extends Omit<HTMLProps<HTMLDivElement>, 'aria-labelledby' | 'aria-label' | 'id'> {
+  isExpanded: boolean;
+  'aria-labelledby': string;
+  'aria-label': string;
+  id: string;
+}
+
+declare const DataListToggle: SFC<DataListToggleProps>;
+
+export default DataListToggle;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js
new file mode 100644
index 00000000000..3b6cf550176
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import { AngleRightIcon, AngleLeftIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/patternfly-next/components/DataList/styles.css';
+import { Button } from '../Button';
+
+const DataListToggle = ({
+  className,
+  isExpanded,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  id,
+  ...props
+}) => (
+  <div className={css(styles.dataListToggle, className)} {...props}>
+    <Button
+      id={id}
+      variant="plain"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-expanded={`${isExpanded}`}
+    >
+      <AngleRightIcon />
+    </Button>
+  </div>
+);
+
+DataListToggle.propTypes = {
+  /** Additional classes added to the DataList cell */
+  className: PropTypes.string,
+  /** Flag to show if the expanded content of the DataList item is visible */
+  isExpanded: PropTypes.bool,
+  /** Identify the DataList toggle number */
+  id: PropTypes.string.isRequired,
+  /** Adds accessible text to the DataList toggle */
+  'aria-labelledby': PropTypes.string.isRequired,
+  /** Adds accessible text to the DataList toggle */
+  'aria-label': PropTypes.string.isRequired
+};
+
+DataListToggle.defaultProps = {
+  className: '',
+  isExpanded: false
+};
+
+export default DataListToggle;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
new file mode 100644
index 00000000000..c7412816abf
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataList Cell 1`] = `
+.pf-c-data-list__cell.data-list-custom {
+  display: block;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+<div
+  className="pf-c-data-list__cell data-list-custom"
+  id="primary-item"
+>
+  Primary Id
+</div>
+`;
+
+exports[`DataList Cell default 1`] = `
+.pf-c-data-list__cell {
+  display: block;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+<div
+  className="pf-c-data-list__cell"
+>
+  Secondary
+</div>
+`;
+
+exports[`DataList Item 1`] = `
+.pf-c-data-list__item.data-list-item-custom {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: baseline;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+
+<li
+  aria-labelledby="item-1"
+  className="pf-c-data-list__item data-list-item-custom"
+/>
+`;
+
+exports[`DataList Item default 1`] = `
+.pf-c-data-list__item {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: baseline;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+
+<li
+  aria-labelledby="item-1"
+  className="pf-c-data-list__item"
+/>
+`;
+
+exports[`DataList List 1`] = `
+.pf-c-data-list.pf-u-box-shadow-md.data-list-custom {
+  display: block;
+  list-style-type: disc;
+  background-color: #ffffff;
+  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
+}
+
+<ul
+  aria-label="this is a simple list"
+  className="pf-c-data-list pf-u-box-shadow-md data-list-custom"
+  role="list"
+/>
+`;
+
+exports[`DataList List default 1`] = `
+.pf-c-data-list.pf-u-box-shadow-md {
+  display: block;
+  list-style-type: disc;
+  background-color: #ffffff;
+  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
+}
+
+<ul
+  aria-label="this is a simple list"
+  className="pf-c-data-list pf-u-box-shadow-md"
+  role="list"
+/>
+`;
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js
new file mode 100644
index 00000000000..8d32f8714b1
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/examples/CheckboxActionDataList.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataList, DataListItem, DataListCell, DataListCheck, DataListAction } from '@patternfly/react-core';
+
+class CheckboxActionDataList extends React.Component {
+  render() {
+    return (
+      <DataList aria-label="Checkbox and action data list example">
+        <DataListItem aria-labelledby="check-action-item1">
+          <DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
+          <DataListCell>
+            <span id="check-action-item1">Primary content</span>
+          </DataListCell>
+          <DataListCell>Secondary content</DataListCell>
+          <DataListAction
+            aria-labelledby="check-action-item1 check-action-action1"
+            id="check-action-action1"
+            aria-label="Actions"
+          />
+        </DataListItem>
+        <DataListItem aria-labelledby="check-action-item2">
+          <DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
+          <DataListCell>
+            <span id="check-action-item2">Primary content - Lorem ipsum</span> dolor sit amet, consectetur adipisicing
+            elit, sed do eiusmod.
+          </DataListCell>
+          <DataListCell>Secondary content</DataListCell>
+          <DataListAction
+            aria-labelledby="check-action-item2 check-action-action2"
+            id="check-action-action2"
+            aria-label="Actions"
+          />
+        </DataListItem>
+      </DataList>
+    );
+  }
+}
+
+export default CheckboxActionDataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js
new file mode 100644
index 00000000000..7c6ca1e4db5
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/examples/ExpandableDataList.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListToggle,
+  DataListContent,
+  DataListCheck,
+  DataListAction
+} from '@patternfly/react-core';
+
+class ExpandableDataList extends React.Component {
+  state = {
+    expanded: ['ex-toggle1']
+  };
+
+  render() {
+    const toggle = id => {
+      const expanded = this.state.expanded;
+      const index = expanded.indexOf(id);
+      const newExpanded =
+        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+      this.setState(() => ({ expanded: newExpanded }));
+    };
+    return (
+      <DataList aria-label="Expandable data list example">
+        <DataListItem aria-labelledby="ex-item1" isExpanded={this.state.expanded.includes('ex-toggle1')}>
+          <DataListToggle
+            onClick={() => toggle('ex-toggle1')}
+            isExpanded={this.state.expanded.includes('ex-toggle1')}
+            id="ex-toggle1"
+            aria-labelledby="ex-toggle1 ex-item1"
+            aria-label="Toggle details for"
+          />
+          <DataListCheck aria-labelledby="ex-item1" name="ex-check1" />
+          <DataListCell>
+            <div id="ex-item1">Primary content</div>
+            <a href="#">link</a>
+          </DataListCell>
+          <DataListCell>
+            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+          </DataListCell>
+          <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions" />
+          <DataListContent aria-label="Primary Content Details" isHidden={!this.state.expanded.includes('ex-toggle1')}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="ex-item2" isExpanded={this.state.expanded.includes('ex-toggle2')}>
+          <DataListToggle
+            onClick={() => toggle('ex-toggle2')}
+            isExpanded={this.state.expanded.includes('ex-toggle2')}
+            id="ex-toggle2"
+            aria-labelledby="ex-toggle2 ex-item2"
+            aria-label="Toggle details for"
+          />
+          <DataListCheck aria-labelledby="ex-item2" name="ex-check2" />
+          <DataListCell>
+            <div id="ex-item2">Primary content</div>
+          </DataListCell>
+          <DataListCell>
+            <span>Lorem ipsum dolor sit amet.</span>
+          </DataListCell>
+          <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions" />
+          <DataListContent aria-label="Primary Content Details" isHidden={!this.state.expanded.includes('ex-toggle2')}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    );
+  }
+}
+
+export default ExpandableDataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js
new file mode 100644
index 00000000000..b203c5f9722
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/examples/ModifiersDataList.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import { DataList, DataListItem, DataListCell, DataListCheck, DataListAction } from '@patternfly/react-core';
+
+class ModifiersDataList extends React.Component {
+  state = { show: true }
+  render() {
+    const previewPlaceholder = {
+      display: 'block',
+      width: '100%',
+      padding: '.25rem .5rem',
+      color: '#004e8a',
+      backgroundColor: '#def3ff',
+      border: '1px solid rgba(0,0,0,.1)',
+      borderRadius: '4px'
+    };
+
+    return [
+      <div key="example-1">
+        <h2>Default fitting - example 1</h2>
+        <DataList aria-label="Width modifier data list example 1">
+          <DataListItem aria-labelledby="width-ex1-item1">
+            <DataListCheck aria-labelledby="width-ex1-check1" name="width-ex1-item1" />
+            <DataListCell>
+              <div style={previewPlaceholder}>
+                <b id="width-ex1-item1">default</b>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+              </div>
+            </DataListCell>
+            <DataListCell>
+              <div style={previewPlaceholder}>
+                <b>default</b>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                  et dolore magna aliqua.
+                </p>
+              </div>
+            </DataListCell>
+          </DataListItem>
+        </DataList>
+      </div>,
+      <div key="example-2">
+        <h2>Flex modifiers - example 2</h2>
+        <DataList aria-label="Width modifier data list example 2">
+          <DataListItem aria-labelledby="width-ex2-item1">
+            <DataListCheck aria-labelledby="width-ex2-check1" name="width-ex2-check1" />
+            <DataListCell width={2}>
+              <div style={previewPlaceholder}>
+                <b id="width-ex2-item1">width 2</b>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+              </div>
+            </DataListCell>
+            <DataListCell width={4}>
+              <div style={previewPlaceholder}>
+                <b>width 4</b>
+                <p>Lorem ipsum dolor sit amet.</p>
+              </div>
+            </DataListCell>
+            <DataListAction
+              aria-labelledby="width-ex2-item1 width-ex2-action1"
+              id="width-ex2-action1"
+              aria-label="Actions"
+            />
+          </DataListItem>
+        </DataList>
+      </div>,
+      <div key="example-3">
+        <h2>Flex modifiers - example 3</h2>
+        <DataList aria-label="Width modifier data list example 3">
+          <DataListItem aria-labelledby="width-ex3-item1" isExpanded={this.state.show}>
+            <DataListToggle
+              isExpanded={this.state.show}
+              id="width-ex3-toggle1"
+              aria-labelledby="width-ex3-toggle1 width-ex3-item1"
+              aria-label="Toggle details for"
+              onClick={() => this.setState({show: !this.state.show})}
+            />
+            <DataListCheck aria-labelledby="width-ex3-check1" name="width-ex3-check1" />
+            <DataListCell width={5}>
+              <div style={previewPlaceholder}>
+                <b id="width-ex3-item1">width 5</b>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+              </div>
+            </DataListCell>
+            <DataListCell width={2}>
+              <div style={previewPlaceholder}>
+                <b>width 2</b>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+              </div>
+            </DataListCell>
+            <DataListCell>
+              <div style={previewPlaceholder}>default</div>
+            </DataListCell>
+            <DataListAction
+              aria-labelledby="width-ex3-item1 width-ex3-action1"
+              id="width-ex3-action1"
+              aria-label="Actions"
+            />
+            <DataListContent aria-label="Primary Content Details" isHidden={!this.state.show}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
+              </p>
+            </DataListContent>
+          </DataListItem>
+        </DataList>
+      </div>
+    ];
+  }
+}
+
+export default ModifiersDataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js
new file mode 100644
index 00000000000..ee12b7443cf
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/examples/SimpleDataList.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { DataList, DataListItem, DataListCell } from '@patternfly/react-core';
+
+class SimpleDataList extends React.Component {
+  render() {
+    return (
+      <DataList aria-label="Simple data list example">
+        <DataListItem aria-labelledby="simple-item1">
+          <DataListCell>
+            <span id="simple-item1">Primary content</span>
+          </DataListCell>
+          <DataListCell>
+            Secondary content
+          </DataListCell>
+        </DataListItem>
+        <DataListItem aria-labelledby="simple-item2">
+          <DataListCell>
+            <span id="simple-item2">Second list item title</span>
+          </DataListCell>
+          <DataListCell>
+            Secondary content
+          </DataListCell>
+        </DataListItem>
+      </DataList>
+    );
+  }
+}
+
+export default SimpleDataList;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/index.d.ts b/packages/patternfly-4/react-core/src/components/DataList/index.d.ts
new file mode 100644
index 00000000000..d4cc66186cb
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/index.d.ts
@@ -0,0 +1,7 @@
+export { default as DataList } from './DataList';
+export { default as DataListItem } from './DataListItem';
+export { default as DataListCell } from './DataListCell';
+export { default as DataListCheck } from './DataListCheck';
+export { default as DataListAction } from './DataListAction';
+export { default as DataListToggle } from './DataListToggle';
+export { default as DataListContent } from './DataListContent';
diff --git a/packages/patternfly-4/react-core/src/components/DataList/index.js b/packages/patternfly-4/react-core/src/components/DataList/index.js
new file mode 100644
index 00000000000..d4cc66186cb
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/index.js
@@ -0,0 +1,7 @@
+export { default as DataList } from './DataList';
+export { default as DataListItem } from './DataListItem';
+export { default as DataListCell } from './DataListCell';
+export { default as DataListCheck } from './DataListCheck';
+export { default as DataListAction } from './DataListAction';
+export { default as DataListToggle } from './DataListToggle';
+export { default as DataListContent } from './DataListContent';
diff --git a/packages/patternfly-4/react-core/src/components/index.d.ts b/packages/patternfly-4/react-core/src/components/index.d.ts
index 3a071ffb637..65543c32f94 100644
--- a/packages/patternfly-4/react-core/src/components/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/index.d.ts
@@ -10,6 +10,7 @@ export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './DataList';
 export * from './Dropdown';
 export * from './Form';
 export * from './Label';
diff --git a/packages/patternfly-4/react-core/src/components/index.js b/packages/patternfly-4/react-core/src/components/index.js
index 3a071ffb637..65543c32f94 100644
--- a/packages/patternfly-4/react-core/src/components/index.js
+++ b/packages/patternfly-4/react-core/src/components/index.js
@@ -10,6 +10,7 @@ export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './DataList';
 export * from './Dropdown';
 export * from './Form';
 export * from './Label';