diff --git a/docs/layout/structure.md b/docs/layout/structure.md
index 9444db48480..5315d0cd9de 100644
--- a/docs/layout/structure.md
+++ b/docs/layout/structure.md
@@ -20,217 +20,48 @@ Ionic Framework provides several different layouts that can be used to structure
### Header
-
-
The most simple layout available consists of a [header](../api/header.md) and [content](../api/content.md). Most pages in an app generally have both of these, but a header is not required in order to use content.
-```html
-
-
-
- Header
-
-
+import Header from '@site/static/usage/v7/header/basic/index.md';
-
-
Main Content
-
-
-```
+
### Footer
-
-
-As you can see, a toolbar in a header appears above the content. Sometimes an app needs to have a toolbar below the content, which is when a footer is used.
-
-```html
-
-
-
Main Content
-
+While a toolbar in a header appears above the content, a footer appears below the content. A header and a footer can also be used together on the same page.
-
-
- Footer
-
-
-
-```
+import Footer from '@site/static/usage/v7/footer/basic/index.md';
-### Header and Footer
+
-These can also be combined on one page to have a toolbar above _and_ below the content.
-```html
-
-
-
- Header
-
-
-
-
-
Main Content
-
+## Tabs Layout
-
-
- Footer
-
-
-
-```
+A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
-### Live examples
-You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-header-footer) and in React [here](https://stackblitz.com/edit/ionic-react-head-foot).
+import Tabs from '@site/static/usage/v7/tabs/router/index.md';
-## Tabs Layout
+
-A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an `ion-router-outlet` or `ion-nav`.
-
-```html
-
-
-
-
Home Content
-
-
-
Settings Content
-
-
-
-
- Home
-
-
-
- Settings
-
-
-
-
-
-```
-
-### Live examples
-
-You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-tabs) and in React [here](https://stackblitz.com/edit/ionic-react-tab-layout).
## Menu Layout
A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
-```html
-
-
-
-
- Menu
-
-
-
-
-
- Navigate
-
-
-
- Home
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Header
-
-
-
-
Main Content
-
Click the icon in the top left to toggle the menu.
-
-
-
-
-
-```
-
-### Live examples
-
-You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-menu-layout) and in React [here](https://stackblitz.com/edit/ionic-react-menu).
+import Menu from '@site/static/usage/v7/menu/basic/index.md';
+
+
+
## Split Pane Layout
A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.
-By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `sm` screens and up, or when the viewport is larger than `576px`. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.
-
-```html
-
-
-
-
-
- Menu
-
-
-
-
-
- Navigate
-
-
-
- Home
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Header
-
-
-
-
Main Content
-
-
-
-
-```
-
-It's important to note that the element with the `id` matching the `content-id` specified by the split pane will be the main content that is always visible. This can be any element, including an [ion-nav](../api/nav.md), [ion-router-outlet](../api/router-outlet.md), or an [ion-tabs](../api/tabs.md).
-
-### Live examples
-
-You can view a live example of this setup in Angular [here](https://stackblitz.com/edit/ionic-ng-split-pane) and in React [here](https://stackblitz.com/edit/ionic-react-split-pane).
+By default, the split pane view will show when the screen is larger than `768px`, or the `md` breakpoint, but this can be customized to use different breakpoints by setting the `when` property. Below is an example where the split pane contains a menu that is visible for `xs` screens and up, or when the viewport is larger than `0px`. This will show the split pane for all screen sizes.
+
+It's important to note that the element with the `id` matching the `contentId` specified by the split pane will be the main content that is always visible. This can be any element, including a [nav](../api/nav.md), [router outlet](../api/router-outlet.md), or [tabs](../api/tabs.md).
+
+import SplitPane from '@site/static/usage/v7/split-pane/basic/index.md';
+
+