diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md
new file mode 100644
index 00000000..a9ccac36
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md
@@ -0,0 +1,29 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Unavailable content
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['UnavailableContent']
+---
+
+import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
+
+An **unavailable content** component displays a screen to users when they attempt to view a page that is currently unavailable to view.
+
+## Examples
+
+### Basic unavailable content
+
+A basic unavailable content component provides users with instructions, including a link to check a status page for known issues.
+The status page link can be specified using `statusPageUrl`.
+
+```js file="./UnavailableContentExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx
new file mode 100644
index 00000000..c11c8fc4
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
+
+export const BasicExample: React.FunctionComponent = () => (
+
+);
diff --git a/packages/module/src/UnavailableContent/UnavailableContent.test.tsx b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx
new file mode 100644
index 00000000..1d28ffb8
--- /dev/null
+++ b/packages/module/src/UnavailableContent/UnavailableContent.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UnavailableContent from './UnavailableContent';
+
+describe('Unavailable component', () => {
+ it('should render with no link', () => {
+ expect(render()).toMatchSnapshot();
+ });
+
+ it('should render with a link', () => {
+ expect(render()).toMatchSnapshot();
+ });
+
+});
diff --git a/packages/module/src/UnavailableContent/UnavailableContent.tsx b/packages/module/src/UnavailableContent/UnavailableContent.tsx
new file mode 100644
index 00000000..fb8e4ce0
--- /dev/null
+++ b/packages/module/src/UnavailableContent/UnavailableContent.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
+
+const useStyles = createUseStyles({
+ emptyStateUnavailable: {
+ color: 'var(--pf-global--danger-color--100)',
+ '& svg': { color: 'var(--pf-global--danger-color--100)' }
+ },
+ emptyStateLinkButton: {
+ padding: '0',
+ }
+});
+
+export interface UnavailableContentProps {
+ /** Page to open when user clicks on status page link */
+ statusPageUrl?: string;
+}
+
+const UnavailableContent: React.FunctionComponent = ({ statusPageUrl = '' }: UnavailableContentProps) => {
+ const classes = useStyles();
+ return (
+
+ } />
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '}
+ {' '}
+ for known outages.
+
+
+ );
+};
+
+export default UnavailableContent;
diff --git a/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap b/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap
new file mode 100644
index 00000000..f46d7cb2
--- /dev/null
+++ b/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap
@@ -0,0 +1,327 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Unavailable component should render with a link 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+
+
+
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our
+
+
+ status page
+
+
+ for known outages.
+
+
+
+
+ ,
+ "container":
+
+
+
+
+
+
+
+
+ Try refreshing the page. If the problem persists, contact your organization administrator or visit our
+
+
+ status page
+
+
+ for known outages.
+