+ {beforeHeaderContent && beforeHeaderContent}
+ {isNotDefined(blockingContent) && showPageContainer && (
+
+ )}
+ {isNotDefined(blockingContent) && (
+
+ { children }
+
+ )}
+
+ );
+}
+
+export default Page;
diff --git a/src/components/Page/styles.module.css b/src/components/Page/styles.module.css
new file mode 100644
index 0000000..951dc42
--- /dev/null
+++ b/src/components/Page/styles.module.css
@@ -0,0 +1,22 @@
+.page {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ .page-header {
+ background-color: var(--un-color-background);
+ }
+
+ .main-section-container {
+ flex-grow: 1;
+ background-color: var( --un-color-background);
+
+ &.with-background-color {
+ background-color: var(--un-color-background);
+ }
+
+ .main-section {
+ padding: var(--un-spacing-lg) var(--un-spacing-md);
+ }
+ }
+}
diff --git a/src/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx
new file mode 100644
index 0000000..a25e7b8
--- /dev/null
+++ b/src/components/PageContainer/index.tsx
@@ -0,0 +1,36 @@
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+type SupportedElements = 'div' | 'nav' | 'header' | 'footer' | 'main';
+
+interface Props {
+ className?: string;
+ contentClassName?: string;
+ children: React.ReactNode;
+ contentAs?: SupportedElements;
+ containerAs?: SupportedElements;
+}
+
+function PageContainer(props: Props) {
+ const {
+ className,
+ contentClassName,
+ children,
+ contentAs = 'div',
+ containerAs = 'div',
+ } = props;
+
+ const ContentElement = contentAs as React.ElementType;
+ const ContainerElement = containerAs as React.ElementType;
+
+ return (
+