From 2ad0f66a0c3af8deca85df092f7e47df54baaf60 Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Thu, 5 Dec 2024 15:31:10 -0500
Subject: [PATCH] Cleans up docs and tests

---
 src/components/Template/Template.mdx          | 505 ++------------
 src/components/Template/Template.stories.tsx  | 625 ++++++++++--------
 src/components/Template/Template.test.tsx     | 308 +--------
 src/components/Template/Template.tsx          | 397 +----------
 src/components/Template/TemplateNew.mdx       |  17 -
 .../Template/TemplateNew.stories.tsx          | 313 ---------
 src/components/Template/TemplateNew.tsx       |  46 --
 .../Template/templateChangelogData.ts         |   9 +
 src/index.ts                                  |  29 +-
 src/theme/components/templatenew.ts           |  42 +-
 10 files changed, 484 insertions(+), 1807 deletions(-)
 delete mode 100644 src/components/Template/TemplateNew.mdx
 delete mode 100644 src/components/Template/TemplateNew.stories.tsx
 delete mode 100644 src/components/Template/TemplateNew.tsx

diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx
index 9f4a33c8d..21ee2cc3d 100644
--- a/src/components/Template/Template.mdx
+++ b/src/components/Template/Template.mdx
@@ -2,499 +2,110 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import { changelogData } from "./templateChangelogData";
 
-import * as TemplateStories from "./Template.stories";
+import * as TemplateNewStories from "./Template.stories";
 import {
   Template,
-  TemplateAboveHeader,
-  TemplateAppContainer,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentBottom,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateContentTop,
-  TemplateFooter,
-  TemplateHeader,
+  TemplateTop,
+  TemplateSidebar,
+  TemplateMain,
+  TemplateMainNarrow,
+  TemplateBottom,
 } from "./Template";
 import Link from "../Link/Link";
 
-<Meta of={TemplateStories} />
+<Meta of={TemplateNewStories} />
 
 # Template
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.3.6`    |
-| Latest            | `3.4.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.3.6`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
-- {<Link href="#templateappcontainer-overview" target="_self">TemplateAppContainer Overview</Link>}
-- {<Link href="#templateappcontainer-component-props" target="_self">TemplateAppContainer Component Props</Link>}
-- {<Link href="#templateappcontainer-accessibility" target="_self">TemplateAppContainer Accessibility</Link>}
-- {<Link href="#template-children-overview" target="_self">Template Children Overview</Link>}
-- {<Link href="#template-children-component-props" target="_self">Template Children Component Props</Link>}
-- {<Link href="#full-example-with-template-children-components" target="_self">Full Example with Template Children Components</Link>}
+- {<Link href="#template-overview" target="_self">Template Overview</Link>}
+- {<Link href="#template-props" target="_self">Template Props</Link>}
+- {<Link href="#template-components" target="_self">Template Components</Link>}
+- {<Link href="#template-accessibility" target="_self">Template Accessibility</Link>}
+- {<Link href="#template-sidebar-configuration" target="_self">Template Sidebar Configuration</Link>}
 - {<Link href="#changelog" target="_self">Changelog</Link>}
 
-## TemplateAppContainer Overview
+## Template Overview
 
-<Description of={TemplateAppContainer} />
-
-If you have a custom `Header` component that _already_ renders an HTML `<header>`
-element, set `renderHeaderElement` to false so only one `<header>` element is
-rendered.
-
-If you need to render the `SkipNavigation` component, set `renderSkipNavigation`
-to true.
-
-Likewise, if you have a custom `Footer` component that _already_ renders an HTML
-`<footer>` element, set `renderFooterElement` to false so only one `<footer>`
-element is rendered.
-
-**This is the recommended way to render an app page template.**
-
-<Source
-  code={`
-import { TemplateAppContainer } from "@nypl/design-system-react-components";
-// ...
-<TemplateAppContainer
-  aboveHeader={<Placeholder variant="short">Above Header</Placeholder>}
-  header={<Placeholder variant="short">Header</Placeholder>}
-  breakout={
-    <>
-      <Placeholder variant="short">Breadcrumbs</Placeholder>
-      <Placeholder>Hero</Placeholder>
-    </>
-  }
-  sidebar="left"
-  contentTop={<Placeholder variant="short">Content Top</Placeholder>}
-  contentSidebar={<Placeholder>Left Sidebar</Placeholder>}
-  contentPrimary={
-    <>
-      <Placeholder>Main Content</Placeholder>
-      <Placeholder variant="short">More Content</Placeholder>
-    </>
-  }
-  contentBottom={<Placeholder variant="short">Content Bottom</Placeholder>}
-  footer={<Placeholder>Footer</Placeholder>}
-  renderSkipNavigation={true}
-/>
-`}
-  language="jsx"
-/>
-
-## TemplateAppContainer Component Props
-
-<Canvas of={TemplateStories.WithControls} />
-
-<ArgTypes of={TemplateStories.WithControls} />
-
-## TemplateAppContainer Accessibility
-
-**The `TemplateAppContainer` component is the recommended way to render the entire
-application.** Therefore, this accessibility section is specifically for the
-`TemplateAppContainer` but the same rules apply to the individual "Template"
-components.
-
-The `TemplateAppContainer` component renders the header as a `<header>` element,
-the content as a `<main>` element, and the footer as a `<footer>` element.
-
-If you need to render an alert or notification at the top of the page with an
-`aside` HTML element or HTML element with the `role="complementary"` attribute,
-then pass that alert or notification component to the `aboveHeader` prop. These
-elements should _not_ be rendered in the `header` HTML section since that's an
-accessibility violation.
-
-The `TemplateAppContainer` component renders a full DOM and one of the children
-is the `main` HTML element with a default "id" of `"mainContent"`. This should
-be used as the anchor element that the skip navigation link points to. If your
-application is using the current Header, it already contains the skip
-navigation feature but make sure it is pointing to the correct anchor element.
-
-If you are using a custom header component or you need to use the Reservoir
-Design System (DS) `SkipNavigation` component, then set the `renderSkipNavigation`
-prop to true. This will render the `SkipNavigation` component at the top of the
-page before any other elements. The main link will point to the `#mainContent`
-`main` element.
-
-Resources
-
-- [W3C Aria Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html)
-- [Digital A11y Role=Complementary](https://www.digitala11y.com/complementary-role/)
-- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
-- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
-
-## Template Children Overview
-
-The Reservoir Design System (DS) also provides a set of "template" components
-that work together to render a consistent mobile and desktop layout. More
-information on individual components and how they should be composed can be
-found below. Even though these component are available for use, we recommend
-using the `TemplateAppContainer` component and passing down children component
-as props as needed.
-
-Note: If you need to render the `SkipNavigation` component, you need to explicitly
-render it immediately before the `Template` component. This is done
-automatically in the `TemplateAppContainer` component.
-
-Note: All components that go above the main content `TemplateContent` component
-should be wrapped in a `<div>` element or a `<Box>` component.
-
-Basic "template" components structure:
+TBD
 
 <Source
   code={`
 import {
   Template,
-  TemplateAboveHeader,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentBottom,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateContentTop,
-  TemplateFooter,
-  TemplateHeader,
+  TemplateTop,
+  TemplateSidebar,
+  TemplateMain,
+  TemplateBottom
 } from "@nypl/design-system-react-components";
-// ...
-<>
-  <SkipNavigation />
-  <Template>
-    <TemplateBreakout>
-      <TemplateAboveHeader>
-        // ...
-      </TemplateAboveHeader>
-      <TemplateHeader>
-        // ...
-      </TemplateHeader>
-    </TemplateBreakout>
-    <TemplateContent sidebar="...">
-      <TemplateContentTop>
-        // ...
-      </TemplateContentTop>
-      <TemplateContentPrimary>
-        // ...
-      </TemplateContentPrimary>
-      <TemplateContentBottom>
-        // ...
-      </TemplateContentBottom>
-    </TemplateContent>
-    <TemplateFooter>
-      // ...
-    </TemplateFooter>
-  </Template>
-</>
-`}
-  language="jsx"
-/>
 
-## Template Children Component Props
+<Template sidebar="...">
+  <TemplateBreakout>// ...</TemplateBreakout>
+  <TemplateTop>// ...</TemplateTop>
+  <TemplateSidebar>// ...</TemplateSidebar>
+  <TemplateMain>// ...</TemplateMain>
+  <TemplateBottom>// ...</TemplateBottom>
+</Template>
+`} language="jsx" />
+
+## Template Props
 
-<Canvas of={TemplateStories.ChildrenComponentProps} />
+<Canvas of={TemplateNewStories.WithControls} />
 
-<ArgTypes of={TemplateStories.ChildrenComponentProps} />
+<ArgTypes of={TemplateNewStories.WithControls} />
 
-### Template Components
+## Template Components
 
 The components consist of, listed in DOM structure order:
 
 - `Template`
-- `TemplateAboveHeader`
-- `TemplateHeader`
 - `TemplateBreakout`
-- `TemplateContent`
-- `TemplateContentTop`
-- `TemplateContentPrimary`
-- `TemplateContentSidebar`
-- `TemplateContentBottom`
-- `TemplateFooter`
-
-#### Template
-
-<Source
-  code={`
-<Template>
-  // ...
-</Template>
-`}
-  language="jsx"
-/>
-
-<Description of={Template} />
-
-#### TemplateBreakout
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    // ...
-  </TemplateBreakout>
-</Template>
-`}
-  language="jsx"
-/>
+- `TemplateTop`
+- `TemplateMain` or `TemplateMainNarrow`
+- `TemplateSidebar`
+- `TemplateBottom`
 
-<Description of={TemplateBreakout} />
+## Template Accessibility
 
-#### TemplateAboveHeader
+Wide lines of text are difficult to read and are proven to make it harder for
+people to focus, while short lines of text force the eye to travel back too often,
+breaking a reader's rhythm. The `TemplateMain` component has a max width of 1280px,
+which is too wide for text. If your content includes long chunks of text, you
+should use the `TemplateMainNarrow` component instead.
 
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-  </TemplateBreakout>
-</Template>
-`}
-  language="jsx"
-/>
+The `TemplateMain` and `TemplateMainNarrow` components render the content as a
+`<main>` element with a default "id" of `"mainContent"`. This should be used as
+the anchor element that the skip navigation link points to. If your application
+is using the current Header, it already contains the skip navigation feature but
+make sure it is pointing to the correct anchor element.
 
-<Description of={TemplateAboveHeader} />
-
-#### TemplateHeader
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-</Template>
-`}
-  language="jsx"
-/>
-
-<Description of={TemplateHeader} />
-
-#### TemplateContent
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent id="mainContent">
-    // ...
-  </TemplateContent>
-</Template>
-`}
-  language="jsx"
-/>
-
-<Description of={TemplateContent} />
-
-#### TemplateContentTop
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent>
-    <TemplateContentTop>
-      // ...
-    </TemplateContentTop>
-  </TemplateContent>
-</Template>
-`}
-  language="jsx"
-/>
-
-<Description of={TemplateContentTop} />
-
-#### TemplateContentPrimary
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent>
-    <TemplateContentPrimary>
-      // ...
-    </TemplateContentPrimary>
-  </TemplateContent>
-<Template>
-`}
-  language="jsx"
-/>
-
-<Description of={TemplateContentPrimary} />
-
-#### TemplateContentSidebar
-
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  <TemplateBreakout>
-  <TemplateContent sidebar="right">
-    <TemplateContentPrimary>
-      // ...
-    </TemplateContentPrimary>
-    <TemplateContentSidebar>
-      // RIGHT SIDEBAR
-    </TemplateContentSidebar>
-  </TemplateContent>
-</Template>
-
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent sidebar="left">
-    <TemplateContentSidebar>
-      // LEFT SIDEBAR
-    </TemplateContentSidebar>
-    <TemplateContentPrimary>
-      // ...
-    </TemplateContentPrimary>
-  </TemplateContent>
-<Template>
-`} language="jsx" />
-
-<Description of={TemplateContentSidebar} />
-
-#### TemplateContentBottom
+Resources
 
-<Source
-  code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent>
-    <TemplateContentTop>
-      // ...
-    </TemplateContentTop>
-    <TemplateContentPrimary>
-      // ...
-    </TemplateContentPrimary>
-    <TemplateContentBottom>
-      // ...
-    </TemplateContentBottom>
-  </TemplateContent>
-</Template>
-`}
-  language="jsx"
-/>
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
 
-<Description of={TemplateContentBottom} />
+## Template Sidebar Configuration
 
-#### TemplateFooter
+In order to render a sidebar, the `Template` component needs to be aware of it.
+Pass the location of the sidebar to the `sidebar` prop as either "left" or "right".
 
 <Source
   code={`
-<Template>
-  <TemplateBreakout>
-    <TemplateAboveHeader>
-      // ...
-    </TemplateAboveHeader>
-    <TemplateHeader>
-      // ...
-    </TemplateHeader>
-  </TemplateBreakout>
-  <TemplateContent sidebar="right">
-    //...
-  </TemplateContent>
-  <TemplateFooter>
-    // ...
-  </TemplateFooter>
+<Template sidebar="left">
+  // ...
 </Template>
 `}
   language="jsx"
 />
 
-<Description of={TemplateFooter} />
-
-### Template Children Components Sidebar Configuration
-
-In order to render a sidebar, two steps must be taken.
-
-1. The `TemplateContent` component needs to be aware of it. Pass the location
-   of the sidebar to the `sidebar` prop as either "left" or "right".
-
-<Source
-  code={`
-<TemplateContent sidebar="left">
-`}
-  language="jsx"
-/>
-
-2. Render `TemplateContentSidebar` and `TemplateContentPrimary` next to each
-   other in the appropriate order. If the sidebar must show left, then
-   `TemplateContentSidebar` comes before `TemplateContentPrimary`. Otherwise,
-   `TemplateContentPrimary` must come before `TemplateContentSidebar`.
-
-<Source
-  code={`
-// Render left sidebar
-<TemplateContent sidebar="left">
-  <TemplateContentSidebar>
-    // ...
-  </TemplateContentSidebar>
-  <TemplateContentPrimary>
-    // ...
-  </TemplateContentPrimary>
-</TemplateContent>
-// Render right sidebar
-<TemplateContent sidebar="right">
-  <TemplateContentPrimary>// ...</TemplateContentPrimary>
-  <TemplateContentSidebar>// ...</TemplateContentSidebar>
-</TemplateContent>
-`}
-  language="jsx"
-/>
-
-## Full Example with Template Children Components
-
-export const otherSubHeaderText =
-  "With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today.";
-
-This is best viewed in the Storybook "Canvas" and not "Docs" section.
-
-<Canvas of={TemplateStories.FullExampleWithTemplateChildrenComponents} />
-
 ## Changelog
 
 <ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/Template/Template.stories.tsx b/src/components/Template/Template.stories.tsx
index c802d200f..e48c65f83 100644
--- a/src/components/Template/Template.stories.tsx
+++ b/src/components/Template/Template.stories.tsx
@@ -1,47 +1,35 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
+import type { Meta } from "@storybook/react";
+import { getPlaceholderImage } from "../../utils/utils";
 import Accordion, { AccordionDataProps } from "../Accordion/Accordion";
 import Banner from "../Banner/Banner";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import Button from "../Button/Button";
-import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
+import Card, { CardHeading, CardContent } from "../Card/Card";
 import FeaturedContent from "../FeaturedContent/FeaturedContent";
-import Form, { FormRow, FormField } from "../Form/Form";
+import Form, { FormField, FormRow } from "../Form/Form";
 import Heading from "../Heading/Heading";
 import Hero from "../Hero/Hero";
-import HorizontalRule from "../HorizontalRule/HorizontalRule";
-import Link from "../Link/Link";
-import Notification from "../Notification/Notification";
+import { HorizontalRule } from "../HorizontalRule/HorizontalRule";
 import Placeholder from "../Placeholder/Placeholder";
-import SkipNavigation from "../SkipNavigation/SkipNavigation";
 import Table from "../Table/Table";
+import TextInput from "../TextInput/TextInput";
 import {
   Template,
-  TemplateAboveHeader,
-  TemplateAppContainer,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentBottom,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateContentTop,
-  TemplateFooter,
-  TemplateHeader,
+  TemplateTop,
+  TemplateMain,
+  TemplateMainNarrow,
+  TemplateSidebar,
+  TemplateBottom,
 } from "./Template";
-import TextInput from "../TextInput/TextInput";
-import { argsBooleanType } from "../../helpers/storybookUtils";
-import { getPlaceholderImage } from "../../utils/utils";
 
-const meta: Meta<typeof TemplateAppContainer> = {
+const meta: Meta = {
   title: "Components/Page Layout/Template",
-  component: TemplateAppContainer,
+  component: Template,
 };
 
 export default meta;
-type Story = StoryObj<typeof TemplateAppContainer>;
 
-const otherSubHeaderText =
-  "With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today.";
 const accordionData: AccordionDataProps[] = [
   {
     accordionType: "default",
@@ -174,54 +162,40 @@ const columnStylesComplex = [
   { minWidth: "160px", width: "15%", textAlign: "right" },
 ];
 
+const otherSubHeaderText =
+  "With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today.";
+
 /**
  * Main Story for the Template component. This must contains the `args`
  * and `parameters` properties in this object.
  */
-export const WithControls: Story = {
+export const WithControls = {
   args: {
-    aboveHeader: <Placeholder variant="short">Above Header</Placeholder>,
-    breakout: (
-      <>
-        <Placeholder variant="short">Breadcrumbs</Placeholder>
-        <Placeholder>Hero</Placeholder>
-      </>
-    ),
-    contentBottom: <Placeholder variant="short">Content Bottom</Placeholder>,
-    contentId: "mainContent",
-    contentPrimary: (
-      <>
-        <Placeholder>Main Content</Placeholder>
-        <Placeholder variant="short">More Content</Placeholder>
-      </>
-    ),
-    contentTop: <Placeholder variant="short">Content Top</Placeholder>,
-    footer: <Placeholder>Footer</Placeholder>,
-    header: <Placeholder variant="short">Header</Placeholder>,
-    renderFooterElement: true,
-    renderHeaderElement: true,
-    renderSkipNavigation: false,
     sidebar: "left",
   },
   argTypes: {
-    aboveHeader: { control: false },
-    breakout: { control: false },
-    contentBottom: { control: false },
-    contentPrimary: { control: false },
-    contentSidebar: { control: false },
-    contentTop: { control: false },
-    footer: { control: false },
-    header: { control: false },
-    renderSkipNavigation: argsBooleanType("true"),
     sidebar: {
       table: { defaultValue: { summary: "none" } },
     },
   },
   render: (args) => (
-    <TemplateAppContainer
-      {...args}
-      contentSidebar={<Placeholder>Sidebar ({args.sidebar})</Placeholder>}
-    />
+    <Template {...args}>
+      <TemplateBreakout>
+        <Placeholder variant="short">Breakout</Placeholder>
+      </TemplateBreakout>
+      <TemplateTop>
+        <Placeholder variant="short">Content Top</Placeholder>
+      </TemplateTop>
+      <TemplateSidebar>
+        <Placeholder>Left Sidebar</Placeholder>
+      </TemplateSidebar>
+      <TemplateMain>
+        <Placeholder>Main Content</Placeholder>
+      </TemplateMain>
+      <TemplateBottom>
+        <Placeholder variant="short">Content Bottom</Placeholder>
+      </TemplateBottom>
+    </Template>
   ),
   parameters: {
     design: {
@@ -230,257 +204,344 @@ export const WithControls: Story = {
     },
   },
 };
-// The following are additional Template example Stories.
-export const ChildrenComponentProps: Story = {
+
+export const TemplateFullExample = {
   args: {
     sidebar: "left",
   },
-  argTypes: {
-    aboveHeader: { table: { disable: true } },
-    breakout: { table: { disable: true } },
-    contentBottom: { table: { disable: true } },
-    contentId: { table: { disable: true } },
-    contentPrimary: { table: { disable: true } },
-    contentSidebar: { table: { disable: true } },
-    contentTop: { table: { disable: true } },
-    footer: { table: { disable: true } },
-    header: { table: { disable: true } },
-    sidebar: { description: "Only used in Storybook." },
-  },
   render: (args) => (
     <>
-      <SkipNavigation />
-      <Template>
+      <Template sidebar={args.sidebar}>
         <TemplateBreakout>
-          <TemplateAboveHeader>
-            <Placeholder variant="short">Above Header</Placeholder>
-          </TemplateAboveHeader>
-          <TemplateHeader>
-            <Placeholder variant="short">Header</Placeholder>
-            <Placeholder variant="short">Breadcrumbs</Placeholder>
-            <Placeholder>Hero</Placeholder>
-          </TemplateHeader>
+          <Breadcrumbs
+            breadcrumbsData={[
+              { url: "#", text: "Home" },
+              { url: "#", text: "Research" },
+              {
+                url: "#",
+                text: "Catalog",
+              },
+            ]}
+          />
+          <Hero
+            backgroundImageSrc={getPlaceholderImage()}
+            heroType="campaign"
+            heading={<Heading level="h1" id="1" text="Hero Campaign" />}
+            imageProps={{
+              alt: "Image example",
+              src: getPlaceholderImage("smaller"),
+            }}
+            isDarkBackgroundImage
+            subHeaderText={otherSubHeaderText}
+          />
         </TemplateBreakout>
-        <TemplateContent sidebar={args.sidebar}>
-          <TemplateContentTop>
-            <Placeholder variant="short">Content Top</Placeholder>
-          </TemplateContentTop>
-          {args.sidebar === "left" && (
-            <TemplateContentSidebar>
-              <Placeholder>Left Sidebar</Placeholder>
-            </TemplateContentSidebar>
-          )}
-          <TemplateContentPrimary>
-            <Placeholder>Main Content</Placeholder>
-            <Placeholder variant="short">More Content</Placeholder>
-          </TemplateContentPrimary>
-          {args.sidebar === "right" && (
-            <TemplateContentSidebar>
-              <Placeholder>Right Sidebar</Placeholder>
-            </TemplateContentSidebar>
-          )}
-          <TemplateContentBottom>
-            <Placeholder variant="short">Content Bottom</Placeholder>
-          </TemplateContentBottom>
-        </TemplateContent>
-        <TemplateFooter>
-          <Placeholder>Footer</Placeholder>
-        </TemplateFooter>
+        <TemplateTop>
+          <Banner
+            content="This is an the top content area!"
+            heading="Content Top"
+            type="informative"
+          />
+        </TemplateTop>
+        <TemplateSidebar>
+          <p>Sidebar information in a `Card` component.</p>
+          <Card
+            imageProps={{
+              alt: "Alt text",
+              aspectRatio: "square",
+              size: "default",
+              src: getPlaceholderImage("smaller"),
+            }}
+            isCentered
+          >
+            <CardHeading size="heading4" subtitle="Animal info" id="heading1">
+              Library Image
+            </CardHeading>
+            <CardContent>
+              Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
+              libero, a pharetra augue.
+            </CardContent>
+          </Card>
+        </TemplateSidebar>
+        <TemplateMain>
+          <p>This is the main content!</p>
+          <Accordion accordionData={faqContentData} />
+          <HorizontalRule />
+          <p>Fill out the form!</p>
+          <Form action="/end/point" id="form1">
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="username"
+                labelText="Username"
+                isRequired
+              />
+            </FormField>
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="password"
+                labelText="Password"
+                isRequired
+              />
+            </FormField>
+            <FormRow>
+              <FormField>
+                <TextInput
+                  id="phone-field"
+                  labelText="Phone Field"
+                  type="tel"
+                />
+              </FormField>
+              <FormField>
+                <TextInput id="url-field" labelText="URL Field" type="url" />
+              </FormField>
+              <FormField>
+                <TextInput id="age-field" labelText="Age" type="number" />
+              </FormField>
+            </FormRow>
+            <FormField>
+              <Button id="submit">Submit</Button>
+            </FormField>
+          </Form>
+          <Table
+            columnHeaders={columnHeadersAlt}
+            columnStyles={columnStylesComplex}
+            id="table-horizontal-scrolling-wo-row-headers"
+            isScrollable
+            showRowDividers
+            showTitleText={false}
+            tableData={tableDataAlt}
+            titleText="Table with horizontal scrolling and no row headers"
+            useRowHeaders
+          />
+        </TemplateMain>
+        <TemplateBottom>
+          <Banner
+            content="This is an the bottom content area!"
+            heading="Content Bottom"
+            type="informative"
+          />
+        </TemplateBottom>
       </Template>
     </>
   ),
 };
 
-export const FullExampleWithTemplateChildrenComponents: Story = {
+export const TemplateFullExampleNarrow = {
   render: () => (
     <>
-      <SkipNavigation />
       <Template>
         <TemplateBreakout>
-          <TemplateAboveHeader>
-            <Notification
-              noMargin
-              notificationHeading="Standard Notification"
-              notificationContent={
-                <>
-                  This is an "announcement" Notification with a heading. Cras
-                  mattis consectetur purus sit amet fermentum. Maecenas faucibus
-                  mollis interdum. Morbi leo risus, porta ac consectetur ac,
-                  vestibulum at eros. Cum sociis natoque penatibus et magnis dis
-                  parturient montes, nascetur ridiculus mus. Vivamus sagittis
-                  lacus vel augue laoreet rutrum faucibus dolor auctor.
-                </>
-              }
-              showIcon={false}
-            />
-          </TemplateAboveHeader>
-          <TemplateHeader>
-            <Breadcrumbs
-              breadcrumbsData={[
-                { url: "#", text: "Home" },
-                { url: "#", text: "Research" },
-                {
-                  url: "#",
-                  text: "Catalog",
-                },
-              ]}
-            />
-            <Hero
-              backgroundImageSrc={getPlaceholderImage()}
-              heroType="campaign"
-              heading={<Heading level="h1" id="1" text="Hero Campaign" />}
-              imageProps={{
-                alt: "Image example",
-                src: getPlaceholderImage("smaller"),
-              }}
-              isDarkBackgroundImage
-              subHeaderText={otherSubHeaderText}
-            />
-          </TemplateHeader>
+          <Breadcrumbs
+            breadcrumbsData={[
+              { url: "#", text: "Home" },
+              { url: "#", text: "Research" },
+              {
+                url: "#",
+                text: "Catalog",
+              },
+            ]}
+          />
+          <Hero
+            backgroundImageSrc={getPlaceholderImage()}
+            heroType="campaign"
+            heading={<Heading level="h1" id="1" text="Hero Campaign" />}
+            imageProps={{
+              alt: "Image example",
+              src: getPlaceholderImage("smaller"),
+            }}
+            isDarkBackgroundImage
+            subHeaderText={otherSubHeaderText}
+          />
         </TemplateBreakout>
-        <TemplateContent sidebar="right">
-          <TemplateContentTop>
-            <Banner
-              content="This is an the top content area!"
-              heading="Content Top"
-              type="informative"
-            />
-          </TemplateContentTop>
-          <TemplateContentPrimary>
-            <p>This is the main content!</p>
-            <Accordion accordionData={faqContentData} />
-            <HorizontalRule />
-            <p>Fill out the form!</p>
-            <Form action="/end/point" id="form1">
+        <TemplateTop>
+          <Banner
+            content="This is an the top content area!"
+            heading="Content Top"
+            type="informative"
+          />
+        </TemplateTop>
+        <TemplateMainNarrow>
+          <p>This is the main content!</p>
+          <p>
+            Discover millions of items from The New York Public Library's
+            Stephen A. Schwarzman Building, Schomburg Center for Research in
+            Black Culture, and The New York Public Library for the Performing
+            Arts. Plus, access materials from library collections at Columbia
+            University, Harvard University, and Princeton University. Learn
+            more. Please note that the Research Catalog does not include
+            circulating materials. For books and more that you can check out to
+            take home please visit our circulating branch catalog. The legacy
+            research catalog is still available, but does not include all of our
+            Scan & Deliver options or the Columbia University, Harvard
+            University, and Princeton University material from the Shared
+            Collection.
+          </p>
+          <Accordion accordionData={faqContentData} />
+          <HorizontalRule />
+          <p>Fill out the form!</p>
+          <Form action="/end/point" id="form1">
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="username"
+                labelText="Username"
+                isRequired
+              />
+            </FormField>
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="password"
+                labelText="Password"
+                isRequired
+              />
+            </FormField>
+            <FormRow>
               <FormField>
                 <TextInput
-                  helperText="Make sure to complete this field."
-                  id="username"
-                  labelText="Username"
-                  isRequired
+                  id="phone-field"
+                  labelText="Phone Field"
+                  type="tel"
                 />
               </FormField>
+              <FormField>
+                <TextInput id="url-field" labelText="URL Field" type="url" />
+              </FormField>
+              <FormField>
+                <TextInput id="age-field" labelText="Age" type="number" />
+              </FormField>
+            </FormRow>
+            <FormField>
+              <Button id="submit">Submit</Button>
+            </FormField>
+          </Form>
+          <Table
+            columnHeaders={columnHeadersAlt}
+            columnStyles={columnStylesComplex}
+            id="table-horizontal-scrolling-wo-row-headers"
+            isScrollable
+            showRowDividers
+            showTitleText={false}
+            tableData={tableDataAlt}
+            titleText="Table with horizontal scrolling and no row headers"
+            useRowHeaders
+          />
+        </TemplateMainNarrow>
+        <TemplateBottom>
+          <Banner
+            content="This is an the bottom content area!"
+            heading="Content Bottom"
+            type="informative"
+          />
+        </TemplateBottom>
+      </Template>
+    </>
+  ),
+};
+
+export const TemplateFullExampleWithFeaturedContent = {
+  render: () => (
+    <>
+      <Template>
+        <TemplateBreakout>
+          <Breadcrumbs
+            breadcrumbsData={[
+              { url: "#", text: "Home" },
+              { url: "#", text: "Research" },
+              {
+                url: "#",
+                text: "Catalog",
+              },
+            ]}
+          />
+          <Hero
+            backgroundImageSrc={getPlaceholderImage()}
+            heroType="campaign"
+            heading={<Heading level="h1" id="1" text="Hero Campaign" />}
+            imageProps={{
+              alt: "Image example",
+              src: getPlaceholderImage("smaller"),
+            }}
+            isDarkBackgroundImage
+            subHeaderText={otherSubHeaderText}
+          />
+        </TemplateBreakout>
+        <TemplateTop>
+          <Banner
+            content="This is an the top content area!"
+            heading="Content Top"
+            type="informative"
+          />
+        </TemplateTop>
+        <TemplateMain>
+          <p>This is the main content!</p>
+          <Accordion accordionData={faqContentData} />
+          <HorizontalRule />
+          <p>Fill out the form!</p>
+          <Form action="/end/point" id="form1">
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="username"
+                labelText="Username"
+                isRequired
+              />
+            </FormField>
+            <FormField>
+              <TextInput
+                helperText="Make sure to complete this field."
+                id="password"
+                labelText="Password"
+                isRequired
+              />
+            </FormField>
+            <FormRow>
               <FormField>
                 <TextInput
-                  helperText="Make sure to complete this field."
-                  id="password"
-                  labelText="Password"
-                  isRequired
+                  id="phone-field"
+                  labelText="Phone Field"
+                  type="tel"
                 />
               </FormField>
-              <FormRow>
-                <FormField>
-                  <TextInput
-                    id="phone-field"
-                    labelText="Phone Field"
-                    type="tel"
-                  />
-                </FormField>
-                <FormField>
-                  <TextInput id="url-field" labelText="URL Field" type="url" />
-                </FormField>
-                <FormField>
-                  <TextInput id="age-field" labelText="Age" type="number" />
-                </FormField>
-              </FormRow>
               <FormField>
-                <Button id="submit">Submit</Button>
+                <TextInput id="url-field" labelText="URL Field" type="url" />
               </FormField>
-            </Form>
-            <FeaturedContent
-              imageProps={{
-                alt: "",
-                src: getPlaceholderImage("smaller"),
-                position: "end",
-                width: "",
-              }}
-              isFullWidth
-              my="l"
-              textContent={
-                <>
-                  <Heading size="heading5">Sit Dapibus Elit</Heading>
-                  Donec id elit non mi porta gravida at eget metus. Nulla vitae
-                  elit libero, a pharetra augue. Cum sociis natoque penatibus et
-                  magnis dis parturient montes, nascetur ridiculus mus. Cras
-                  mattis consectetur purus sit amet fermentum.
-                </>
-              }
-            />
-            <Table
-              columnHeaders={columnHeadersAlt}
-              columnStyles={columnStylesComplex}
-              id="table-horizontal-scrolling-wo-row-headers"
-              isScrollable
-              showRowDividers
-              showTitleText={false}
-              tableData={tableDataAlt}
-              titleText="Table with horizontal scrolling and no row headers"
-              useRowHeaders
-            />
-          </TemplateContentPrimary>
-          <TemplateContentSidebar>
-            <p>Sidebar information in a `Card` component.</p>
-            <Card
-              imageProps={{
-                alt: "Alt text",
-                aspectRatio: "square",
-                size: "default",
-                src: getPlaceholderImage("smaller"),
-              }}
-              isCentered
-            >
-              <CardHeading size="heading4" subtitle="Animal info" id="heading1">
-                Library Image
-              </CardHeading>
-              <CardContent>
-                Vestibulum id ligula porta felis euismod semper. Nulla vitae
-                elit libero, a pharetra augue.
-              </CardContent>
-            </Card>
-          </TemplateContentSidebar>
-          <TemplateContentBottom>
-            <Banner
-              content="This is an the bottom content area!"
-              heading="Content Bottom"
-              type="informative"
-            />
-          </TemplateContentBottom>
-        </TemplateContent>
-        <TemplateFooter>
-          <Card
-            id="custom-card"
+              <FormField>
+                <TextInput id="age-field" labelText="Age" type="number" />
+              </FormField>
+            </FormRow>
+            <FormField>
+              <Button id="submit">Submit</Button>
+            </FormField>
+          </Form>
+          <FeaturedContent
             imageProps={{
-              alt: "Alt text",
-              aspectRatio: "sixteenByNine",
-              src: "https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png",
+              alt: "",
+              src: getPlaceholderImage("smaller"),
+              position: "end",
+              width: "",
             }}
-            layout="row"
-            backgroundColor="#616161"
-            foregroundColor="#FFF"
-          >
-            <CardHeading id="heading1-footer">Footer</CardHeading>
-            <CardContent>
-              <p>This is an example footer using the `Card` component.</p>
-              <p>
-                © The New York Public Library, 2021 The New York Public Library
-                is a 501(c)(3) | EIN 13-1887440
-              </p>
-            </CardContent>
-            <CardActions>
-              <Link color="#FFF" href="#" textDecoration="underline">
-                Facebook
-              </Link>
-              ,
-              <Link color="#FFF" href="#" textDecoration="underline">
-                Instagram
-              </Link>
-              ,
-              <Link color="#FFF" href="#" textDecoration="underline">
-                Twitter
-              </Link>
-            </CardActions>
-          </Card>
-        </TemplateFooter>
+            isFullWidth
+            my="l"
+            textContent={
+              <>
+                <Heading size="heading5">Sit Dapibus Elit</Heading>
+                Donec id elit non mi porta gravida at eget metus. Nulla vitae
+                elit libero, a pharetra augue. Cum sociis natoque penatibus et
+                magnis dis parturient montes, nascetur ridiculus mus. Cras
+                mattis consectetur purus sit amet fermentum.
+              </>
+            }
+          />
+        </TemplateMain>
+        <TemplateBottom>
+          <Banner
+            content="This is an the bottom content area!"
+            heading="Content Bottom"
+            type="informative"
+          />
+        </TemplateBottom>
       </Template>
     </>
   ),
diff --git a/src/components/Template/Template.test.tsx b/src/components/Template/Template.test.tsx
index 3ff83838b..e6fd85a41 100644
--- a/src/components/Template/Template.test.tsx
+++ b/src/components/Template/Template.test.tsx
@@ -1,239 +1,60 @@
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
-import * as React from "react";
 import renderer from "react-test-renderer";
 
 import {
   Template,
-  TemplateAboveHeader,
-  TemplateHeader,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentTop,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateFooter,
-  TemplateAppContainer,
+  TemplateTop,
+  TemplateMain,
+  TemplateSidebar,
+  TemplateBottom,
 } from "./Template";
 import Placeholder from "../Placeholder/Placeholder";
 
-const aboveHeader = <Placeholder variant="short">Above Header</Placeholder>;
-const header = <Placeholder variant="short">NYPL Header</Placeholder>;
-const breakout = (
-  <>
-    <Placeholder variant="short">Breadcrumbs</Placeholder>
-    <Placeholder variant="short">Hero</Placeholder>
-  </>
-);
+const breakout = <Placeholder variant="short">Breakout</Placeholder>;
 const sidebar = "left";
 const contentTop = <Placeholder>Content Top</Placeholder>;
 const contentSidebar = <Placeholder>Left Sidebar</Placeholder>;
-const contentPrimary = (
+const contentMain = (
   <>
     <Placeholder>Main Content</Placeholder>
     <Placeholder variant="short">More Content</Placeholder>
   </>
 );
-const footer = <Placeholder variant="short">Footer</Placeholder>;
-
-describe("TemplateAppContainer accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <TemplateAppContainer
-        aboveHeader={aboveHeader}
-        header={header}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
+const contentBottom = <Placeholder variant="short">Content Bottom</Placeholder>;
+
+const templateChildren = (
+  <Template sidebar={sidebar}>
+    <TemplateBreakout>{breakout}</TemplateBreakout>
+    <TemplateTop>{contentTop}</TemplateTop>
+    <TemplateSidebar>{contentSidebar}</TemplateSidebar>
+    <TemplateMain>{contentMain}</TemplateMain>
+    <TemplateBottom>{contentBottom}</TemplateBottom>
+  </Template>
+);
 
 describe("Template components accessibility", () => {
   it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Template>
-        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
-        <TemplateHeader>
-          {header}
-          <TemplateBreakout>{breakout}</TemplateBreakout>
-        </TemplateHeader>
-        <TemplateContent sidebar={sidebar}>
-          <TemplateContentTop>{contentTop}</TemplateContentTop>
-          <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
-          <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-        </TemplateContent>
-        <TemplateFooter>{footer}</TemplateFooter>
-      </Template>
-    );
+    const { container } = render(<>{templateChildren}</>);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
-describe("TemplateAppContainer component", () => {
-  it("renders each section", () => {
-    render(
-      <TemplateAppContainer
-        aboveHeader={aboveHeader}
-        header={header}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-      />
-    );
-    expect(screen.getByText("Above Header")).toBeInTheDocument();
-    expect(screen.getByText("NYPL Header")).toBeInTheDocument();
-    expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
-    expect(screen.getByText("Hero")).toBeInTheDocument();
-    expect(screen.getByText("Content Top")).toBeInTheDocument();
-    expect(screen.getByText("Left Sidebar")).toBeInTheDocument();
-    expect(screen.getByText("Main Content")).toBeInTheDocument();
-    expect(screen.getByText("More Content")).toBeInTheDocument();
-    expect(screen.getByText("Footer")).toBeInTheDocument();
-  });
-
-  it("renders a #mainContent id in the `main` DOM element", () => {
-    const { container } = render(
-      <TemplateAppContainer
-        aboveHeader={aboveHeader}
-        header={header}
-        id="template-id"
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-      />
-    );
-    expect(container.querySelector("#mainContent")).toBeInTheDocument();
-    expect(container.querySelector("#template-id")).toBeInTheDocument();
-    expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
-  });
-
-  it("renders only one header in a custom header component", () => {
-    const customHeader = <header>Custom header</header>;
-    render(
-      <TemplateAppContainer
-        header={customHeader}
-        renderHeaderElement={false}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-      />
-    );
-
-    // The `<header>` HTML element has the same meaning as `role="banner"`.
-    expect(screen.getAllByRole("banner")).toHaveLength(1);
-  });
-
-  it("consoles a warning when a header element was passed without setting `renderHeaderElement` to false", () => {
-    const warn = jest.spyOn(console, "warn");
-    const customHeader = <header>Custom header</header>;
-    render(
-      <TemplateAppContainer
-        header={customHeader}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-      />
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
-        "in. Set `renderHeaderElement` to `false` to avoid nested HTML " +
-        "`header` elements."
-    );
-  });
-
-  it("renders only one footer in a custom footer component", () => {
-    const customFooter = <footer>Custom Footer</footer>;
-    render(
-      <TemplateAppContainer
-        header={header}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={customFooter}
-        renderFooterElement={false}
-      />
-    );
-
-    expect(screen.getAllByRole("contentinfo")).toHaveLength(1);
-  });
-
-  it("consoles a warning when a footer element was passed without setting `renderFooterElement` to false", () => {
-    const warn = jest.spyOn(console, "warn");
-    const customFooter = <footer>Custom Footer</footer>;
-    render(
-      <TemplateAppContainer
-        header={header}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={customFooter}
-      />
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
-        "in. Set `renderFooterElement` to `false` to avoid nested HTML " +
-        "`footer` elements."
-    );
-  });
-});
-
 describe("Template components", () => {
   it("renders each section", () => {
-    render(
-      <Template>
-        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
-        <TemplateHeader>
-          {header}
-          <TemplateBreakout>{breakout}</TemplateBreakout>
-        </TemplateHeader>
-        <TemplateContent sidebar={sidebar}>
-          <TemplateContentTop>{contentTop}</TemplateContentTop>
-          <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
-          <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-        </TemplateContent>
-        <TemplateFooter>{footer}</TemplateFooter>
-      </Template>
-    );
+    render(<>{templateChildren}</>);
 
-    expect(screen.getByText("Above Header")).toBeInTheDocument();
-    expect(screen.getByText("NYPL Header")).toBeInTheDocument();
-    expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
-    expect(screen.getByText("Hero")).toBeInTheDocument();
+    expect(screen.getByText("Breakout")).toBeInTheDocument();
     expect(screen.getByText("Content Top")).toBeInTheDocument();
     expect(screen.getByText("Left Sidebar")).toBeInTheDocument();
     expect(screen.getByText("Main Content")).toBeInTheDocument();
     expect(screen.getByText("More Content")).toBeInTheDocument();
-    expect(screen.getByText("Footer")).toBeInTheDocument();
+    expect(screen.getByText("Content Bottom")).toBeInTheDocument();
   });
 
   it("renders a #mainContent id in the TemplateContent component", () => {
-    const { container } = render(
-      <TemplateContent>
-        <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-      </TemplateContent>
-    );
+    const { container } = render(<>{templateChildren}</>);
 
     expect(container.querySelector("#mainContent")).toBeInTheDocument();
     expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
@@ -242,89 +63,16 @@ describe("Template components", () => {
   it("renders the UI snapshot correctly", () => {
     const templateComponents = renderer
       .create(
-        <Template>
-          <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
-          <TemplateHeader>
-            {header}
-            <TemplateBreakout>{breakout}</TemplateBreakout>
-          </TemplateHeader>
-          <TemplateContent sidebar={sidebar}>
-            <TemplateContentTop>{contentTop}</TemplateContentTop>
-            <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
-            <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-          </TemplateContent>
-          <TemplateFooter>{footer}</TemplateFooter>
+        <Template sidebar={sidebar}>
+          <TemplateBreakout>{breakout}</TemplateBreakout>
+          <TemplateTop>{contentTop}</TemplateTop>
+          <TemplateSidebar>{contentSidebar}</TemplateSidebar>
+          <TemplateMain>{contentMain}</TemplateMain>
+          <TemplateBottom>{contentBottom}</TemplateBottom>
         </Template>
       )
       .toJSON();
-    const singleComponent = renderer
-      .create(
-        <TemplateAppContainer
-          aboveHeader={aboveHeader}
-          header={header}
-          breakout={breakout}
-          sidebar={sidebar}
-          contentTop={contentTop}
-          contentSidebar={contentSidebar}
-          contentPrimary={contentPrimary}
-          footer={footer}
-        />
-      )
-      .toJSON();
-    const withChakraProps = renderer
-      .create(
-        <TemplateAppContainer
-          aboveHeader={aboveHeader}
-          header={header}
-          breakout={breakout}
-          sidebar={sidebar}
-          contentTop={contentTop}
-          contentSidebar={contentSidebar}
-          contentPrimary={contentPrimary}
-          footer={footer}
-          p="20px"
-          color="ui.error.primary"
-        />
-      )
-      .toJSON();
-    const withOtherProps = renderer
-      .create(
-        <TemplateAppContainer
-          aboveHeader={aboveHeader}
-          header={header}
-          breakout={breakout}
-          sidebar={sidebar}
-          contentTop={contentTop}
-          contentSidebar={contentSidebar}
-          contentPrimary={contentPrimary}
-          footer={footer}
-          data-testid="props"
-        />
-      )
-      .toJSON();
 
     expect(templateComponents).toMatchSnapshot();
-    expect(singleComponent).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-
-  it("passes a ref to the div wrapper element", () => {
-    const ref = React.createRef<HTMLDivElement>();
-    const { container } = render(
-      <TemplateAppContainer
-        aboveHeader={aboveHeader}
-        header={header}
-        breakout={breakout}
-        sidebar={sidebar}
-        contentTop={contentTop}
-        contentSidebar={contentSidebar}
-        contentPrimary={contentPrimary}
-        footer={footer}
-        ref={ref}
-      />
-    );
-
-    expect(container.querySelectorAll("div")[0]).toBe(ref.current);
   });
 });
diff --git a/src/components/Template/Template.tsx b/src/components/Template/Template.tsx
index 7ea71c1d6..bb2742700 100644
--- a/src/components/Template/Template.tsx
+++ b/src/components/Template/Template.tsx
@@ -1,385 +1,58 @@
-import { Box, chakra, useStyleConfig, ChakraComponent } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { Box, useStyleConfig } from "@chakra-ui/react";
 
-import SkipNavigation from "../SkipNavigation/SkipNavigation";
+const Template: React.FC<any> = ({ children, sidebar = "none" }) => {
+  const styles = useStyleConfig("TemplateNew", { variant: sidebar });
 
-export interface TemplateProps {
-  /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
-}
-export interface TemplateHeaderProps {
-  /** Flag to render an HTML header element. True by default. */
-  renderHeaderElement?: boolean;
-}
-export interface TemplateFooterProps {
-  /** Flag to render an HTML footer element. True by default. */
-  renderFooterElement?: boolean;
-}
-export interface TemplateSidebarProps {
-  /** Renders the `TemplateContentSidebar` component either on the left or
-   * right side of the `TemplateContentPrimary` component. */
-  sidebar?: "none" | "left" | "right";
-}
-export interface TemplateContentProps extends TemplateSidebarProps {
-  /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-   * anchor for the application skip navigation. */
-  id?: string;
-}
-
-export interface TemplateAppContainerProps
-  extends TemplateFooterProps,
-    TemplateHeaderProps,
-    TemplateSidebarProps {
-  /** DOM that will be rendered before the rest of the components in
-   * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
-  aboveHeader?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateBreakout` component section. */
-  breakout?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateContentBottom` component section. */
-  contentBottom?: React.ReactElement;
-  /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-   * anchor for the application skip navigation. */
-  contentId?: string;
-  /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
-  contentPrimary?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
-  contentSidebar?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateContentTop` component section. */
-  contentTop?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateFooter` component section. */
-  footer?: React.ReactElement;
-  /** DOM that will be rendered in the `TemplateHeader` component section. */
-  header?: React.ReactElement;
-  /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
-  /** Render the `SkipNavigation` component or not. False by default. */
-  renderSkipNavigation?: boolean;
-}
-
-/**
- * The main top-level parent component that wraps all template-related
- * components.
- */
-const Template: ChakraComponent<
-  React.ForwardRefExoticComponent<
-    React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>
-  >,
-  React.PropsWithChildren<TemplateProps>
-> = chakra(
-  forwardRef<HTMLDivElement, React.PropsWithChildren<TemplateProps>>(
-    (props, ref?) => {
-      const styles = useStyleConfig("Template", {});
-      return (
-        <Box id={props.id} ref={ref} __css={styles} {...props}>
-          {props.children}
-        </Box>
-      );
-    }
-  )
-);
-
-/**
- * This optional component renders its children from edge-to-edge and should
- * be used for alerts or notifications that are typically site-wide. This must
- * be rendered immediately before the `TemplateHeader` component. This is meant
- * for components that render an `aside` HTML element or HTML element with the
- * `role="complementary"` attribute. These elements should *not* be rendered
- * in the `header` HTML section since that's an accessibility violation.
- */
-const TemplateAboveHeader: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateProps>
-) => {
-  const styles = useStyleConfig("TemplateBreakout", {});
-  return <Box __css={styles}>{props.children}</Box>;
-};
-
-/**
- * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element. If an HTML
- * `<header>` element is already passed in a custom component as the children,
- * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
- * render an HTML `<header>` element.
- */
-const TemplateHeader: React.FC<any> = ({
-  children,
-  renderHeaderElement = true,
-}: React.PropsWithChildren<TemplateHeaderProps>) => {
-  const styles = useStyleConfig("TemplateBreakout", {});
-  let headerElement = <Box __css={styles}>{children}</Box>;
-
-  // The user wants to render the `header` HTML element.
-  if (renderHeaderElement) {
-    // But if they passed in a component that renders an HTML `<header>`,
-    // then log a warning.
-    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
-      if (child?.type === "header" || child?.props?.mdxType === "header") {
-        console.warn(
-          "NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
-            "in. Set `renderHeaderElement` to `false` to avoid nested HTML " +
-            "`header` elements."
-        );
-      }
-    });
-    headerElement = (
-      <Box as="header" __css={styles}>
-        {children}
-      </Box>
-    );
-  }
-  return headerElement;
-};
-
-/**
- * This component should be used inside the `Template` component to contain both
- * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
- * render its children from edge to edge and is most useful for the headers,
- * `Breadcrumbs`, and `Hero` components or other banner-like components.
- */
-const TemplateBreakout: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateProps>
-) => {
-  const styles = useStyleConfig("TemplateBreakout", {});
-  return <Box __css={styles}>{props.children}</Box>;
+  return <Box __css={styles}>{children}</Box>;
 };
 
-/**
- * This component is most useful to render content on the page. This renders an
- * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
- * be used as the consuming application's skip navigation link. The `TemplateContent`
- * component also takes a `sidebar` prop with optional "left" or "right" values.
- * This will set the correct *styling* needed for the `TemplateContentPrimary`
- * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
- * and `TemplateContentSidebar` must be ordered correctly as children elements
- * for the appropriate styles to take effect.
- */
-const TemplateContent: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateContentProps>
-) => {
-  const { children, id = "mainContent", sidebar = "none" } = props;
-  const styles = useStyleConfig("TemplateContent", {
-    variant: sidebar,
-  });
-  // Manually pass in the `sidebar` prop to the `TemplateContentPrimary` and
-  // `TemplateContentSidebar` components.
-  const newChildren = React.Children.map(
-    children as JSX.Element,
-    (child: React.ReactElement) => {
-      let newChild = child;
-      if (
-        (child && child?.type === TemplateContentPrimary) ||
-        (child?.props && child.props?.mdxType === "TemplateContentPrimary") ||
-        child?.type === TemplateContentSidebar ||
-        (child?.props && child.props?.mdxType === "TemplateContentSidebar")
-      ) {
-        newChild = React.cloneElement(child, { sidebar });
-      }
-
-      return newChild;
-    }
-  );
+const TemplateBreakout: React.FC<any> = ({ children }) => {
+  const styles = useStyleConfig("TemplateNewBreakout", {});
 
   return (
-    <Box as="main" id={id} __css={styles}>
-      {newChildren}
+    <Box gridArea="breakout" __css={styles}>
+      {children}
     </Box>
   );
 };
 
-/**
- * This optional component must be used inside the `TemplateContent` component.
- * This renders content in the main width of the container and will always render
- * above the primary component and the sidebar component (if any).
- */
-const TemplateContentTop: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateProps>
-) => {
-  const styles = useStyleConfig("TemplateContentTopBottom", {});
-  return <Box __css={styles}>{props.children}</Box>;
-};
-
-/**
- * This optional component must be used inside the `TemplateContent` component
- * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
- * This renders content in the main width of the container and should always
- * render below the primary component and the sidebar component (if any).
- */
-const TemplateContentBottom: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateProps>
-) => {
-  const styles = useStyleConfig("TemplateContentTopBottom", {});
-  return <Box __css={styles}>{props.children}</Box>;
-};
-
-/**
- * This component is used to render content in a column when there must be a
- * sidebar component on either its left or right side. It must go inside the
- * `TemplateContent` component. An optional `sidebar` prop value of "left" or
- * "right" can be passed to render the correct CSS styles. If the `sidebar`
- * prop is used in the `TemplateContent` component, there is no need to pass
- * the `sidebar` prop to this component -- `TemplateContent` will handle it.
- */
-const TemplateContentPrimary: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateContentProps>
-) => {
-  const { sidebar } = props;
-  const styles = useStyleConfig("TemplateContentPrimary", {
-    variant: sidebar,
-  });
-  return <Box __css={styles}>{props.children}</Box>;
-};
+const TemplateTop: React.FC<any> = ({ children }) => (
+  <Box gridArea="top">{children}</Box>
+);
 
-/**
- * This component is used to render content in a sidebar column. It must go
- * inside the `TemplateContent` component and must be paired with the
- * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
- * rendered before the `TemplateContentPrimary` component. If this is a right
- * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
- * An optional `sidebar` prop value of "left" or "right" can be passed to render
- * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
- * component, there is no need to pass the `sidebar` prop to this component --
- * `TemplateContent` will handle it.
- */
-const TemplateContentSidebar: React.FC<any> = (
-  props: React.PropsWithChildren<TemplateContentProps>
-) => {
-  const { sidebar } = props;
-  const styles = useStyleConfig("TemplateContentSidebar", {
-    variant: sidebar,
-  });
-  return <Box __css={styles}>{props.children}</Box>;
-};
+const TemplateMain: React.FC<any> = ({ children, id = "mainContent" }) => (
+  <Box as="main" id={id} gridArea="main">
+    {children}
+  </Box>
+);
 
-/**
- * This optional component should be the last child of the `Template`
- * component. This is rendered as an HTML `<footer>` element and spans the full
- * width of the page. If an HTML `<footer>` element is already passed in a
- * custom component, set `renderFooterElement` to `false`.
- */
-const TemplateFooter: React.FC<any> = ({
+const TemplateMainNarrow: React.FC<any> = ({
   children,
-  renderFooterElement = true,
-}: React.PropsWithChildren<TemplateFooterProps>) => {
-  const styles = useStyleConfig("TemplateBreakout", {});
-  let footerElement = <Box __css={styles}>{children}</Box>;
+  id = "mainContent",
+}) => {
+  const styles = useStyleConfig("TemplateNewMainNarrow");
 
-  // The user wants to render the `footer` HTML element.
-  if (renderFooterElement) {
-    // But give a warning if one was passed.
-    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
-      if (child?.type === "footer" || child?.props?.mdxType === "footer") {
-        console.warn(
-          "NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
-            "in. Set `renderFooterElement` to `false` to avoid nested HTML " +
-            "`footer` elements."
-        );
-      }
-    });
-    footerElement = (
-      <Box as="footer" __css={styles}>
-        {children}
-      </Box>
-    );
-  }
-  return footerElement;
+  return (
+    <Box as="main" id={id} gridArea="main" __css={styles}>
+      {children}
+    </Box>
+  );
 };
 
-/**
- * This single component can be used instead of all the individual template
- * components. Instead of importing and rendering the needed "template"
- * components, each section is passed as a prop to the section where it should
- * be rendered. For example, if you want to render content in the
- * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
- */
-export const TemplateAppContainer: ChakraComponent<
-  React.ForwardRefExoticComponent<
-    React.PropsWithChildren<TemplateAppContainerProps> &
-      React.RefAttributes<HTMLDivElement>
-  >,
-  React.PropsWithChildren<TemplateAppContainerProps>
-> = chakra(
-  forwardRef<
-    HTMLDivElement,
-    React.PropsWithChildren<TemplateAppContainerProps>
-  >((props, ref?) => {
-    const {
-      aboveHeader,
-      breakout,
-      contentId = "mainContent",
-      contentBottom,
-      contentPrimary,
-      contentSidebar,
-      contentTop,
-      footer,
-      header,
-      id,
-      sidebar = "none",
-      renderFooterElement = true,
-      renderHeaderElement = true,
-      renderSkipNavigation = false,
-      ...rest
-    } = props;
-    const aboveHeaderElem = aboveHeader && (
-      <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
-    );
-    const contentTopElem = contentTop && (
-      <TemplateContentTop>{contentTop}</TemplateContentTop>
-    );
-    const contentPrimaryElem = contentPrimary && (
-      <TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
-    );
-    const contentBottomElem = contentBottom && (
-      <TemplateContentBottom>{contentBottom}</TemplateContentBottom>
-    );
-    const contentSidebarElem = contentSidebar && (
-      <TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
-    );
-    return (
-      <>
-        {renderSkipNavigation ? <SkipNavigation /> : null}
-        <Template id={id} ref={ref} {...rest}>
-          <TemplateBreakout>
-            {aboveHeaderElem}
-            {(header || breakout) && (
-              <TemplateHeader renderHeaderElement={renderHeaderElement}>
-                {header}
-                {breakout}
-              </TemplateHeader>
-            )}
-          </TemplateBreakout>
-          {/* Note that setting `sidebar` as a prop here affects the
-          TemplateContentSidebar and TemplateContentPrimary components. */}
-          <TemplateContent id={contentId} sidebar={sidebar}>
-            {contentTopElem}
-
-            {sidebar === "left" && contentSidebarElem}
-
-            {contentPrimaryElem}
-
-            {sidebar === "right" && contentSidebarElem}
+const TemplateSidebar: React.FC<any> = ({ children }) => (
+  <Box gridArea="sidebar">{children}</Box>
+);
 
-            {contentBottomElem}
-          </TemplateContent>
-          {footer && (
-            <TemplateFooter renderFooterElement={renderFooterElement}>
-              {footer}
-            </TemplateFooter>
-          )}
-        </Template>
-      </>
-    );
-  })
+const TemplateBottom: React.FC<any> = ({ children }) => (
+  <Box gridArea="bottom">{children}</Box>
 );
 
 export {
   Template,
-  TemplateAboveHeader,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentBottom,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateContentTop,
-  TemplateFooter,
-  TemplateHeader,
+  TemplateTop,
+  TemplateMain,
+  TemplateMainNarrow,
+  TemplateSidebar,
+  TemplateBottom,
 };
-export default TemplateAppContainer;
diff --git a/src/components/Template/TemplateNew.mdx b/src/components/Template/TemplateNew.mdx
deleted file mode 100644
index cc3a6c7c7..000000000
--- a/src/components/Template/TemplateNew.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  TemplateNew,
-  TemplateNewBreakout,
-  TemplateNewTop,
-  TemplateNewMain,
-  TemplateNewSidebar,
-  TemplateNewBottom,
-} from "./TemplateNew";
-import * as TemplateNewStories from "./TemplateNew.stories";
-
-<Canvas of={TemplateNewStories.TemplateNewExample} />
-
-## Full Example
-
-This is best viewed in the Storybook "Canvas" and not "Docs" section.
-
-<Canvas of={TemplateStories.FullExampleWithTemplateChildrenComponents} />
diff --git a/src/components/Template/TemplateNew.stories.tsx b/src/components/Template/TemplateNew.stories.tsx
deleted file mode 100644
index fc6846390..000000000
--- a/src/components/Template/TemplateNew.stories.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { getPlaceholderImage } from "../../utils/utils";
-import Accordion, { AccordionDataProps } from "../Accordion/Accordion";
-import Banner from "../Banner/Banner";
-import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
-import Button from "../Button/Button";
-import Card, { CardHeading, CardContent } from "../Card/Card";
-import Form, { FormField, FormRow } from "../Form/Form";
-import Heading from "../Heading/Heading";
-import Hero from "../Hero/Hero";
-import { HorizontalRule } from "../HorizontalRule/HorizontalRule";
-import Placeholder from "../Placeholder/Placeholder";
-import Table from "../Table/Table";
-import TextInput from "../TextInput/TextInput";
-import {
-  TemplateNew,
-  TemplateNewBreakout,
-  TemplateNewTop,
-  TemplateNewMain,
-  TemplateNewSidebar,
-  TemplateNewBottom,
-} from "./TemplateNew";
-
-const accordionData: AccordionDataProps[] = [
-  {
-    accordionType: "default",
-    label: "Tom Nook",
-    panel: (
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="h4" id="heading1">
-          Tom Nook
-        </CardHeading>
-        <CardContent>
-          Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
-          in the Animal Crossing series who operates the village store.
-        </CardContent>
-      </Card>
-    ),
-  },
-];
-const faqContentData: AccordionDataProps[] = [
-  ...accordionData,
-  {
-    accordionType: "warning",
-    label: "Isabelle",
-    panel: (
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="h4" id="heading1-isabelle">
-          Isabelle
-        </CardHeading>
-        <CardContent>
-          Isabelle, known as Shizue in Japan, is a fictional character from the
-          Animal Crossing series of video games. She is a kindly Shih Tzu that
-          debuted in the 2012 release Animal Crossing: New Leaf, where she
-          serves as the secretary to the player character.
-        </CardContent>
-      </Card>
-    ),
-  },
-  {
-    accordionType: "error",
-    label: "K.K. Slider",
-    panel: (
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="h4" id="heading1-kkslider">
-          K.K. Slider
-        </CardHeading>
-        <CardContent>
-          <p>
-            Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
-            fictional character within the Animal Crossing franchise. One of the
-            franchise's most popular characters, he debuted in the title Animal
-            Crossing, and has appeared in every installment since.
-          </p>
-        </CardContent>
-      </Card>
-    ),
-  },
-];
-
-const columnHeadersAlt = [
-  "Name",
-  "Nick Name",
-  "Species",
-  "Description",
-  "Bio",
-  "Salary (USD)",
-];
-const tableDataAlt = [
-  [
-    "Tom Nook",
-    "Tanukichi",
-    "Raccoon",
-    "A businessman who manages the town shop and the player's home loan.",
-    "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.",
-    "$225,000",
-  ],
-  [
-    "Isabelle",
-    "Shizue",
-    "Dog",
-    "A secretary and assistant to the player. Twin sister to Digby.",
-    "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
-    "$228,500",
-  ],
-  [
-    "K.K. Slider",
-    "Totakeke",
-    "Dog",
-    "A traveling musician and DJ. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
-    "Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.",
-    "$157,000",
-  ],
-  [
-    "Sonny Resetti",
-    "Risetto san",
-    "Mole",
-    "Lectures the player if they reset their game. Brother to Don Resetti.",
-    "Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
-    "$89,000",
-  ],
-];
-const columnStylesComplex = [
-  { minWidth: "200px", width: "15%" },
-  { minWidth: "200px", width: "15%" },
-  { minWidth: "200px", width: "15%" },
-  { minWidth: "500px", width: "auto" },
-  { minWidth: "500px", width: "auto" },
-  { minWidth: "160px", width: "15%", textAlign: "right" },
-];
-
-const otherSubHeaderText =
-  "With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today.";
-
-const meta: Meta = {
-  title: "Components/Page Layout/TemplateNew",
-  component: TemplateNew,
-};
-
-export default meta;
-
-export const TemplateNewExample = {
-  args: {
-    sidebar: "left",
-  },
-  render: (args) => (
-    <>
-      <TemplateNew sidebar={args.sidebar}>
-        <TemplateNewBreakout>
-          <Placeholder>Hero</Placeholder>
-        </TemplateNewBreakout>
-        <TemplateNewTop>
-          <Placeholder variant="short">Content Top</Placeholder>
-        </TemplateNewTop>
-        <TemplateNewSidebar>
-          <Placeholder>Left Sidebar</Placeholder>
-        </TemplateNewSidebar>
-        <TemplateNewMain>
-          <Placeholder>Main Content</Placeholder>
-        </TemplateNewMain>
-        <TemplateNewBottom>
-          <Placeholder variant="short">Content Bottom</Placeholder>
-        </TemplateNewBottom>
-      </TemplateNew>
-    </>
-  ),
-};
-
-export const TemplateNewFullExample = {
-  args: {
-    sidebar: "left",
-  },
-  render: (args) => (
-    <>
-      <TemplateNew sidebar={args.sidebar}>
-        <TemplateNewBreakout>
-          <Breadcrumbs
-            breadcrumbsData={[
-              { url: "#", text: "Home" },
-              { url: "#", text: "Research" },
-              {
-                url: "#",
-                text: "Catalog",
-              },
-            ]}
-          />
-          <Hero
-            backgroundImageSrc={getPlaceholderImage()}
-            heroType="campaign"
-            heading={<Heading level="h1" id="1" text="Hero Campaign" />}
-            imageProps={{
-              alt: "Image example",
-              src: getPlaceholderImage("smaller"),
-            }}
-            isDarkBackgroundImage
-            subHeaderText={otherSubHeaderText}
-          />
-        </TemplateNewBreakout>
-        <TemplateNewTop>
-          <Banner
-            content="This is an the top content area!"
-            heading="Content Top"
-            type="informative"
-          />
-        </TemplateNewTop>
-        <TemplateNewSidebar>
-          <p>Sidebar information in a `Card` component.</p>
-          <Card
-            imageProps={{
-              alt: "Alt text",
-              aspectRatio: "square",
-              size: "default",
-              src: getPlaceholderImage("smaller"),
-            }}
-            isCentered
-          >
-            <CardHeading size="heading4" subtitle="Animal info" id="heading1">
-              Library Image
-            </CardHeading>
-            <CardContent>
-              Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-              libero, a pharetra augue.
-            </CardContent>
-          </Card>
-        </TemplateNewSidebar>
-        <TemplateNewMain>
-          <p>This is the main content!</p>
-          <Accordion accordionData={faqContentData} />
-          <HorizontalRule />
-          <p>Fill out the form!</p>
-          <Form action="/end/point" id="form1">
-            <FormField>
-              <TextInput
-                helperText="Make sure to complete this field."
-                id="username"
-                labelText="Username"
-                isRequired
-              />
-            </FormField>
-            <FormField>
-              <TextInput
-                helperText="Make sure to complete this field."
-                id="password"
-                labelText="Password"
-                isRequired
-              />
-            </FormField>
-            <FormRow>
-              <FormField>
-                <TextInput
-                  id="phone-field"
-                  labelText="Phone Field"
-                  type="tel"
-                />
-              </FormField>
-              <FormField>
-                <TextInput id="url-field" labelText="URL Field" type="url" />
-              </FormField>
-              <FormField>
-                <TextInput id="age-field" labelText="Age" type="number" />
-              </FormField>
-            </FormRow>
-            <FormField>
-              <Button id="submit">Submit</Button>
-            </FormField>
-          </Form>
-          <Table
-            columnHeaders={columnHeadersAlt}
-            columnStyles={columnStylesComplex}
-            id="table-horizontal-scrolling-wo-row-headers"
-            isScrollable
-            showRowDividers
-            showTitleText={false}
-            tableData={tableDataAlt}
-            titleText="Table with horizontal scrolling and no row headers"
-            useRowHeaders
-          />
-        </TemplateNewMain>
-        <TemplateNewBottom>
-          <Banner
-            content="This is an the bottom content area!"
-            heading="Content Bottom"
-            type="informative"
-          />
-        </TemplateNewBottom>
-      </TemplateNew>
-    </>
-  ),
-};
diff --git a/src/components/Template/TemplateNew.tsx b/src/components/Template/TemplateNew.tsx
deleted file mode 100644
index 5f8fe87fd..000000000
--- a/src/components/Template/TemplateNew.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Box, useStyleConfig } from "@chakra-ui/react";
-
-const TemplateNew: React.FC<any> = ({ children, sidebar = "none" }) => {
-  const styles = useStyleConfig("TemplateNew", { variant: sidebar });
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-const TemplateNewBreakout: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewBreakout", {});
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-const TemplateNewTop: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewTop", {});
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-const TemplateNewMain: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewMain");
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-const TemplateNewSidebar: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewSidebar", {});
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-const TemplateNewBottom: React.FC<any> = ({ children }) => {
-  const styles = useStyleConfig("TemplateNewBottom", {});
-
-  return <Box __css={styles}>{children}</Box>;
-};
-
-export {
-  TemplateNew,
-  TemplateNewBreakout,
-  TemplateNewTop,
-  TemplateNewMain,
-  TemplateNewSidebar,
-  TemplateNewBottom,
-};
diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts
index 3baaeff26..708c461c5 100644
--- a/src/components/Template/templateChangelogData.ts
+++ b/src/components/Template/templateChangelogData.ts
@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality", "Styles"],
+    notes: [
+      "Major update to component and styles based on the [Template TAD](https://docs.google.com/document/d/1vZJX7Y-DnEM44-iWw5qoXGdxqavHEN6prhr-YDTNr0o/edit?pli=1&tab=t.0).",
+    ],
+  },
   {
     date: "2024-10-02",
     version: "3.4.0",
diff --git a/src/index.ts b/src/index.ts
index 6d6068934..57624fa9c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -272,33 +272,14 @@ export type {
   TagSetFilterProps,
 } from "./components/TagSet/TagSetFilter";
 export {
-  TemplateAppContainer,
   Template,
-  TemplateAboveHeader,
-  TemplateHeader,
   TemplateBreakout,
-  TemplateContent,
-  TemplateContentTop,
-  TemplateContentPrimary,
-  TemplateContentSidebar,
-  TemplateFooter,
+  TemplateTop,
+  TemplateMain,
+  TemplateMainNarrow,
+  TemplateSidebar,
+  TemplateBottom,
 } from "./components/Template/Template";
-export type {
-  TemplateAppContainerProps,
-  TemplateProps,
-  TemplateContentProps,
-  TemplateFooterProps,
-  TemplateHeaderProps,
-  TemplateSidebarProps,
-} from "./components/Template/Template";
-export {
-  TemplateNew,
-  TemplateNewBreakout,
-  TemplateNewTop,
-  TemplateNewMain,
-  TemplateNewSidebar,
-  TemplateNewBottom,
-} from "./components/Template/TemplateNew";
 export { default as Text } from "./components/Text/Text";
 export type { TextProps, TextSizes } from "./components/Text/Text";
 export { default as TextInput } from "./components/TextInput/TextInput";
diff --git a/src/theme/components/templatenew.ts b/src/theme/components/templatenew.ts
index 652154d02..f9195fd77 100644
--- a/src/theme/components/templatenew.ts
+++ b/src/theme/components/templatenew.ts
@@ -12,10 +12,11 @@ const TemplateNew = defineStyleConfig({
     maxWidth: "1280px",
     m: "0 auto",
     p: "s",
-    gap: responsiveGap,
     gridTemplateAreas: `"breakout" "top" "main" "bottom"`,
     gridTemplateColumns: "repeat(1, minmax(100px, 1fr))",
     gridTemplateRows: "auto",
+    columnGap: responsiveGap,
+    "& > *:not(:last-child)": { mb: responsiveGap },
   }),
   variants: {
     left: {
@@ -47,52 +48,21 @@ const TemplateNew = defineStyleConfig({
 
 const TemplateNewBreakout = defineStyleConfig({
   baseStyle: defineStyle({
-    gridArea: "breakout",
     width: "100vw",
     ml: "calc(-50vw + 50%)",
     px: "s",
   }),
 });
 
-const TemplateNewTop = defineStyleConfig({
+const TemplateNewMainNarrow = defineStyleConfig({
   baseStyle: defineStyle({
-    gridArea: "top",
-  }),
-});
-
-const TemplateNewMain = defineStyleConfig({
-  baseStyle: defineStyle({
-    gridArea: "main",
-  }),
-  variants: {
-    featuredContent: {
-      width: "100vw",
-      ml: "calc(-50vw + 50%)",
-      px: "s",
-    },
-    text: {
-      maxWidth: "600px",
-    },
-  },
-});
-
-const TemplateNewSidebar = defineStyleConfig({
-  baseStyle: defineStyle({
-    gridArea: "sidebar",
-  }),
-});
-
-const TemplateNewBottom = defineStyleConfig({
-  baseStyle: defineStyle({
-    gridArea: "bottom",
+    maxWidth: { lg: "720px" },
+    m: { lg: "0 auto" },
   }),
 });
 
 export default {
   TemplateNew,
   TemplateNewBreakout,
-  TemplateNewTop,
-  TemplateNewMain,
-  TemplateNewSidebar,
-  TemplateNewBottom,
+  TemplateNewMainNarrow,
 };