diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.d.ts b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.d.ts
new file mode 100644
index 00000000000..7accfa0b224
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.d.ts
@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBox: SFC<LoginBoxProps>;
+
+export default LoginBox;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.docs.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.docs.js
new file mode 100644
index 00000000000..1cced0119a9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.docs.js
@@ -0,0 +1,13 @@
+import { LoginBox, LoginBoxHeader, LoginBoxBody, LoginBoxFooter } from '@patternfly/react-core';
+import Simple from './examples/SimpleLoginBox';
+
+export default {
+  title: 'LoginBox',
+  components: {
+    LoginBox,
+    LoginBoxHeader,
+    LoginBoxBody,
+    LoginBoxFooter
+  },
+  examples: [Simple]
+};
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.js
new file mode 100644
index 00000000000..5bf2fc69715
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBox = ({ className, children, ...props }) => (
+  <div {...props} className={css(styles.loginBox, className)}>
+    {children}
+  </div>
+);
+
+LoginBox.propTypes = propTypes;
+LoginBox.defaultProps = defaultProps;
+
+export default LoginBox;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.test.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.test.js
new file mode 100644
index 00000000000..31eaa2fb636
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.test.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import LoginBox from './LoginBox';
+import LoginBoxBody from './LoginBoxBody';
+import LoginBoxHeader from './LoginBoxHeader';
+import LoginBoxFooter from './LoginBoxFooter';
+
+const LoginBoxContent = () => (
+  <React.Fragment>
+    <LoginBox>
+      <LoginBoxHeader>LoginBox Header</LoginBoxHeader>
+      <LoginBoxBody>LoginBox Body</LoginBoxBody>
+      <LoginBoxFooter>LoginBox Footer</LoginBoxFooter>
+    </LoginBox>
+  </React.Fragment>
+);
+
+test('simple LoginBox', () => {
+  const view = mount(<LoginBoxContent />);
+  expect(view).toMatchSnapshot();
+});
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBox />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBox className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox';
+  const view = shallow(<LoginBox data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.d.ts b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.d.ts
new file mode 100644
index 00000000000..72c0b5fe253
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.d.ts
@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxBodyProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxBody: SFC<LoginBoxBodyProps>;
+
+export default LoginBoxBody;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.js
new file mode 100644
index 00000000000..d0560a617db
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Body */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Body */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxBody = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxBody, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxBody.propTypes = propTypes;
+LoginBoxBody.defaultProps = defaultProps;
+
+export default LoginBoxBody;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.test.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.test.js
new file mode 100644
index 00000000000..02893512a66
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxBody from './LoginBoxBody';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxBody />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxBody className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-body';
+  const view = shallow(<LoginBoxBody data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.d.ts b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.d.ts
new file mode 100644
index 00000000000..2c65bc101a4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.d.ts
@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxFooterProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxFooter: SFC<LoginBoxFooterProps>;
+
+export default LoginBoxFooter;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.js
new file mode 100644
index 00000000000..909adb35472
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Footer */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Footer */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxFooter = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxFooter, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxFooter.propTypes = propTypes;
+LoginBoxFooter.defaultProps = defaultProps;
+
+export default LoginBoxFooter;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.test.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.test.js
new file mode 100644
index 00000000000..e5cf18d7444
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxFooter from './LoginBoxFooter';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxFooter />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxFooter className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-body';
+  const view = shallow(<LoginBoxFooter data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.d.ts b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.d.ts
new file mode 100644
index 00000000000..e5788271b9e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.d.ts
@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxHeaderProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxHeader: SFC<LoginBoxHeaderProps>;
+
+export default LoginBoxHeader;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.js
new file mode 100644
index 00000000000..c126b13ef94
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Header */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Header */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxHeader = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxHeader, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxHeader.propTypes = propTypes;
+LoginBoxHeader.defaultProps = defaultProps;
+
+export default LoginBoxHeader;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.test.js b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.test.js
new file mode 100644
index 00000000000..21275d4250d
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxHeader from './LoginBoxHeader';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxHeader />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxHeader className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-header';
+  const view = shallow(<LoginBoxHeader data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBox.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBox.test.js.snap
new file mode 100644
index 00000000000..5bca7f9109b
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBox.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-login-box extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+}
+
+<div
+  className="pf-c-login-box"
+/>
+`;
+
+exports[`simple LoginBox 1`] = `
+.pf-c-login-box__header {
+  display: block;
+  padding: 3rem 3rem 1rem 3rem;
+}
+.pf-c-login-box__body {
+  display: block;
+  padding: 2rem 3rem 2rem 3rem;
+}
+.pf-c-login-box__footer {
+  display: block;
+  padding: 2rem 3rem 4rem 3rem;
+}
+.pf-c-login-box {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+}
+
+<LoginBoxContent>
+  <LoginBox
+    className=""
+  >
+    <div
+      className="pf-c-login-box"
+    >
+      <LoginBoxHeader
+        className=""
+      >
+        <div
+          className="pf-c-login-box__header"
+        >
+          LoginBox Header
+        </div>
+      </LoginBoxHeader>
+      <LoginBoxBody
+        className=""
+      >
+        <div
+          className="pf-c-login-box__body"
+        >
+          LoginBox Body
+        </div>
+      </LoginBoxBody>
+      <LoginBoxFooter
+        className=""
+      >
+        <div
+          className="pf-c-login-box__footer"
+        >
+          LoginBox Footer
+        </div>
+      </LoginBoxFooter>
+    </div>
+  </LoginBox>
+</LoginBoxContent>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxBody.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxBody.test.js.snap
new file mode 100644
index 00000000000..d85dc692708
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxBody.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-login-box__body extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__body {
+  display: block;
+  padding: 2rem 3rem 2rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__body"
+/>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxFooter.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxFooter.test.js.snap
new file mode 100644
index 00000000000..13dd6a009a6
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxFooter.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-login-box__footer extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__footer {
+  display: block;
+  padding: 2rem 3rem 4rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__footer"
+/>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxHeader.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxHeader.test.js.snap
new file mode 100644
index 00000000000..31b698aac16
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxHeader.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-login-box__header extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__header {
+  display: block;
+  padding: 3rem 3rem 1rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__header"
+/>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/examples/SimpleLoginBox.js b/packages/patternfly-4/react-core/src/components/LoginBox/examples/SimpleLoginBox.js
new file mode 100644
index 00000000000..73743beaced
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/examples/SimpleLoginBox.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { LoginBox, LoginBoxHeader, LoginBoxBody, LoginBoxFooter } from '@patternfly/react-core';
+
+class SimpleLoginBox extends React.Component {
+  static title = 'Simple LoginBox';
+
+  render() {
+    return (
+      <LoginBox>
+        <LoginBoxHeader>LoginBox Header</LoginBoxHeader>
+        <LoginBoxBody>LoginBox Body</LoginBoxBody>
+        <LoginBoxFooter>LoginBox Footer</LoginBoxFooter>
+      </LoginBox>
+    );
+  }
+}
+
+export default SimpleLoginBox;
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/index.d.ts b/packages/patternfly-4/react-core/src/components/LoginBox/index.d.ts
new file mode 100644
index 00000000000..1797e9d6fd4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/index.d.ts
@@ -0,0 +1,4 @@
+export { default as LoginBox, LoginBoxProps } from './LoginBox';
+export { default as LoginBoxHeader, LoginBoxHeaderProps } from './LoginBoxHeader';
+export { default as LoginBoxBody, LoginBoxBodyProps } from './LoginBoxBody';
+export { default as LoginBoxFooter, LoginBoxFooterProps } from './LoginBoxFooter';
diff --git a/packages/patternfly-4/react-core/src/components/LoginBox/index.js b/packages/patternfly-4/react-core/src/components/LoginBox/index.js
new file mode 100644
index 00000000000..8601862da15
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/LoginBox/index.js
@@ -0,0 +1,4 @@
+export { default as LoginBox } from './LoginBox';
+export { default as LoginBoxHeader } from './LoginBoxHeader';
+export { default as LoginBoxBody } from './LoginBoxBody';
+export { default as LoginBoxFooter } from './LoginBoxFooter';
diff --git a/packages/patternfly-4/react-core/src/components/index.js b/packages/patternfly-4/react-core/src/components/index.js
index e9898ed0fb9..3f3a787a842 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 './Card';
 export * from './Checkbox';
 export * from './Dropdown';
 export * from './List';
+export * from './LoginBox';
 export * from './Modal';
 export * from './Nav';
 export * from './Progress';