diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0d39e4204ca..3f9e09541b14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
+- Added `restrictWidth` to `EuiPage` ([#896](https://github.com/elastic/eui/pull/896))
 - Added `resize` prop to `EuiTextArea` that defaults to ‘vertical’ (only height) ([#894](https://github.com/elastic/eui/pull/894))
 - Added multiple style-only adjustments to `EuiFormControlLayout` buttons/icons ([#894](https://github.com/elastic/eui/pull/894))
 - Shifted `readOnly` inputs to not have left padding unless it has an icon ([#894](https://github.com/elastic/eui/pull/894))
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index c70766030ac0..4905de52968b 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -34,11 +34,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%);
 }
 
-#guide {
-  margin: auto;
-  max-width: 1240px;
-}
-
 .guidePage {
   padding: 0;
 }
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index 4b59d761d5b8..f7c245d71f3e 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -52,7 +52,7 @@ export class AppView extends Component {
     const { navigation } = routes;
 
     return (
-      <EuiPage className="guidePage">
+      <EuiPage restrictWidth={1240} className="guidePage">
         <EuiPageBody>
           <EuiErrorBoundary>
             <GuidePageChrome
diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js
index 0228eab41a7e..7893ff9b8183 100644
--- a/src-docs/src/views/page/page_example.js
+++ b/src-docs/src/views/page/page_example.js
@@ -7,6 +7,7 @@ import {
 } from '../../components';
 
 import {
+  EuiCode,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
@@ -50,11 +51,20 @@ export const PageExample = {
       code: pageHtml,
     }],
     text: (
-      <p>
-        Page layouts are modular and have the ability to add or remove components
-        as needed for the design. These examples are colored for illustrative
-        purposes only.
-      </p>
+      <div>
+        <p>
+          Page layouts are modular and have the ability to add or remove components
+          as needed for the design. These examples are colored for illustrative
+          purposes only.
+        </p>
+        <p>
+          By default, the entire page will always be 100% of the window&apos;s width,
+          to max this out the typical width and center the page, set
+          the <EuiCode>restrictWidth</EuiCode> prop to <EuiCode>true</EuiCode>. You
+          can also pass an integer to this property to max out the width at a custom
+          size.
+        </p>
+      </div>
     ),
     props: {
       EuiPage,
diff --git a/src/components/page/__snapshots__/page.test.js.snap b/src/components/page/__snapshots__/page.test.js.snap
index da7d310892a9..923def06dd4e 100644
--- a/src/components/page/__snapshots__/page.test.js.snap
+++ b/src/components/page/__snapshots__/page.test.js.snap
@@ -3,7 +3,16 @@
 exports[`EuiPage is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage testClass1 testClass2"
+  class="euiPage euiPage--widthIsNotRestricted testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiPage sets a max-width 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPage euiPage--restrictWidth-custom testClass1 testClass2"
+  data-test-subj="test subject string"
+  style="max-width:1024px"
+/>
+`;
diff --git a/src/components/page/_page.scss b/src/components/page/_page.scss
index f0f30fc55a29..28ff7926aeb7 100644
--- a/src/components/page/_page.scss
+++ b/src/components/page/_page.scss
@@ -1,3 +1,14 @@
 .euiPage {
   padding: $euiSize;
+  background-color: $euiColorLightestShade;
+
+  &--restrictWidth-default,
+  &--restrictWidth-custom {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--restrictWidth-default {
+    max-width: 1000px;
+  }
 }
diff --git a/src/components/page/page.js b/src/components/page/page.js
index 322640c18fb4..11440815e3a3 100644
--- a/src/components/page/page.js
+++ b/src/components/page/page.js
@@ -2,12 +2,36 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiPage = ({ children, className, ...rest }) => {
-  const classes = classNames('euiPage', className);
+export const EuiPage = ({ children, className, restrictWidth, style, ...rest }) => {
+  let widthClassname;
+
+  if (restrictWidth === true) {
+    widthClassname = 'euiPage--restrictWidth-default';
+  } else if (restrictWidth === false) {
+    widthClassname = 'euiPage--widthIsNotRestricted';
+  } else {
+    widthClassname = 'euiPage--restrictWidth-custom';
+
+    // if style has been passed as a prop, add to it
+    if (style) {
+      style.maxWidth = `${restrictWidth}px`;
+    }
+    // otherwise create a new object
+    else {
+      style = { maxWidth: `${restrictWidth}px` };
+    }
+  }
+
+  const classes = classNames(
+    'euiPage',
+    widthClassname,
+    className,
+  );
 
   return (
     <div
       className={classes}
+      style={style}
       {...rest}
     >
       {children}
@@ -18,4 +42,19 @@ export const EuiPage = ({ children, className, ...rest }) => {
 EuiPage.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+
+  /**
+   * Sets the max-width of the page,
+   * set to `true` to use the default size,
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width.
+   */
+  restrictWidth: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]),
 };
+
+EuiPage.defaultProps = {
+  restrictWidth: false,
+}
diff --git a/src/components/page/page.test.js b/src/components/page/page.test.js
index 086759613da3..98bac1462a81 100644
--- a/src/components/page/page.test.js
+++ b/src/components/page/page.test.js
@@ -13,4 +13,13 @@ describe('EuiPage', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('sets a max-width', () => {
+    const component = render(
+      <EuiPage {...requiredProps} restrictWidth={1024} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });